css第六天

浮动！！！

一、css新增的三种样式
1.圆角边框
在边框的四周有一个圆形转角，让盒子视觉效果更好。
1.1、圆角边框的属性：border-radius。

• 怎么做圆形？border-radius: 50% 正方形为圆形，矩形为椭圆。
• 怎么做圆角矩形？border-radius: 高度的一半。
• 怎么设置不同的圆角？border-radius: 10px 20px 30px 40px; 左上 → 右上 → 右下 → 左下（顺时针）

2、盒子阴影（box-shadow）
2.1、盒子阴影的属性（不需要硬记）：

• h-shadow 必须，x 偏移量，允许负值
• v-shadow 必须，y 偏移量，允许负值
• blur 可选，阴影模糊半径
• spread 可选，阴影扩散半径
• color 可选，阴影颜色
• inset 可选，内部阴影，直接写单词即可

2.2、盒子阴影会影响盒子大小吗？不会
2.3、div 能使用 :hover 吗？为什么？可以，伪类是状态 / div 同样存在鼠标经过状态

3、文字阴影（text-shadow）
3.1、文字阴影的属性（不需要硬记）：

• h-shadow 必须，x 偏移量，允许负值
• v-shadow 必须，y 偏移量，允许负值
• blur 可选，阴影模糊半径
• color 可选，阴影颜色

二、浮动基础
1、传统的三种布局方式：标准流（文档流）、浮动、定位。
2、文档流的布局方式：

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

3、为什么需要浮动?
3.1、浮动能解决什么问题？

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

4、网页布局的准则：

• 多个块级元素纵向排列 —— 标准流
• 多个块级元素横向排列 —— 浮动

5、什么是浮动？
5.1、浮动的概念是什么？

float 属性用于创建浮动框，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
5.2、浮动的方向和写法

• 右浮动：float：right；
• 左浮动：float：left；

6、浮动的特性-脱标
6.1、元素浮动之后的特性：

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

6.2、盒子脱标后还会保留原有位置吗？表现是什么？

• 不会
• 后续的盒子会占据被浮动盒子原有的位置

7、浮动特性-浮动元素一行显示
7.1、几个浮动元素之间会有缝隙吗？会按照什么方式对齐？

• 不会有缝隙（与 inline-block 不同）
• 会按照顶部对齐

7.2、如果父级盒子宽度装不下浮动的盒子，会发生什么情况？

• 上一排空间不够的盒子会被挤下来

8、浮动特性-浮动元素具有行内块特性
8.1、行内元素能使用浮动吗？浮动之后能指定宽高吗？

• 行内元素同样可以使用浮动
• 行内元素浮动之后可以指定宽高

8.2、行内元素有了浮动属性后，还需要使用 display: inline-block 吗？

• 行内元素浮动之后可以指定宽高，不再需要转换显示模式

8.3、如果没有给块级盒子设置宽度，默认宽度是什么？浮动之后的宽度是什么？

• 默认宽度是父级盒子的宽度
• 浮动之后宽度由内容来决定

9、浮动元素经常搭配标准流的父元素
9.1、在网页布局时，标准流的父盒子负责什么？

• 标准流的父盒子排列上下位置

9.2、在网页布局时，浮动的子盒子负责什么？

• 浮动的子盒子负责在父盒子中横向排列

10、浮动总结
10.1、 应用场景：与标准流的父盒子搭配使用

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

10.2、 浮动的元素会脱标 —— 下方的盒子会占据原有的位置

• 父盒子中的所有亲儿子盒子一起浮动

10.3、 浮动相比较 inline-block 的优势

• 没有缝隙
• 顶端对齐（ inline-block 会按照文字对齐方式对齐）

10.4、初学浮动布局的痛点

• 务必要控制好每个盒子的宽度，宽度不够会掉下去
• 用调试工具检查盒子位置最靠谱，千万不要盯着代码看
• {margin: 0; padding: 0} 不要忘

三、清除浮动
1、为什么清除浮动？
1.1、所有父盒子都能准确指定高度吗？

• 不能

1.2、有哪些场景不方便指定盒子高度？

• 京东商城的产品特别多
• 新闻内容

1.3、如果子盒子全部浮动，父盒子的高度能被撑开吗？为什么？

• 不能
• 盒子浮动后，会脱标，一旦脱标，原有位置不再保留

1.4、为什么要清除浮动（面试题）！！！

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

2、清除浮动本质以及额外标签法
2.1、清除浮动的本质是什么？

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

2.2、清除浮动的属性是什么？

• clear: both;

2.3、额外标签法如何使用？

• 在浮动元素末尾添加一个空的 div
• 设置该 div 的样式为 clear: both;

2.4、额外标签法有什么优缺点？

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

3、清除浮动之父元素 overflow
3.1、如何用 overflow 清除浮动？

• 给父元素添加 overflow 属性，将其属性设置为 hidden 、 auto 、 scroll 都可以；
• 通常设置 overflow: hidden ；

3.2、用 overflow 清除浮动有什么优缺点？

• 优点：代码简单 / 好记忆
• 缺点：无法显示溢出部分，面试会被追问

4、清除浮动之 after 伪元素
4.1、 ::after 伪元素清除浮动的代码是什么？

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

4.2、「清除浮动之 after 伪元素」伪类和伪元素

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

5、清除浮动之双伪元素
5.1、双伪元素清除浮动的代码是什么？

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

6、清除浮动总结
6.1、为什么清除浮动？

• 子盒子浮动 → 脱离原有位置 → 父级没有高度 → 影响后续标准流盒子

6.2、清除浮动的方法

• 额外标签法（隔墙法） 通俗易懂，书写简单添加许多无意义的标签，结构化较差
• 父元素 overflow: hidden; 书写简单无法显示溢出部分，面试会被追问
• 父级 after 伪元素 结构语义正确 IE 6~7 不支持伪元素
• 父级双伪元素 结构语义正确 IE 6~7 不支持伪元素