CSS—浮动篇

软工211-429-张婍妍

已于 2023-03-19 15:12:18 修改

阅读量105

点赞数

分类专栏： CSS 文章标签： css 前端 html Powered by 金山文档

于 2023-03-11 23:36:41 首次发布

本文链接：https://blog.csdn.net/weixin_62443949/article/details/129459064

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

结构伪类

基本用法

说明：结构伪类选择器在HTML中定位元素

作用：根据元素在HTML中的结构关系查找元素

优势：减少对于HTML中类的依赖，有利于保持代码整洁

场景：常用于查找某父级选择器中的子元素

选择器	说明
E:first-child {}	匹配父元素中第一个子元素，并且是E元素最后一个
E:last-child{}	匹配父元素中最后一个子元素，并且是E元素最后一个
E:nth-child(n){}	匹配父元素中第n个子元素，并且是E元素最后一个
E:nth-last-child(n){}	匹配父元素中倒数第n个子元素，并且是E元素最后一个

代码实现（部分）

<style>
        /* 找到第一个li并将其背景色改成黑色 */
       li:first-child{
        background-color: #000;
       }

        /* 找到第后一个li并将其背景色改成黑色 */
       li:last-child{
       background-color: #000;
       }

        /* 找到第n个li（括号里填选择目标）并将其背景色改成黑色 */
       li:nth-child(3) {
        background-color: #000;
       }
         /* 找到倒数第n个li（括号里填选择目标）并将其背景色改成黑色 */  
       li:nth-last-child(2){
        background-color: #000;
       }
    </style>
<body>
    <!-- ul>li{这是第$个li}*8 -->
    <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>

公式

n的注意点：1. n可以为0,1,2,3,4,5,6......

2.通过n可以组成常见公式（如下）

功能	公式
偶数	2n、even
基数	2n+1、2n-1、odd
找到前5个	-n+5
找到从第5个往后	n+5

伪元素

定义：通过CSS创建标签，装饰不重要的小图

区别：

1、元素：HTML设置的标签

2、伪元素：有CSS模拟出的标签效果

种类：

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意点：

1、必须设置content属性才能生效

2、伪元素默认是行内元素

代码实现：

<style>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .father::before{
            /* 内容 */
            content: "老鼠";         /* 单引号双引号都可以，但必须是英文状态的 */
            color: rgb(164, 164, 246);          /* 因为是标签，可以更改颜色 */
            background-color: blanchedalmond;
            width: 100px;
            height: 100px;
            /* 设置完宽高后会发现，页面没有变化。因为默认为行内元素。 */
            display: block;
            /* 修改为块级元素后，页面发生变化 */
        }
        .father::after{
            content:"大米";
        }
    </style>
<body>
    <!-- 找父级，在这个父级里面创建子级标签 -->
    <div class="father">爱</div>
    <!-- 老鼠爱大米 -->
</body>

默认值为行内元素

更改为行内块元素，显示宽高

标准流

定义及规则

定义：标准流，又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

块级元素：从上往下，垂直布局，独占一行

行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

体验行内块问题

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

    <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> /* 注意此时标签换行书写 分别位于16、17行 */
</body>

标签换行书写

一行

浮动

浮动的作用

图文环绕

img{float:left;}

页面布局

.one{float:left;}

.two{float:right;} //一个左一个右

.one{float:left;}

.two{float:left:} //并排（无间距）

浮动的代码

    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: pink;
            float: left;
        }
        .two{
            background-color: skyblue;
            float: left;            /*两个紧挨在一起*/
        }
    </style>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>

浮动的特点

浮动元素会脱离标准流（脱标），在标准流中不占用位置

浮动元素比标准流高半个级别，可以覆盖标准流中的元素（字不盖）

浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

浮动的标签是顶对齐——不想顶对齐就加外边距margin

浮动元素有特殊的显示效果

浮动：在一行排列，宽高生效——浮动后的标签具备行内块的特点（即一行可以显示多个，可以设置宽高）

注：浮动的元素不能通过text-align:center / margin:0 auto

代码

<style>
    .one{
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;
        margin-top: 50px;     /* 让one和two不要顶对齐 */
    }
    .two{
        width: 200px;
        height: 200px;
        background-color: skyblue;
        float: left;
        margin: 0 auto;        /* 因为有浮动，不能生效，盒子无法水平居中 */
    }
    .three{
        width: 300px;
        height: 300px;
        background-color: blanchedalmond;
    }
