CSS特性、盒子模型、结构伪类选择器、浮动等

AWH
762 阅读6分钟

CSS三大特性

1. 层叠性

2.继承性

3.优先级

3.3 优先级的介绍

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

优先级公式：

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

注：哪个选择器能够更精准的选到标签，它的优先级会更高

!important写在属性值的后面，分号的前面；不能提升继承的优先级，只要是继承优先级最低。

测试一波：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box{
        color: orange;
    }
    .box{
        color: blue;
    }
    body{
        color: red;
    }
    div{
        color:green !important;
    }
    /* !important不要给继承的添加 */
    </style>
</head>
<body>
     <div class="box" id="box" style="color: pink;">测试优先级</div>
</body>
</html>

结果：绿色

3. 2 权重叠加计算

image-20221114205050456.png 举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* （行内，id，类，标签） */
        /* （0,1,1,0） */
        div #one{
            color:orange;
        }
        /* （0,0,2,0） */
        .father .son{
            color:skyblue;
        }
        /* （0,0,1,1） */
        .father p{
            color: purple;
        }
        /* （0,0,0,2） */
        div p{
            color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="son" id="one">我是一个标签</p>
    </div>
</body>
</html>

结果：orange

3.3 权重叠加计算题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p{
            color: red;
        }
        .father {
            color: blue;
        }
    </style>
    <!-- 同级就是覆盖 -->
</head>
<body>
    <div class="father">
        <p class="son">
            <span>文字</span>
        </p>
    </div>
</body>
</html>

注：同级就用覆盖

3.4 谷歌-排错

例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fahter .son .sun{
            color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <div class="sun">孙子</div>
        </div>
    </div>
</body>
</html>

image-20221115103545489.png 写了CSS ,结果浏览器没有识别出来，是没写或选择器写错了

检查选择器，发现fahter错了，改正后： image-20221115103803107.png

例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        }
        .faher .son .sun{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <div class="sun">孙子</div>
        </div>
    </div>
</body>
</html>

image-20221115104801319.png 上一行出错，下一行会受影响

检查选择器后发现选择器没问题，检查它的下一行，发现多了一个“{”

例三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father .son .sun{
            color: blueviolet
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <div class="sun">孙子</div>
        </div>
    </div>
</body>
</html>

image-20221115105510690.png 黄色叹号代表语法有错误，写错了

检查{}里css的属性，选择器就不用管了，检查后发现少一个；

*PxCook

psd格式用设计模式

png、jpg用开发模式

盒子模型

1.盒子模型的介绍

image-20221115174701224.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color:pink ;
            /* 边框线==纸箱子 */
            border: 1px solid #000;
            /* 内边距==填充泡沫：出现在内容和盒子边缘之间 */
            padding:20px;
            /* 外边距：出现在两个盒子之间，出现在盒子的外面 */
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>内容电脑</div>
    <div>内容电脑</div>
</body>
</html>

image-20221115180717767.png 浏览器效果： image-20221115181101519.png

2.内容区域的宽度和高度

image-20221115181635460.png

3.边框（border）

3.1边框（border）-连写模式

属性名：border

属性值：单个取值的连写，取值之间以空格隔开

  • border:10px soid red; （不分先后顺序）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 5px dotted black;
        }
    </style>
</head>
<body>
    <div>内容</div>
</body>
</html>

image-20221115214856294.png 注：solid 实线 dashed 虚线 dotted 点线

3.2边框（border）-单方向设置

  • 场景：只给盒子的某个方向单独设置方向
  • 属性名：border-方位名词
  • 属性值：连写的取值
 border-left: 5px dotted black;

3.3边框（border）-单个属性

3.4盒子实际大小初级计算公式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: green;
            border: 10px solid #000;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

注：盒子尺寸=width/height+边框线

image-20221116161821742.png

3.5（案例）新浪微博案例

布局顺序：

1、从外往内，从下往上

每一个盒子的样式： 1.宽高

2.辅助的背景颜色

3.盒子模型的部分：border、padding、margind

4.其他样式：color、font-、text-、······

4.内边框（padding）

4.1内边距-padding取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 添加了4个方向的内边距 */
            padding: 50px;
            /* padding属性可以当作复合属性使用，表示单独设置某个方向的内边距 */
            /* padding最多取4个值 */
            /* 四值：上   右   下   左 */
            padding: 10px 20px 40px 80px ;
            /* 三值： 上   左右   下*/
            padding: 10px 40px 80px;
            /* 二值：上下   左右 */
            padding: 10px 80px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

image-20221116211352877.png 四值：上 右 下 左

三值： 上 左右 下

二值：上下 左右

padding多值写法，永远都是从上开始顺时针转一圈，如果数不够，看对面

4.2 内边距（padding）- 单方向设置

场景：只给盒子的某个方向单独设置内边距

属性名：padding - 方位名词

属性值：数字 + px

4.3盒子实际大小计算公式：

盒子宽度 = 左右边框 + 左右padding + 内容宽度

盒子高度 = 上下边框 + 上下padding + 内容宽度

4.4（案例） 新浪导航的优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0  ;
        }
        .box a{
            /* width: 80px; */
            padding: 0 16px;
            height: 40px;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .box a:hover {
            background-color: #edeef0;
            color: #ff8400;
​
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">导航</a>
        <a href="#">新浪导航新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
   
</body>
</html>

image-20221116213352247.png

4.5 css3盒模型（自动內减）

image-20221116213825664.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 10px solid #000;
            padding: 20px;
            /* 变成CSS3的盒子模型，好处：加了border和padding不需要手动减法 */
            box-sizing: border-box;
​
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

5.外边距（margin）

5.1-5.3 略

与内边框的用法一毛一样

5.4清除默认内外边距

image-20221117214644782.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <p>ppp</p>
    <h1>h1</h1>
    <ul>
        <li>lili</li>
    </ul>
</body>
</html>

版心：网页的有效内容

版心居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 1000px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>版心</div>
</body>
</html>

5.5（案例）新闻列表

去掉列表的符号：

list-style：none；

设计思路：

从外到内，先宽高背景色，放内容，调节内容位置；控制文字细节 image-20221118091051982.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            /* 所有标签都有可能添加内边距或border，都內减模式 */
            box-sizing: border-box;
        }
        .news{
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 50px auto;
            padding: 42px 30px 0;
        }
        .news h2{
            border-bottom: 1px solid #ccc;
            font-size: 30px;
            line-height: 1;
            padding-bottom: 9px;
        }
        ul{
            list-style: none;
        }
        .news li{
            height: 50px;
            border-bottom: 1px dashed #000;
            padding-left: 28px;
            line-height: 50px;
        }
        .news a{
            text-decoration: none;
            color: #666;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="news">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">体验javascript的魅力</a></li>
            <li><a href="#">jpuery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jpuery中的链式编程是什么</a></li>
            
​
        </ul>
    </div>
</body>
</html>

5.6外边距正常情况

场景：水平布局的盒子，左右的margin正常，互不影响

结果：最终两者距离为左右margin的和

5.7外边距折叠现象

（1）合并现象

image-20221118093203171.png

（2）塌陷现象

image-20221118094742133.png

注：方法2最好

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* padding-top: 50px; */
            /* 如果设计稿没有border，不能使用这个解决办法 */
            /* border: 1px solid #000; */
            /* overflow: hidden; */
            display: inline-block;
​
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-top: 50px;
            /* display: inline-block; */
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

5.8行内元素的内外边距问题

如果想要通过margin或padding改变行内标签的垂直位置，无法生效。

行内标签的margin-top和bottom 不生效

行内标签的padding-top或bottom 不生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            /* margin: 100px;水平生效，垂直不生效 */
            /* padding: 100px; 水平生效，垂直不生效*/
            line-height: 100px; 
        }
    </style>
</head>
<body>
    <span>span</span>
    <span>span</span>
</body>
</html>

结构伪类选择器

image-20221118102542176.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中第一个 */
        /* li:first-child{
            background-color: green;
        }
        li:last-child{
            background-color: green;
        } */
        /* li:nth-child(1){
            background-color: green;
        } */
        li:nth-last-child(1){
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

image-20221118103427693.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* li:nth-child(2n){
            background-color: green;
        } */
        /* li:nth-child(2n+1){
            background-color: green;
        } */
        /* li:nth-child(-n+3){
            background-color: green;
        } */
        li:nth-child(4n){
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .father::before{
            /* 内容 */
            /* content属性必须添加，否则伪元素不生效 */
            content:'老鼠';
            color:green;
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 默认是行内元素，宽高不生效 */
            display: block;
        }
        .father::after{
            content:'大米'
        }
    </style>
</head>
<body>
    <!--伪元素 通过css创建标签，装饰性的不重要的小图 -->
    <!-- 找父级，在这个父级里面创建子级标签 -->
    <div class="father">爱</div>
</body>
</html>

通过css创建标签，放装饰性的不重要的小图

content属性必须添加，否则伪元素不生效

默认是行内元素，宽高不生效

标准流

image-20221118110549181.png

浮动

1.浮动的作用

体验行内块问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        display: inline-block;
        width: 100px;
        height: 100px;
    }
    .one{
        background-color: pink;
    }
    .two{
        background-color: skyblue;
    }
</style>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

浏览器解析行内块或者行内标签的时候，如果标签换行书写会产生一个空格书写

浮动的作用

  • 图文环绕
  • 网页布局：块在一行排列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* img{
            float: left;
        }
        */
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: pink;
            float: left;
        }
        .two{
            background-color: skyblue;
            /* float: right; */
            float: left;
    
        }
    </style> 
</head>
<body>
    <!-- 1.图文环绕 -->
    <!-- /* <img src="./1.jpg" alt="">
    扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到法律你拉到你发扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发拉俄法撒旦撒低级扩大解释法律你拉到你发 */ -->
    <!--2.网页布局：块在一行排列-->
    <div class="one">one</div>
    <div class="two">two</div>
</html>

2.浮动的代码

image-20221118143144001.png

3.浮动的特点

image-20221118204909998.png

4.（案例）网页布局案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
​
        }
        .top{
            height: 40px;
            background-color: #333;
        }
        .header{
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;
            margin: 0 auto;
        }
        .content{
            width: 1226px;
            height: 460px;
            background-color: green;
            margin: 0 auto;
        }
        .left{
            width: 234px;
            height: 460px;
            background-color: #ffa500;
            float: left;
        }
        .right{
            width: 992px;
            height: 460px;
            background-color: #87ceed;
            float: right;
        }
    </style>
</head>
<body>
    <!-- 通栏的盒子：宽度和浏览器一样大 -->
    <div class="top"></div>
    <div class="header">头部</div>
    <div class="content">
        <div class="left">left</div>
        <div class="right">right</div>
   </div>
</body>
</html>

image-20221118212401015.png css书写顺序：浏览器执行顺序更高

1.浮动/display

2.盒子模型：margin border padding

3.文字的样式

(案例)小米模块案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 0 auto;
​
            width: 1226px;
            height: 614px;
            /* background-color: pink; */
        }
        .left{
            float: left;
            width: 234px;
            height: 614px;
            background-color: #800080;
        }
        .right{
            float: right;
​
            width: 978px;
            height: 614px;
            /* background-color: green; */
        }
        ul{
            /* 去掉列表的符号 */
            list-style: none;
        }
        .right li{
            float: left;
            margin-right: 14px;
            margin-bottom: 14px;
​
            width: 234px;
            height: 300px;
            background-color: #87ceeb;
        }
        /* 如果父级的宽度不够，子级会自动换行 */
        /* 清除第4个和第8个li右侧间距 */
        .right li:nth-child(4n){
            margin-right: 0px;
        }
​
    </style>
</head>
​
<body>
​
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    
</body>
</html>

image-20221119135610125.png

(案例)导航案例

image-20221119142018411.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            margin: 50px auto;
​
            width: 640px;
            height: 50px;
            background-color: #ffc0cb;
​
        }
        ul{
            list-style: none;
        }
        .nav li{
            float: left;
        }
        .nav li a{
            /* 1.浮动/display */
​
            display: inline-block;
​
            /* 2.盒子模型 */
            width: 80px;
            height: 50px;
            /* background-color: green; */
​
            /* 3.文字样式 */
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            color: #fff;
        }
        .nav li a:hover{
            background-color: green;
        }
        
    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li><a href="#">新闻1</a></li>
        <li><a href="#">新闻2</a></li>
        <li><a href="#">新闻3</a></li>
        <li><a href="#">新闻4</a></li>
        <li><a href="#">新闻5</a></li>
        <li><a href="#">新闻6</a></li>
        <li><a href="#">新闻7</a></li>
        <li><a href="#">新闻8</a></li>
    </ul>
