日子一天接一天的飞快流逝,每天能学到一点新的东西,也是件令人开心的事吧!
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.多个单词建议使用_连接