在黑马学习CSS第四天，重点

CSS第三天

盒子模型案例（昨日总结）

案例小结:

开发步骤:

1. 分析页面结构（如果内容太多，可以后续补充）
2. 编写公共样式
3. 从上向下从第一个大盒子开始
   (最外侧盒子需要有注释，辅助 CSS 分段和阅读)
4. 从上向下，从左向右依次编写小盒子样式，直到一个大盒子完成
5. 如果小盒子比较复杂可以：
   1. 开始前增加背景颜色辅助调试
   2. 结束后删除背景颜色

分隔线的实现技巧:
使用 padding 可以让分割线比文本长

取消无序列表的小圆点：
list-style: none;

列选择快捷键:
ctrl + alt + shift + ↑ / ↓

布局时务必要注意 padding 和 border 会对影响盒子大小

CSS其他样式

边框和阴影

圆角边框

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

圆角边框的效果：在边框的四周有一个圆形转角，让盒子视觉效果更好

圆角边框在网页布局中使用的多

圆角边框的属性：border-radius

圆角边框的使用

语法：

 border-radius:length; （参数值可以为数值或百分比的形式 ） 

圆形：
border-radius: 50%;
正方形盒子是圆形 / 长方形盒子是椭圆

怎么做圆角矩形：
border-radius: 高度的一半;
长方形盒子（宽 > 高）

设置不同的圆角：
border-radius: 10px 20px 30px 40px; 左上 → 右上 → 右下 → 左下（顺时针）
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

语法：

box-shadow: h-shadow v shadow blur spread color inset;

盒子阴影属性：

前两个数是方向，后两个数是半径，然后是颜色，最后一个几乎用不到。

示例代码：

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

盒子阴影不会影响盒子大小。

div 可以使用 :hover ；因为伪类是状态 / div 同样存在鼠标经过状态

浮动

传统网页布局的三种方式

传统网页布局的三种方式：
标准流（文档流）
浮动
定位

标准流（文档流）布局的方式：
标签按照规定好的默认方式排列（块级元素、行内元素）；标准流是最基本的布局方式。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

浮动基础

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

 选择器 { float: 属性值; }

浮动能解决的问题：

1. 让多个块级元素（不改变显示方式）水平排成一行
2. 让两个块级元素一个左对齐，一个右对齐

网页布局的准则：
3. 多个块级元素纵向排列 —— 标准流
4. 多个块级元素横向排列 —— 浮动

浮动的概念：
float 属性用于创建浮动框，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

浮动的方向以及语法：
左浮动： float: left;
右浮动： float: right

元素浮动后具有的三个特性：
1.脱离标准流（脱标）
2.一行显示并且顶部对齐
3.具有行内块元素的特性

总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式。

浮动特性-脱标

元素浮动后具有的三个特性：

1. 脱离标准流（脱标）
2. 一行显示并且顶部对齐
3. 具有行内块元素的特性

盒子脱标后还不会保留原有位置；后续的盒子会占据被浮动盒子原有的位置

浮动特性-浮动元素一行显示

几个浮动元素之间不会有缝隙；并且会按照顶部对齐

如果父级盒子宽度装不下浮动的盒子，上一排空间不够的盒子会被挤下来

浮动特性-浮动元素具有行内块特性

行内元素可以使用浮动

行内元素浮动之后可以直接指定宽高

行内元素有了浮动属性后，可以指定宽高，不需要使用 display: inline-block 转换显示模式

没有给块级盒子设置宽度，默认宽度是父级盒子的宽度；浮动之后的宽度由内容来决定

浮动元素经常搭配标准流的父元素

在网页布局时，标准流的父盒子排列上下位置，这样标准流父盒子可以约束浮动的子盒子，按照我们布局要求在父盒子内排列

在网页布局时，浮动的子盒子负责在父盒子中横向排列里面填写内容

浮动小结

应用场景：与标准流的父盒子搭配使用

1. 标准流父盒子负责上下
2. 浮动子盒子负责左右
3. 内容套在子盒子内部，子盒子最好不要既负责布局，又要负责内容

浮动的元素会脱标 —— 下方的盒子会占据原有的位置
父盒子中的所有亲儿子盒子一起浮动

浮动相比较 inline-block 的优势：

1. 没有缝隙，可以精确控制盒子之间的距离
2. 顶端对齐（ inline-block 会按照文字对齐方式对齐）

初学浮动布局的痛点：
3. 务必要控制好每个盒子的宽度，宽度不够会掉下去
4. 用调试工具检查盒子位置最靠谱，千万不要盯着代码看
5. * {margin: 0; padding: 0} 不要忘

负责布局的盒子就只负责布局，不要监管内容。
盒子多能保证呆在靠谱的位置比什么都强，盒子位置对了，填写内容更容易。
盒子少既要负责布局，又要负责内容，稍微复杂就乱套。
结构永远最重要，结构乱了，CSS也无能为力。

清除浮动

不是所有父盒子都能准确指定高度，例如京东商城的产品特别多、新闻内容这些场景不方便指定盒子高度

如果子盒子全部浮动，父盒子的高度不能被撑开，因为盒子浮动后，会脱标，一旦脱标，原有位置不再保留

清除浮动的原因：
如果在开发时，不方便给父盒子指定高度，子盒浮动后（脱标），不占有原有位置，导致父盒子高度为 0，最终影响到下方的盒子

清除浮动本质以及额外标签法

清除浮动的本质：
清除浮动元素脱标后造成的影响
清除浮动后，父盒子可以根据浮动的子盒子自动检测高度，父盒子有了高度，就不会对下方的标准流造成影响了

清除浮动的属性：clear: both;

额外标签法的使用方法：
在浮动元素末尾添加一个空的 div
设置该 div 的样式为 clear: both;

额外标签法的优缺点：
优点：通俗易懂 / 书写方便 / W3C 推荐
缺点：添加许多无意义的标签，结构化较差

清除浮动之父元素 overflow

overflow 清除浮动的使用方法：
给父元素添加 overflow 属性，将其属性设置为 hidden 、 auto 、 scroll 都可以；
通常设置 overflow: hidden ；

overflow 清除浮动的缺点：
优点：代码简单 / 好记忆
缺点：无法显示溢出部分，面试会被追问

清除浮动之 after 伪元素

::after 伪元素清除浮动的代码：

.clearfix::after {
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}

伪类和伪元素：

1. 伪类表示标签的某个状态，没有内容，用 : 表示
2. 伪元素在标签前 / 后增加内容，有内容但是不需要独立的标签，用 :: 表示
3. ::after 标签后添加内容
4. ::before 标签前添加内容

清除浮动之双伪元素

双伪元素清除浮动的代码是：

.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}

清除浮动总结

清除浮动的原因：
子盒子浮动 → 脱离原有位置 → 父级没有高度 → 影响后续标准流盒子
方法：