1.元素显示模式
1.1 块级元素
常见的块元素有: h1~h6、p、div、ul、li、dl、dd、form、header、nav、footer......
显示特点:
- 独占一行(一行只能显示一个)
- 宽度默认是父元素的宽度,高度默认由内容撑开
- 可以设置宽高
注意:
- 文字类的块级元素内不能放置块级元素,会发生语法错误
<p>
标签主要用于存放文字,因此<p>
里面不能放块级元素,特别是不能放<div>
- 同理,
<h1> ~ <h6>
等都是文字类块级标签,里面也不能放其他块级元素
1.2 行内元素
常见行内元素:a、span、b、u、i、s、strong、ins、em、del......
显示特点:
- 一行可以显示多个
- 宽度和高度默认由内容撑开,不可以设置宽高
- 行内元素只能容纳文本或其他行内元素(a除外)
注意:
- 链接里面不能再放链接
- 特殊情况链接a里面可以放块级元素,但是a转换一下块级模式最安全
1.3 行内块元素
代表标签:input、textarea、button、select......
显示特点:
- 一行可以显示多个
- 可以设置宽高
注意:img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline
1.4 元素显示模式转换
改变元素默认的显示特点,让元素符合布局要求
属性 | 效果 | 使用频率 |
display:block | 转换成块级元素 | 较多 |
display:inline-block | 转换成行内块元素 | 较多 |
display:inline | 转换成行内元素 | 较少 |
拓展1:HTML嵌套规范注意点
拓展2 :居中方法总结
2. CSS特性
2.1 继承性
特性:子元素有默认继承父元素样式的特点(子承父业)
可以继承的常见属性(文字控制属性都可以继承):color、font-style、font-weight、font-size、font-family、text-indent、text-align、line-height......可以通过调试工具判断样式是否可以继承。
- 可以在一定程度上减少代码,可以直接给ul设置list-style:none 属性,从而去除列表默认的小圆点样式。
- 直接给body标签设置统一的font-size,从而统一不同浏览器默认文字。
拓展:继承失效的特殊情况
- a 标签的color会继承失效,其实color 属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了
- h 系列标签的font-size会继承失效,其实 font-size 属性继承下来了,但是被浏览器默认的设置给覆盖了
2.2 层叠性
给同一个标签设置相同的样式,样式会层叠覆盖,最终写在最后的样式会生效
给同一个标签设置不同的样式,样式会层叠叠加,会共同作用在标签上
注意:样式冲突时,还只有当选择器优先级相同时,才能通过层叠性判断结果;遵循就近原则,哪个样式结构近,就执行哪个样式。样式不冲突,不会层叠。
就近标准: 后>前
2.3 优先级
不同优先级有不同的优先级,优先级高的会覆盖低的选择器样式。
优先级公式:
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 style=" " < !important
- !important写在属性值的后面,分号前面
- !important不能提升继承的优先级,只要是继承优先级最低!!!
- 实际开发中不建议使用!important
权重叠加计算:复合选择器,需要通过权重叠加计算,判断哪个选择器优先级会最终生效
计算公式:(每一级之间不存在进位)
- 先比较第一级数字,比较出结果后,后面的不再比较
- 如果第一级相同,比较第二级,出来之后后面就不看啦,以此类推
- 如果最终所有数字都相同,那优先级也就相同,就比较层叠性(谁写在下面,谁说了算!)
注意: !important如果不是继承,它的权重最高,江湖第一!