Day08 CSS 课堂案例

1 回顾

1. 盒子模型
   1.1 盒子模型的组成
   1.2 内容 width/max-width/min-width height/max-height/min-height
   1.3 内边距 padding/padding-left/padding-right/padding-top/padding-bottom
   1.4 边框 border-style/border-color/border-width/border ...
   1.5 外边距 margin/margin-left/maring-right/maring-top/margin-bottom
   1.6 隐藏元素
   1.7 溢出内容

2. 默认样式和继承样式
   直接设置的样式 > 自带的默认样式 > 继承的样式

2 浮动

2.1 浮动的简介

1. 浮动最早实现文字环绕图片的效果（给图片设置浮动，就可以被环绕）
2. 现在浮动是主流的网页布局方式，代替上一代的表格布局

2.2 元素浮动之后的特点

1. 不论元素原来的显示模式是行内、行内块还是块级，设置浮动就好，就是浮动元素，具有浮动元素的特点
2. 浮动元素默认宽高被内容撑开
3. 浮动元素可以设置宽高以及四个方向内外边距
4. 浮动元素会脱离文档流，显示在其他元素的上面
5. 多个元素一起浮动，会水平排列，一行宽度不够自动换行

2.3 浮动元素产生的影响

① 元素浮动之后产生的影响

对后面元素的影响：

后面的元素会向前占用浮动元素原来的位置，显示在浮动元素的下面！

对父元素的影响：

浮动元素脱离文档流，父元素的高度无法被撑起，造成高度塌陷！

② 解决浮动的影响（清除浮动）

解决对后面元素的影响：

给紧邻在浮动元素后面的非浮动元素设置 CSS 演示： clear:both

解决对父元素的影响：

1. 方案一： 给父元素设置固定高度（不建议）
2. 方案二： 以浮制浮，给父元素也设置浮动（不建议，造成新的影响）
3. 方案三： 给父元素设置css属性 overflow 值不为 visible 即可（推荐）
4. 方案四： 在浮动元素的最后面，添加一个块级元素，设置样式 clear:both（需要额外添加元素）
5. 方案五： 使用伪类选择器动态地在浮动元素的后面创建元素，元素同方案4.（推荐）

父元素::after {
    content: "";
    display: block;
    clear: both;
}

2.4 浮动相关的 CSS 属性

CSS 属性	功能	属性值
float	设置浮动	none：没有浮动，默认值。 left：向左浮动。 right：向右浮动。
clear	清除浮动	left：清除前面左浮动元素的影响。 right：清除前面右浮动元素的影响。 both：清除前面左右浮动元素的影响。

3 行内元素或行内块元素在布局中的特点

3.1 文本属性作用于行内元素和行内块元素

① 让行内块元素或行内元素水平居中（在父元素中设置样式）

text-align: center;

② 让行内元素或行内块元素垂直居中（在父元素中设置样式）

1. 父元素设置行高与自己的高度一致
2. 行内块元素还需给自己设置 vertical-align: middle;

3.2 行内元素或行内块元素之间的空白问题

① 元素之间的空白（左右）

产生原因：

代码中，写完标签进行换行！

解决方案：

1. 方案一：代码中不换行（不推荐）
2. 方案二：设置父元素字体大小为 0，单独设置行内块元素的字体大小；注意还要设置行内块元素 vertical-align 的值不为 baseline

② 底部的空白（图片的幽灵空白）

产生原因：

行内块元素沿基线对线，底部空白就是基线与底线的距离！

解决方案：

1. 方案一： 父元素设置字体大小为 0
2. 方案二： 行内块元素设置 vertical-align 不为 baseline
3. 方案三： 把行内块元素变为块级元素（主要用于图片元素）