折叠与塌陷及结构伪类选择器

会整活的小李
144 阅读5分钟
  • 外边距折叠现象并知道如何解决 盒子塌陷问题
  • 结构伪类选择器在HTML中选择元素
  • 标准流 元素的布局特点
  • 浮动元素 的特点
  • 小米模块布局案例

结构伪类

作用:根据元素在HTML中的结构关系查找元素(根据html结构选择标签)

好处:选择方便,省去了很多类名


    <style>
        /* 选择li里面的第一个孩子  */
        ul li:first-child {
            background-color: pink;
        }
        /* 选择li里面的最后一个孩子 */
        ul li:last-child {
            background-color: blue;
        }
        /* 选择li里面的某个孩子 如果写(5) 就是选择第5个孩子 */
        ul li:nth-child(5) {
            background-color: yellow;
        }
        /*选择倒数第几个孩子  */
        ul li:nth-last-child(3) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <ul>
        <!-- <div>私生子</div> -->
        <li>我是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>我是li里面的第9个孩子</li>
        <li>我是li里面的第10个孩子</li>
    </ul>
</body>

</html>

E:nth-child(n)

注意事项:

E:nth-child(n) 只能写n 不能写其他字母.写n表示选中所有孩子

E:nth-child(n) 不能完全取代 E:first-child E:last-child

    <style>
        /* 如果直接写n  表示选中所有的孩子 */
        /* E:nth-child(n) 只能写n  不能写其他字母*/
        /* n为 0 1 2 ..... */
        /* .box li:nth-child(n) {
            background-color: pink;
        } */
        /* n可以直接写 数字  表示选择第几个孩子 */
        /* .box li:nth-child(6) {
            background-color: blue;
        } */
        /* n为关键字  even(偶数 )  odd(奇数)*/
        .box li:nth-child(even) {
            background-color: blue;
        }

        .box li:nth-child(odd) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>我是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>我是li里面的第9个孩子</li>
        <li>我是li里面的第10个孩子</li>
    </ul>
</body>

</html>