</div>    
​
</body>
</html>
​

清除浮动

1.受浮动影响的情况

父子级标签，子级浮动父级没有高度，后面的标准流盒子会受影响，显示到上面的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
    .top{
        margin: 0 auto;
​
        width: 1000px;
        /* height: 300px; */
        background-color: pink;
    }
    .bottom{
        height: 100px;
        background-color: green;
    }
    .left{
        float: left;
        width: 200px;
        height: 300px;
        background-color: #ccc;
    }
    .right{
        float: right;
        width: 790px;
        height: 300px;
        background-color: skyblue;
    }
 </style>
   
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

image-20221119145007997.png

2.清除浮动的方法

（1）直接设置高度

优点：简单粗暴，方便

缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

（2）额外标签法

在父元素内容的最后添加一个块级元素→给设置的块级元素设置clear：both

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
    .top{
        margin: 0 auto;
​
        width: 1000px;
        /* height: 300px; */
        background-color: pink;
    }
    .bottom{
        height: 100px;
        background-color: green;
    }
    .left{
        float: left;
        width: 200px;
        height: 300px;
        background-color: #ccc;
    }
    .right{
        float: right;
        width: 790px;
        height: 300px;
        background-color: skyblue;
    }
    .clearfix{
        clear: both;
    }
 </style>
   
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

