20230209学习笔记
CSS的盒子阴影
属性名 box-shadow
属性值结构：
h-shadow 必须值 水平阴影位置
v-shadow 必须值 垂直阴影位置
blur 可选 模糊距离
spread 可选 阴影尺寸
color 可选 阴影颜色
inset 可选 将外部阴影改为内部阴影 默认值
是outset 但是outset不能写在box-
shadow中，否则阴影失效。
注意：盒子阴影不会占用空间， 不会影响其他盒子的排列
CSS的浮动
CSS的传统布局方式
普通流（标准流）
比如说块级盒子自己占一行，行内元素一行
会显示多个，标准流就是最基本的布局方
式。
浮动 (通过设置float属性实现)
作用：可以让多个盒子水平排列成一行，而且中间没有空白间隙(行内元素也可以在一行显示，但是元素之间有空白间隙）
float属性取值：left/right/none
浮动的特性
浮动的元素会脱离标准流（脱标）
浮动的元素一行内显示并且沿元素顶部对齐
浮动的元素会有行内块元素的特点
浮动的盒子会压住后面的标准流盒子，但是不会压住文字（原因是：浮动的技术研发之初就是为了实现文字环绕的）
浮动的盒子只会影响它后面的标准流，不会影响前面的标准流。
浮动的注意点
浮动的盒子和标准流盒子搭配的方法
父级盒子用标准流进行上下排列，子盒子采用浮动来进行横向排列
一个元素浮动了，理论上其余的兄弟元素也都需要浮动
因为浮动的盒子会脱标， 如果兄弟盒子只浮动了一个，那么会影响后面的其他兄弟盒子。
清除浮动的几种方法
1、额外标签法
额外标签法也称为隔墙法，是W3C推荐的做法。
在浮动元素的末尾添加一个空标签，这个空标签要求必须是块级元素。
例
2、给父级添加overflow:hidden属性
3、给父级添加after伪元素
给父级添加双伪元素
定位
|
