css第四天
1. 开发步骤
1. 分析页面结构（如果内容太多，可以后续补充）
2. 编写公共样式
3. 从上向下从第一个大盒子开始
1. 最外侧盒子需要有注释，辅助 CSS 分段和阅读
4. 从上向下，从左向右依次编写小盒子样式，直到一个大盒子完成
5. 如果小盒子比较复杂可以： 1. 开始前增加背景颜色辅助调试 2. 结束后删除背景颜色
2. 分隔线的实现技巧 使用 padding 可以让分割线比文本长
3. 取消无序列表的小圆点： list-style: none;
4. 列选择快捷键 ctrl + alt + shift + ↑ / ↓
5. 布局时务必要注意 padding 和 border 会对影响盒子大小
边框和阴影
问题 1：圆角边框的效果是什么？在网页布局中使用的多吗？
在边框的四周有一个圆形转角，让盒子视觉效果更好 在网页布局中使用的多
问题 2：圆角边框的属性是什么？
border-radius
问题 1：怎么做圆形？
border-radius: 50%; 正方形盒子是圆形 / 长方形盒子是椭圆
问题 2：怎么做圆角矩形？
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;
问题 1：：盒子阴影属性都有哪些（别硬记）？
前两个数是方向，后两个数是半径，然后是颜色，最后一个几乎用不到。
问题2：盒子阴影会影响盒子大小吗？
不会
问题 3： div 能使用 :hover 吗？为什么？
可以，伪类是状态 / div 同样存在鼠标经过状态
文字阴影
问题 1：文字阴影属性都有哪些（别硬记）？
前两个数是方向，后两个数是半径，然后是颜色，最后一个几乎用不到。
浮动基础
传统网页布局的三种方式：标准流、浮动、定位。
标准流是如何布局的：标签按照规定好的默认方式排列（块级元素、行内元素），标准流是最基础的布局方式。
浮动可以让多个元素块一行内排列
网页布局的准则是什么？
1. 多个块级元素纵向排列 —— 标准流 2. 多个块级元素横向排列 —— 浮动
浮动的概念是什么？ float 属性用于创建浮动框，直到左边缘或右边缘触及包含块或另一个浮动框的边 缘。
浮动的方向有几个？语法怎么写？
左浮动： float: left; 右浮动： float: right
元素浮动后具有哪三个特性？
1. 脱离标准流（脱标） 2. 一行显示并且顶部对齐 3. 具有行内块元素的特性
盒子脱标后还会保留原有位置吗？表现是什么？
不会 后续的盒子会占据被浮动盒子原有的位置
浮动特性-浮动元素一行显示
问题 1：几个浮动元素之间会有缝隙吗？会按照什么方式对齐？
不会有缝隙（与 inline-block 不同） 会按照顶部对齐
问题 2：如果父级盒子宽度装不下浮动的盒子，会发生什么情况？
上一排空间不够的盒子会被挤下来
浮动特性-浮动元素具有行内块特性
问题 1：行内元素能使用浮动吗？浮动之后能指定宽高吗？
行内元素同样可以使用浮动 行内元素浮动之后可以指定宽高
问题 2：行内元素有了浮动属性后，还需要使用 display: inline-block 吗？
行内元素浮动之后可以指定宽高，不再需要转换显示模式
问题 3：如果没有给块级盒子设置宽度，默认宽度是什么？浮动之后的宽度是什么？
默认宽度是父级盒子的宽度 浮动之后宽度由内容来决定
浮动元素经常搭配标准流的父元素
问题 1：在网页布局时，标准流的父盒子负责什么？
标准流的父盒子排列上下位置
问题 2：在网页布局时，浮动的子盒子负责什么？
浮动的子盒子负责在父盒子中横向排列
浮动小结「扩展」
1. 应用场景：与标准流的父盒子搭配使用
1. 标准流父盒子负责上下
2. 浮动子盒子负责左右
3. 内容套在子盒子内部，子盒子最好不要既负责布局，又要负责内容
2. 浮动的元素会脱标 —— 下方的盒子会占据原有的位置
1. 父盒子中的所有亲儿子盒子一起浮动
3. 浮动相比较 inline-block 的优势
1. 没有缝隙
2. 顶端对齐（ inline-block 会按照文字对齐方式对齐）
4. 初学浮动布局的痛点
1. 务必要控制好每个盒子的宽度，宽度不够会掉下去
2. 用调试工具检查盒子位置最靠谱，千万不要盯着代码看
3. * {margin: 0; padding: 0} 不要忘
