CSS —— 阴影、浮动
目录
一、阴影
1. 盒子阴影
1.1 box-shadow：为盒子设置阴影；
1.2 语法格式：
box-shadow : h-shadow v-shadow blur spread color inset;
div {
width: 200px;
height: 200px;
background-color: skyblue;
box-shadow: 10px 10px 10px 10px black;
}1.3 属性值：
① 水平阴影的值越大，阴影越向右，值越小越向左；
② 垂直阴影的值越大，阴影越朝下，值越小越朝上；
③ 模糊程度值越大则越模糊，否则越清晰；
1.4 注意：
① 一般默认的为外阴影；
② 盒子阴影不占用空间，不会影响其他盒子排列；
2. 文字阴影
2.1 text-shadow：设置文本阴影；
2.2 语法格式：
text-shadow : h-shadow v-shadow blur color; p {
font-style: 28px;
color: skyblue;
text-shadow: 10px 10px 15px #000;
}2.3 属性值：
与盒子阴影一样；
二、浮动
1. 概述
1.1 浮动：用float属性创建浮动框，将其移动到一边，直到边缘触及包含块或另一个浮动框的边缘；
1.2 语法格式：
选择器 { float: 属性值;} .box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
}
.bbox {
float: right;
width: 100px;
height: 100px;
background-color: skyblue;
}1.3 属性值：
2. 浮动的特性
2.1 浮动元素会脱离标准流，称为脱标，不再保留原来的位置；
.box {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.bbox {
width: 200px;
height: 200px;
background-color: skyblue;
}<body>
<div class="box"></div>
<div class="bbox"></div>
</body>2.2 浮动元素会在一行内显示并且元素顶部对齐；
.box {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.bbox {
float: left;
width: 200px;
height: 200px;
background-color: skyblue;
}
.obx {
float: left;
width: 100px;
height: 100px;
background-color: red;
}<body>
<div class="box"></div>
<div class="bbox"></div>
<div class="obx"></div>
</body>2.3 浮动元素会具有行内块元素的特性；
span {
float: left;
width: 100px;
height: 100px;
background-color: skyblue;
}注：任何元素都可以浮动，且若行内元素有了浮动，则不需要转换块级或行内块元素就可以直接给宽度和高度。
2.4 浮动的盒子中间没有缝隙紧挨在一起，若块级盒子没有设置宽度，则默认宽度和父级一样宽，但添加浮动后，大小根据内容决定；
3. 浮动布局注意点
3.1 浮动元素常与标准流父级搭配使用；
具体操作为：先用标准流父元素排列上下位置，之后内部子元素再采取浮动排列左右位置；
3.2 一个元素浮动了，同一父级的其余子元素同样也要浮动（一浮全浮）；
3.3 浮动的元素只会影响浮动盒子后面的标准流，不会影响前面的标准流；
4. 清除浮动
4.1 本质：清除浮动元素造成的影响；
4.2 方法：
① 额外标签法（隔墙法）
选择器 {clear: 属性值;}② 父级添加 overflow属性
③ 父级添加 after伪元素
④ 父级添加 双伪元素