CSS浮动-黑马程序员-web前端零基础

羊羊的代码笔记本

已于 2022-12-25 15:47:25 修改

阅读量138

点赞数

文章标签：前端 css html

于 2022-12-25 15:46:36 首次发布

本文链接：https://blog.csdn.net/weixin_73579310/article/details/128429440

版权

1.结构伪类选择器

用于查找某父级选择器中的子元素

E:nth-child(n）{}

匹配父元素中第n个元素，并且是E元素

 li:nth-child(7)
        {
            background-color: pink;
        }

公式：

偶数	2n even
奇数	2n+1 2n-1 odd
找到前5个	-n+5
找到从第5个往后	n+5

li:nth-child(2n)
        {
            background-color: pink;
        }

2.伪元素（假标签）

能够使用伪元素在网页中创建内容

伪元素添加的是一个行内元素

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

.father::before
    {
       content: "老鼠";
    }

3.浮动的特点

浮动元素会脱离标准流，在标准流中不占位置（相当于从地面飘到空中）
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果

一行可以显示多个
可以设置宽高

浮动后的元素不能通过margin：0 auto和text-align：center居中

4.CSS属性顺序

浏览器执行效率更高

浮动/display
盒子模型：margin border padding 宽度高度背景色
文字样式

5.清除浮动

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

5.1 清楚浮动的方法

第1，2，3，4可以不用看，记住第5个就可以啦

直接设置父元素高度
额外标签法

在父元素内容的最后添加一个块级元素

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

        .clearfix
        {
            clear: both;
        }

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

3.单伪元素清除法（工作中较常用）

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

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

4.双伪元素清除法

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


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

5.overflow：hidden

直接给父元素设置overflow：hidden

这里是在top的css中加