CSS第三天（3）-CSDN博客

本文链接：https://blog.csdn.net/2302_80241604/article/details/136587110

盒子阴影（box-shadow）

语法：

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

注意：

1. 默认的是外阴影 (outset), 但是不可以写这个单词 , 否则造成阴影无效

2. 盒子阴影不占用空间，不会影响其他盒子排列。

文字阴影（text-shadow）

语法：

text-shadow: h-shadow v-shadow blur color;

浮动

CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

 普通流（标准流）（就是前面学那）

 浮动

 定位

浮动可以改变元素标签默认的排列方式.

浮动最典型的应用：可以让多个块级元素一行内排列显示。

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

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

特性：

1. 脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标）

2. 浮动的盒子不再保留原先的位置

3. 浮动元素会具有行内块元素特性。

 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

 浮动的盒子中间是没有缝隙的，是紧挨着一起的

 行内元素同理

浮动布局练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;/*去除li的小圆点*/
        }
        .box {
            width: 1226px;
            height: 285px;
background-color: pink;
margin: 0 auto;
        }
        .box li{
            width: 296px;
            height: 285px;
            background-color: purple;
            float: left;
            margin-right: 14px;

        }
        .box .last{
            margin-right: 0;
        }

    </style>
</head>
<body>
   <ul class="box">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="last">4</li>
   </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.box {
    height: 615px;
    width: 1226px;
    background-color: pink;
    margin: 0 auto;
}
.left {
    float: left;
    height: 615px;
    width: 234px;
    background-color: purple;
}
.right {
    float: left;
    height: 615px;
    width: 992px;
    background-color: skyblue;
}
.right>div{
    height: 300px;
    width: 234px;
    float: left;
    margin-left: 14px;
    margin-bottom: 14px;
    background-color: blue;
}



    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
    
</body>
</html>

清除浮动

清除浮动本质

 清除浮动的本质是清除浮动元素造成的影响

 如果父盒子本身有高度，则不需要清除浮动

 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

2.可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

3. :after 方式是额外标签法的升级版。也是给父元素添加

.clearfix:after { 
 content: ""; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
} 
.clearfix { /* IE6、7 专有 */ 
 *zoom: 1;
}

4.双伪元素清除浮动也是给给父元素添加

.clearfix:before,.clearfix:after {
 content:"";
 display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
 *zoom:1;
}