n为公式:

    <style>
        /* 2n 表示选中偶数 */
        .box li:nth-child(2n) {
            /* background-color: pink; */
        }

        /* 2n+1 表示选中奇数数 */
        .box li:nth-child(2n+1) {
            /* background-color: blue; */
        }

        /* 3n 表示3的倍数 */
        .box li:nth-child(3n) {
            /* background-color: orange; */
        }

        /* n+5  表示从第5个开始 一直到最后 包含第5个*/
        .box li:nth-child(n+5) {
            /* background-color: orange; */
        }

        /* -n+5 选中前5个 包含第5个 */
        .box li:nth-child(-n+5) {
            background-color: orange;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>我是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>我是li里面的第9个孩子</li>
        <li>我是li里面的第10个孩子</li>
    </ul>
</body>
</html>

伪元素

伪元素就是由css模拟出来的盒子(双引号为了跟伪类更好的区分!!)

::before 在父元素内容的最前面添加一个元素

::after 在父元素内容的最后面添加一个元素

注意事项

​ 伪元素必须要指定 content属性

​ 伪元素插入的元素属于行内元素 设置宽高无效

​ 伪元素的权重和标签一致 0001

css2伪元素是单冒号

C333伪元素是双冒号

就是伪了区分伪类和伪元素,但是单冒号仍然有效的.

    <!--  伪元素就是由css模拟出来的创建的标签或者盒子-->
    <style>
        /* ::before 在父元素内容的最前面添加一个元素  */
        .box::before {
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: orange;
            content: '我是';
        }

        /* ::after 在父元素内容的最后面添加一个元素 */
        .box::after {
            content: '你呢?';
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: pink;
        }

        /* 
        注意事项 
        伪元素必须要指定 content属性
        伪元素插入的元素属于行内元素 设置宽高无效
        伪元素的权重和标签一致 0001
        */
    </style>
</head>
<body>
    <div class="box">izheng前端无敌小霸王</div>
</body>
</html>

标准流

网页布局： 标准流 + 浮动 + 定位

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

常见标准流排版规则：

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

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

浮动

为什么需要浮动

  • 想要把多个块级元素放在一行显示,打破常规布局.

使用行内块元素布局页面有一定的局限性,中间会有空白间隙.

开发中盒子之间 间隙会有严格的要求哟..

浮动解决

浮动的语法

浮动的作用

早期作用: 文字环绕

现在作用: 网页布局

float: left;
float: right;

浮动的特点

1.浮动元素会脱标，在标准流中不占位置

2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素

3.浮动找浮动(同方向浮动)，下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动元素会受到上面元素边界的影响

5.浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高

浮动布局注意事项:

1.浮动一般情况下和标准流的父盒子一起搭配使用.

​ ♥先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2 浮动的时候,当父元素装不下浮动的子元素时,子元素会如何显示?

​ ♥浮动时,当父亲装不下浮动的子元素,此时此子元素会换行显示

3.一个元素浮动了，理论上其余的兄弟元素也要浮动,以防止引起问题?

​ ♥浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

​ 一浮全浮

浮动案例

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .header {
            height: 40px;
            background-color: #333;
        }

        .box {
            width: 1226px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
        }

        .banner {
            width: 1226px;
            height: 460px;
            background-color: red;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 460px;
            background-color: #ffa500;
        }

        .right {
            float: right;
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
        }
    </style>
</head>

<body>
    <header class="header"></header>
    <div class="box"></div>
    <div class="banner">
        <div class="left"></div>
        <div class="right">
        </div>
    </div>
</body>
</html>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 1226px;
            height: 614px;
            /* background-color: pink; */
            margin: 50px auto 0;
        }

        .left {
            float: left;
            width: 234px;
            height: 614px;
            background-color: purple;
        }

        .right {
            float: right;
            width: 978px;
            height: 614px;
            /* background-color: skyblue; */
        }

        ul {
            list-style: none;
        }

        .right ul li {
            float: left;
            width: 234px;
            height: 300px;
            margin-right: 14px;
            margin-bottom: 14px;
            background-color: #fff;
            /* 继承 */
            text-align: center;
            padding: 20px 0;
        }

        /* 权重 0022 */
        .right ul li:nth-child(4n) {
            margin-right: 0;
        }

        .right img {
            width: 160px;
            height: 160px;
        }

        .right ul li h3 {
            font-weight: 400;
            font-size: 14px;
            color: #333;
        }

        .right ul li p {
            font-size: 12px;
            color: #b0b0b0;
            margin: 10px 0 15px 0;
        }

        .right ul li span {
            color: #ff6700;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">
            <img src="./img/02.webp" alt="">
        </div>
        <div class="right">
            <ul>
                <li>
                    <img src="./img/1.webp" alt="">
                    <h3>Xiao mi 12 PR0</h3>
                    <p>全新骁龙8｜2K AMOLED屏幕</p>
                    <span>4699元起</span>
                </li>
                <li>
                    <img src="./img/1.webp" alt="">
                    <h3>Xiao mi 12 PR0</h3>
                    <p>全新骁龙8｜2K AMOLED屏幕</p>
                    <span>4699元起</span>
                </li>
                <li>
                    <img src="./img/1.webp" alt="">
                    <h3>Xiao mi 12 PR0</h3>
                    <p>全新骁龙8｜2K AMOLED屏幕</p>
                    <span>4699元起</span>
                </li>
                <li>
                    <img src="./img/1.webp" alt="">
                    <h3>Xiao mi 12 PR0</h3>
                    <p>全新骁龙8｜2K AMOLED屏幕</p>
                    <span>4699元起</span>
                </li>
                <li>
                    <img src="./img/1.webp" alt="">
                    <h3>Xiao mi 12 PR0</h3>
                    <p>全新骁龙8｜2K AMOLED屏幕</p>
                    <span>4699元起</span>
                </li>
                <li>
                    <img src="./img/1.webp" alt="">
                    <h3>Xiao mi 12 PR0</h3>
                    <p>全新骁龙8｜2K AMOLED屏幕</p>
                    <span>4699元起</span>
                </li>
                <li>
                    <img src="./img/1.webp" alt="">
                    <h3>Xiao mi 12 PR0</h3>
                    <p>全新骁龙8｜2K AMOLED屏幕</p>
                    <span>4699元起</span>
                </li>
                <li>
                    <img src="./img/1.webp" alt="">
                    <h3>Xiao mi 12 PR0</h3>
                    <p>全新骁龙8｜2K AMOLED屏幕</p>
                    <span>4699元起</span>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

清除浮动

为什么要清除浮动

如果子元素浮动了，假设父元素不给高度,父元素的高度为0;此时子元素不能撑开标准流的块级父元素,

原因:子元素浮动后脱标 → 不占位置

目的:需要父元素 有高度,从而不影响其它网页的布局.

清除浮动的方法

​ 01 给父元素设置高度。

​ 02 额外标签法

​ 03 单伪元素清除法(去京东copy)

​ 04 双伪元素清除法(去小米copy)

​ 05 给父元素设置 overflow: hidden;

avatar
文章
阅读
粉丝