一、显示模式
(1)块级元素
代表元素:div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......
特点:1.独占一行(一行只能显示一个);
2.宽度默认时父元素的宽度,高度默认由内容撑开;
3.可以设置宽度。
(2)行内元素
代表标签:a、spar、b、u、i、s、strong、ins、em、del...
特点:1.一行可以显示多个;
2.宽度和高度默认由内容展开;
3.不可以设置高度。
(3)行内块
代表标签:input、textarea、button、select...
特点:1.一行可以显示多个
2.可以设置宽高。
(4)转换
改变元素默认的显示特点,让元素复合布局要求;
属性 | 效果 | 使用频率 |
display:block | 转换成块级元素 | 较多 |
display:inline-block | 转换为行内块元素 | 较多 |
display:inline | 转换为行内元素 | 较少 |
示例:将块级元素修改为行内块
/*这是.css*/
div {
display:inline-block;
}
可以一行内使用多个div.
(5)嵌套规范
1.块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等。
但是:<p>元素中不要嵌套<div>、<p>、<h>等块级元素
2.<a>元素内部可以嵌套任何元素。
但是:<a>元素中不可以嵌套<a>元素
二、特性
(1)继承性
特性:子元素默认继承父元素的样式
常见的可以继承的属性(文字控制属性都可以继承)
1.color
2.font的四个属性
3.text-indent、text-align
4.line-height
5. ......
注意:可以通过调试工具判断是否可以继承;
当元素有默认属性时,继承性仍然生效,但优先显示默认属性。
(2)层叠性
特性:
1.给同一个元素设置不同的样式-->此时样式会层层叠加-->会共同作用在元素上;
2.给同一个元素设置相同的样式-->此时样式会层层覆盖-->写在最后的样式会作用在元素上。
注意:当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果。
三、特性.优先级
特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式。
优先级公式:继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意:
1.!important写在属性值的后面,分号的前面。
2.!important不能提升继承的优先级,继承的优先级永远最低。
3.实际开发不建议使用!important.
对于复合选择器,需要通过权重叠加计算来判断最终哪个选择器优先级最高;
在复合选择器中:
(0,0,0,0) --> (行内样式个数,id选择器个数,类选择器个数,标签选择器个数)
从左到右挨个比较大小,优先选择大的。