CSS基础知识（三）CSS元素显示模式以及三大特性

一、CSS的元素显示模式

1.作用：网页标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局页面
2.HTML元素一般分为块元素和行内元素

（一）块元素

1.div为最典型的块元素，还有h1-h6,p,ul,ol,li等
2.特点

• 比较霸道，自己独占一行
• 高度，宽度，外边距以及内边距都可以控制
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子，里面可以放行内或块级元素

3.注意

• 文字类的元素内不能使用块级元素，如：p
• h1-h6等都为文字类的块级标签，里面也不能放其他块级元素
  

（二）行内元素

1.span为最典型的行内元素，还有a,strong,b,em,i,del,s,ins,u等
2.特点

• 相邻行内元素在一行上，一行可以显示多个
• 高度、宽度直接设置是无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

3.注意

• 链接里面不能再放链接
• 特殊情况，链接a里面可以放块级元素，但给a链接转换一下块级模式最安全

（三）行内块元素

1.同时有块元素和行内元素的特点，如：img，input,td等
2.特点

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
• 默认宽度就是它本身内容的宽度（行内元素特点）
• 高度，行高外边距以及内边距都可以控制（块级元素特点）

（四）元素显示模式转换

1.转化为块元素（display:block;）

2.转化为行内元素（display:inline;）

3.转化为行内块（display:inline-block;）

单行文字垂直居中的小技巧

总结

二、CSS的三大特性

（一）层叠性

1.解决样式冲突问题（相同选择器设置相同的样式会覆盖另一种冲突样式）

2.层叠性原则

• 样式冲突，遵循就近原则，哪个样式离结构近就执行哪种样式
• 样式不冲突，不会重叠

（二）继承性

1.子标签会继承父标签的某些样式（inherite）,恰当使用继承可以简化代码，降低CSS样式的复杂性

2.行高的继承性

body {
	font: 12px/1.5  Microsoft YaHei;
}

a.行高可以跟单位也可以不跟单位（1.5是当前文字大小的1.5倍）
b.若子元素没有设置行高，则会继承父元素行高的1.5倍

（三）优先级

1.同一元素指定多个选择器
2.选择器相同，则执行层叠性
3.选择器不同，则根据选择器权重执行

三、选择器权重

• 权重是由四位数组成，
• 权重有叠加，但永远不会有进位
• 等级判断从左向右，如果某一位数相同，则判断下一位数
• 继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素的权重都是0