CSS 学习笔记：布局
元素的显示模式
元素有两三种显示模式：块元素、行内元素和行内块元素。
块元素
常见的块元素有 h1-h6, p, div, ul, ol, li。
- 块元素独占一行
- 高度、宽度、外边距和内边距可以调整
- 宽度默认是容器（父元素）的100%
- 本身是一个容器或盒子，里面可以放行内元素或者其他块元素
WARNING
- 文字类的块元素内部不能再放置其他元素
行内元素
常见的行内元素有 a, strong, b, em, i, del, s, ins, u, span。
- 相邻的行内元素在同一行上，一行可以显示多个行内元素
- 高度、宽度设置是无效的
- 默认宽度是本身内容的宽度
- 行内元素只能容纳文本或者其他的行内元素
WARNING
- 链接里面不能再放链接
- 特殊情况链接标签里面可以放块元素，但建议将链接标签转换成块元素
行内块元素
行内元素中有一些特殊的元素，img、input、td 标签同时具有块元素和行内元素的特点。
- 和相邻的行内元素在一行上（块元素特点），但是之间有空白缝隙，一行可以显示多个（行内元素特点）
- 默认宽度是本身内容的宽度（行内元素特点）
- 高度、行高、外边距以及内边距都可以控制（块元素特点）
元素显示模式切换
部分块元素和行内元素可以进行显示模式的转换，主要使用 display 样式。
转换成块元素
css
display: block;转换成行内元素
css
display: inline;转换成行内块元素
css
display: inline-block;CSS 三大特性
CSS 有三个非常重要的特性：层叠性、继承性、优先级
层叠行
层叠，效果其实就是覆盖。相同的选择器设置不同的样式，会发生样式冲突，层叠性就是解决冲突的问题。
层叠行原则
- 样式冲突，就近原则（优先级的问题），哪个样式离结构近，就执行哪个样式
- 样式不冲突，不发生层叠
继承性
子标签继承父标签的某些样式。
行高的设置
css
body {
font: 12px/1.5 'Microsoft YaHei';
}
div {
/* 此时div的行高是14*1.5=21 */
font-size: 14px;
}
p {
/* 未指定文字大小，默认使用父元素 body 设置的行高，即 12*1.5=18 */
}
<body>
<div>Spring</div>
<p>Summer</p>
</body>- 行高可以跟单位，也可以不跟
- 子元素没有设置行高时，继承父元素的行高的 1.5 倍
- 子元素的行高是当前子元素的文字大小的 1.5 倍
优先级
详见 CSS 选择器优先级。
TIP
!important >內联样式 >ID 选择器 >类选择器|伪类选择器|属性选择器 >元素选择器|伪元素选择器 >继承|*