</style>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>

显示效果

浮动的案例

（1）小米布局

   <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: #87ceeb;
            float: left;
        }
    </style>
<body>
    <!-- 通栏的盒子，宽度和浏览器一样大 -->
<div class="top"></div>
<div class="header">头部</div>
<div class="content">
    <div class="left">left</div> 
    <div class="right">right</div>
</div>
</body>

小米布局实现图

（2）小米产品—左右布局

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 0 auto;
            width: 1226px;
            height: 614px;
            /* background-color:rgb(216, 216, 239); */
        }
        .left{
            float: left;
            width: 234px;
            height: 614px;
            background-color: #800080;
      
        }
        .right{
            float: right;     /* 利用右浮动来实现中间的空隙 */
            width: 978px;
            height: 614px;
            /* background-color: antiquewhite; */
        }
        ul{
            list-style: none;
        }
        .right li{
            float: left;
            margin-right: 14px;
            margin-bottom: 14px;
            width: 234px;
            height: 300px;
            background-color: #87ceeb;
        }
        /* 第四个li和第八个li右侧间距清除 */
        .right li:nth-child(4n){
            margin-right: 0;
        }
    </style>
<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>

左右布局实现

（3）导航

 <style>
    *{
        margin: 0;
        padding: 0;
    }
    .nav{
        margin: 50px auto;
        width: 640px;
        height: 50px;
        background-color: pink;
    }
    ul{
        list-style: none;
    }
    .nav li{
        float: left;
    }
    .nav li a{
        /* 1、浮动  /  display */
        display: inline-block;
        
        /* 2、盒子模型 */
        width: 80px;
        height: 50px;
        /* background-color: rgb(181, 245, 181); */   
        /* 在默认状态不要 悬停时才显示 */
        
        /* 3、文字样式 */
        text-align: center;
        line-height: 50px;        /* 垂直居中和它的高度一样大 */
        color: #000;
        text-decoration: none;
    }
    .nav li a:hover{
        background-color: rgb(181, 245, 181);
    }
    </style>

<body>
    <!-- 导航 -->
    <div class="nav">
    <!-- ul>li>a -->
    <ul>
        <li><a href="#">新闻</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">新闻</a></li>
    </ul>
</div>
</body>

导航实现图

CSS属性顺序

正确的CSS书写顺序可以提高浏览器书写效率

浮动 / display

盒子模型： margin 、border 、padding 、宽度、高度、背景色

文字样式

清除浮动

清除浮动的介绍

含义：清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

原因：子元素浮动后脱标——不占位置

目的：需要父元素有高度，从而不影响其他网页元素的布局

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

<style>
        .top{
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom{
            height: 100px;
            background-color: rgb(184, 237, 184);
        }

        .left{
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right{
            float: right;
            width: 790px;
            height: 300px;
            background-color: bisque;    
        }
    </style>

<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

有宽高

去掉宽高

清除浮动的方法

（1）直接设置父元素高度

（2）额外标签法

操作：给父元素内容的最后添加一个块元素

给添加的块级元素设置clear:both

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

<style>
 .clearfix{
            /* 清除左右两侧浮动的影响 */
            clear: both;
        }
</style>

<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>

（3）单伪元素清除法

操作：用伪元素代替了额外标签体现在CSS中

写法（项目准备时直接复制粘贴到代码里，无需背诵记忆）

基本写法

补充写法

 .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

<body>
    <div class="top clearfix"></div>
</body>

.clearfix::after{
            content: '';
            display: block;
            clear: both;
            /* 补充代码，在网页中看不到伪元素 */
            height: 0;
            visibility: hidden;
        }

（4）双伪元素清除法

操作

/* .clearfix::before  作用：解决外边距塌陷问题
        外边距塌陷：父子标签，都是块级，子级加margin会影响父级的位置 */
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
        }
        /* 真正清除浮动的标签 */
        .clearfix::after{
            clear: both;
        }

优点：项目中使用，直接给标签加类即可清除浮动

（5）给父元素设置overflow：hidden

操作：直接给父元素CSS中设置overflow：hidden（也可以解决外边距塌陷）

优点：方便

.top{
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
            overflow: hidden;        /*给父元素设置overflow：hidden */    
        }