日子一天接一天的飞快流逝，每天能学到一点新的东西，也是件令人开心的事吧！
1.块与行
display:显示
display:block | inline | inline-block | none ;显示为块级元素|显示为行级元素|显示为行块级元素|不显示
2.块级标签的特点：
1.独占一行
2.可以设置尺寸
3.没有明确宽度的时候，宽度由父级决定
4.没有明确高度的时候，高度由内容决定
5.支持margin,padding
3.行级标签的特点：
1.不会独占一行，可以与其他行级元素并排
2.不支持尺寸设置
3.对margin左右，padding左右支持较好，上下间距慎用(谨记)
4.display:inline-block;行快级标签特点
1.支持盒模型，但不会独占一行
5.盒模型
盒模型分为标准盒模型和怪异盒模型
盒模型有：margin padding border内容尺寸width/height
怪异盒模型：padding和border不影响盒子的内容：box-sizing :border-box;
标准盒模型内容尺寸盒子尺寸 区域尺寸
盒子和盒子之间用margin，盒子内部用padding,盒子尺寸用auto
6.三种样式：
(1)行间样式的优缺点：
1.优点：不会额外的产生请求
2.缺点：容易产生重复的代码，造成文档体积变大
不利于维护
不符合结构与样式分离的规范
综上所述：不建议使用行间样式
(2)内部样式的优缺点
1.优点：不会产生额外的请求
初步实现结构与样式的分离
2.缺点：代码复用不方便
适合单页面网站应用
(3) 外部样式表的优缺点：
1.优点：利于后期维护
可以重复使用
完成实现结构与样式的分离
2.缺点：会产生额外的请求（但是后期我们会借助工具抹平这个缺点）
7.标签名选择器：作用于一类选择器，方式是通过标签名称，使得样式重置
8.群组选择器：选择器1，选择器2，。。。用于优化代码，，减少文档体积
9.类选择器：
10. class命名规范
1.不要以数字开头
2.尽量取的有意义
3.多个单词建议使用_连接
网友评论