image-20221119150949544.png

（3）单伪元素清除法

和额外标签法原理一样

image-20221119153325618.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
    .top{
        margin: 0 auto;
​
        width: 1000px;
        /* height: 300px; */
        background-color: pink;
    }
    .bottom{
        height: 100px;
        background-color: green;
    }
    .left{
        float: left;
        width: 200px;
        height: 300px;
        background-color: #ccc;
    }
    .right{
        float: right;
        width: 790px;
        height: 300px;
        background-color: skyblue;
    }
    .clearfix::after{
        content: '';
        /* 伪标签是行内的，要求块标签 */
        display: block;
        clear: both;
        /* 为了兼容性 */
        height: 0;
        visibility: hidden;
    }
    
 </style>
   
</head>
<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 通过css创建一个标签 -->
    </div>
    <div class="bottom"></div>
</body>
</html>

image-20221119152956887.png

（4）双伪元素清除法

image-20221119155053710.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
    .top{
        margin: 0 auto;
​
        width: 1000px;
        /* height: 300px; */
        background-color: pink;
    }
    .bottom{
        height: 100px;
        background-color: green;
    }
    .left{
        float: left;
        width: 200px;
        height: 300px;
        background-color: #ccc;
    }
    .right{
        float: right;
        width: 790px;
        height: 300px;
        background-color: skyblue;
    }
    /* .clearfix::before 作用：解决外边距塌陷问题 */
    /* 外边距塌陷:父子级标签，都是块级，子级加margin会影响父级的位置 */
    .clearfix::before,
    .clearfix::after{
        content: '';
        display: table;
    }
    /* 真正清除浮动的标签 */
    .clearfix::after{
        clear: both;
    }
    /* 清除浮动 */
 </style>
   
</head>
<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

（5）overflow : hidden 法

直接给父元素设置 overflow : hidden

优点：方便

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
    .top{
        margin: 0 auto;
​
        width: 1000px;
        /* height: 300px; */
        background-color: pink;
​
        overflow: hidden;
    }
    .bottom{
        height: 100px;
        background-color: green;
    }
    .left{
        float: left;
        width: 200px;
        height: 300px;
        background-color: #ccc;
    }
    .right{
        float: right;
        width: 790px;
        height: 300px;
        background-color: skyblue;
    }
 </style>
   
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
avatar
文章
阅读
粉丝