css总结
2016-07-06 22:17
295 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 1.<!DOCTYPE html> -->
如果不写：ie6-8下，会出现怪异盒模型
怪异盒模型：元素的大小变成：content+margin
标准盒模型：元素大小：content+border+padding+margin
让盒模型变为怪异盒模型方式：box-sizing:border-box;但用的时候需要先设置border
<!-- 2.标签 -->
从结构上分：单标签和双标签
双标签可以嵌套，且必须闭合
从属性分：行标签和块标签
行标签：
1.内容撑开宽高
2.可以一行显示
3.行标签不能嵌套块标签
4.不能设置宽高及纵向的margin
行标签：img ,input, a, strong, em, span
img和input可以设置宽高。
a标签不能嵌套a标签
块标签：
1.独占一行
2.可以设置宽高及纵向margin
3.可以任意嵌套
4.默认宽度百分百
块标签：div, p, h1-h6, ul, ol, li, dl, dt, dd, form, hr
p标签不能嵌套块标签
h标签不能嵌套块标签
特殊标签：table, th, tr, td, caption
border边框
cellspacing单元格的距离
cellpadding单元格的内间距
colspan跨列
rowspan跨行
标签嵌套使用：
table>tr>td+th, ol>li, ul>li, dl>dt+dd, form>input, select>option
<!-- 3.SEO 搜索引擎优化 / SEM 搜索引擎营销 -->
1.title
2.mata:keywords 关键字, description 描述
3.h1,h2。 h1不能超过一个，h2不能超过10个
4.img-alt
5.a
6.strong 强调
7.pr 友情链接(rank 排名)
<!-- 4.form表单 -->
action：提交信息的地址
method：提交信息的方式
get：是一种直接请求的方式。安全性低，速度快。不会给服务器造成太大压力。
post：请求过程需要转码。保密性稍高，可以上传较大文件，速度较慢，一般信息采集时使用。
input：
1.text 文本输入框
2.button 按钮
3.submit 提交
4.password 密码框
5.reset 重置
6.file 文件上传
7.checkbox 多选
8.radio 单选
<!-- 5.代码规范 -->
1.标签换行
2.标签缩进 tab
3.标签关闭
4.标签名小写
5.属性名书写规范
6.注释要写在上面
<!-- 6.css引入方式 -->
1.外部引入 link
优点：
1.一个css可以控制多个页面
2.便于维护
3.代码简单，易修改
4.适合团队开发
缺点：
1.对于单个页面的控制，可能存在垃圾代码
2.会给服务器造成一定压力
2.内部引入 style标签
优点：
1.速度快
2.不会给服务器造成压力
缺点：
1.不利于前后台交互
2.不利于维护
3.内联样式 style属性
优点：
1.优先级最高
缺点：
1.垃圾代码多
2.与js有冲突
3.不利于维护
优先级：
内联样式 > 内部引入 > 外部引入
<!-- 7.css选择器 -->
1.id (#div1)
2.class (.div)
3.标签名 (div)
4.群组 （.div1, #div2）
5.后代 （div p）
6.组合 (p.title)既是p class又为title的
7.伪类选择器 （：hover，：after， ：before）
8.全局选择器 （*）
<!-- 8.选择器的优先级 -->
style 最高， 内联样式
id > class > 标签名
id = 100
class = 10
标签名 = 1
id 最高，与class是数量级之间的区别
#div1 .span2
.a#title
如果优先级权重一样，听后面写的
<!-- 9.css简单样式 -->
1.font-size: 文字大小，最小12px 默认16px
2.font-family：“微软雅黑”，“宋体”，“楷体”
3.font-style：normal默认、italic斜体、oblique倾斜
4.font-weight：100~900 normal，lighter，bold
5.color：英文， #16进制，rgb（），rgba（0-255，2-255，0-255）（css3）alpha 表示透明度
文本：
1.text-align:对齐方式：left， right， center， justify（两端对齐）
2.text-indent：首行缩进 em
3.text-decoration：overline, line-through, underline, none
4.line-height:行间距 行高，可以用于一行的垂直居中。
5.word-spacing:单词间距，空格识别
6.letter-spacing：字母间距
vertical-align：垂直对齐方式：top, middle, bottom 不建议多使用 如果一行都是内容，可以选择一行对齐的基线。
background:
1.background-color:背景颜色
2.background-image:背景图片 url(相对路径/绝对路径)
3.background-repeat:默认平铺，no-repeat,repeat-x,repeat-y
4.background-position:设置背景图的位置，两组数据。
5.background-attachment:scroll， fixed 背景是否跟着内容滚动
6.background-size:两组数据，可以设置背景图片的大小
<!-- 10.盒模型 -->
margin + border + padding + content
如何实现盒子居中：要先设好宽度 再margin：0 auto；
<!-- 11.display -->
1.inline 行标签
2.block 块标签
3.inline-block 一行显示的块标签
4.display：table；
5.display：table-cell；
为什么要变成table和table-cell？
配合vertical-align使用。是一种垂直居中的方式。
6.none：没有，隐藏（不占文本流）。visiable（占文本流）
<!-- 12.浮动 -->
文本流：元素在文档中所占的位置。
浮动：脱离当前文档流，按照一定的方向移动，直到遇到父级边界或者其他浮动元素停止。
left， right
特点：
1.脱离文档流。
2.默认内容撑开宽高
3.可以设置margin和padding
4.可以在一行显示
5.可以清除中间的默认缝隙
6.所有元素都可以变为浮动元素
清除浮动：
1.给父级加浮动
2.给父级加overflow：hidden；
3.给兄弟加clear：both；
<!-- 13.定位 -->
position：fixed 基于窗口定位
特点：
1.脱离文档流
2.固定在窗口的某一位置
3.默认内容撑开宽高
4.可以设置宽高以及margin
应用：小广告， 小工具， 导航栏
position：absolute 绝对定位
特点：
1.脱离文档流
2.默认内容撑开宽高
3.可以设置宽高及margin
4.基于祖辈中上一个定位元素定位
应用：内容重叠
position：relative 相对定位
特点：
1.不脱离文档流
2.原来元素属性不变
3.当我们不设置top，bottom，left，right时，没变化
应用：
1.微调
2.给absolute做父级
z-index:重叠的顺序，大的值在上，可以为负数
z-index只能用于兄弟之间
</body>
</html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 1.<!DOCTYPE html> -->
如果不写：ie6-8下，会出现怪异盒模型
怪异盒模型：元素的大小变成：content+margin
标准盒模型：元素大小：content+border+padding+margin
让盒模型变为怪异盒模型方式：box-sizing:border-box;但用的时候需要先设置border
<!-- 2.标签 -->
从结构上分：单标签和双标签
双标签可以嵌套，且必须闭合
从属性分：行标签和块标签
行标签：
1.内容撑开宽高
2.可以一行显示
3.行标签不能嵌套块标签
4.不能设置宽高及纵向的margin
行标签：img ,input, a, strong, em, span
img和input可以设置宽高。
a标签不能嵌套a标签
块标签：
1.独占一行
2.可以设置宽高及纵向margin
3.可以任意嵌套
4.默认宽度百分百
块标签：div, p, h1-h6, ul, ol, li, dl, dt, dd, form, hr
p标签不能嵌套块标签
h标签不能嵌套块标签
特殊标签：table, th, tr, td, caption
border边框
cellspacing单元格的距离
cellpadding单元格的内间距
colspan跨列
rowspan跨行
标签嵌套使用：
table>tr>td+th, ol>li, ul>li, dl>dt+dd, form>input, select>option
<!-- 3.SEO 搜索引擎优化 / SEM 搜索引擎营销 -->
1.title
2.mata:keywords 关键字, description 描述
3.h1,h2。 h1不能超过一个，h2不能超过10个
4.img-alt
5.a
6.strong 强调
7.pr 友情链接(rank 排名)
<!-- 4.form表单 -->
action：提交信息的地址
method：提交信息的方式
get：是一种直接请求的方式。安全性低，速度快。不会给服务器造成太大压力。
post：请求过程需要转码。保密性稍高，可以上传较大文件，速度较慢，一般信息采集时使用。
input：
1.text 文本输入框
2.button 按钮
3.submit 提交
4.password 密码框
5.reset 重置
6.file 文件上传
7.checkbox 多选
8.radio 单选
<!-- 5.代码规范 -->
1.标签换行
2.标签缩进 tab
3.标签关闭
4.标签名小写
5.属性名书写规范
6.注释要写在上面
<!-- 6.css引入方式 -->
1.外部引入 link
优点：
1.一个css可以控制多个页面
2.便于维护
3.代码简单，易修改
4.适合团队开发
缺点：
1.对于单个页面的控制，可能存在垃圾代码
2.会给服务器造成一定压力
2.内部引入 style标签
优点：
1.速度快
2.不会给服务器造成压力
缺点：
1.不利于前后台交互
2.不利于维护
3.内联样式 style属性
优点：
1.优先级最高
缺点：
1.垃圾代码多
2.与js有冲突
3.不利于维护
优先级：
内联样式 > 内部引入 > 外部引入
<!-- 7.css选择器 -->
1.id (#div1)
2.class (.div)
3.标签名 (div)
4.群组 （.div1, #div2）
5.后代 （div p）
6.组合 (p.title)既是p class又为title的
7.伪类选择器 （：hover，：after， ：before）
8.全局选择器 （*）
<!-- 8.选择器的优先级 -->
style 最高， 内联样式
id > class > 标签名
id = 100
class = 10
标签名 = 1
id 最高，与class是数量级之间的区别
#div1 .span2
.a#title
如果优先级权重一样，听后面写的
<!-- 9.css简单样式 -->
1.font-size: 文字大小，最小12px 默认16px
2.font-family：“微软雅黑”，“宋体”，“楷体”
3.font-style：normal默认、italic斜体、oblique倾斜
4.font-weight：100~900 normal，lighter，bold
5.color：英文， #16进制，rgb（），rgba（0-255，2-255，0-255）（css3）alpha 表示透明度
文本：
1.text-align:对齐方式：left， right， center， justify（两端对齐）
2.text-indent：首行缩进 em
3.text-decoration：overline, line-through, underline, none
4.line-height:行间距 行高，可以用于一行的垂直居中。
5.word-spacing:单词间距，空格识别
6.letter-spacing：字母间距
vertical-align：垂直对齐方式：top, middle, bottom 不建议多使用 如果一行都是内容，可以选择一行对齐的基线。
background:
1.background-color:背景颜色
2.background-image:背景图片 url(相对路径/绝对路径)
3.background-repeat:默认平铺，no-repeat,repeat-x,repeat-y
4.background-position:设置背景图的位置，两组数据。
5.background-attachment:scroll， fixed 背景是否跟着内容滚动
6.background-size:两组数据，可以设置背景图片的大小
<!-- 10.盒模型 -->
margin + border + padding + content
如何实现盒子居中：要先设好宽度 再margin：0 auto；
<!-- 11.display -->
1.inline 行标签
2.block 块标签
3.inline-block 一行显示的块标签
4.display：table；
5.display：table-cell；
为什么要变成table和table-cell？
配合vertical-align使用。是一种垂直居中的方式。
6.none：没有，隐藏（不占文本流）。visiable（占文本流）
<!-- 12.浮动 -->
文本流：元素在文档中所占的位置。
浮动：脱离当前文档流，按照一定的方向移动，直到遇到父级边界或者其他浮动元素停止。
left， right
特点：
1.脱离文档流。
2.默认内容撑开宽高
3.可以设置margin和padding
4.可以在一行显示
5.可以清除中间的默认缝隙
6.所有元素都可以变为浮动元素
清除浮动：
1.给父级加浮动
2.给父级加overflow：hidden；
3.给兄弟加clear：both；
<!-- 13.定位 -->
position：fixed 基于窗口定位
特点：
1.脱离文档流
2.固定在窗口的某一位置
3.默认内容撑开宽高
4.可以设置宽高以及margin
应用：小广告， 小工具， 导航栏
position：absolute 绝对定位
特点：
1.脱离文档流
2.默认内容撑开宽高
3.可以设置宽高及margin
4.基于祖辈中上一个定位元素定位
应用：内容重叠
position：relative 相对定位
特点：
1.不脱离文档流
2.原来元素属性不变
3.当我们不设置top，bottom，left，right时，没变化
应用：
1.微调
2.给absolute做父级
z-index:重叠的顺序，大的值在上，可以为负数
z-index只能用于兄弟之间
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web布局连载——两栏固定布局（五）
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略，这里的坑你知多少？
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动，你应该知道的
- 设计更快的网页（三）：字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页