怪异盒模型和弹性盒

最新推荐文章于 2023-05-12 18:07:07 发布

九阈

最新推荐文章于 2023-05-12 18:07:07 发布

阅读量226

点赞数

分类专栏： # CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_46048542/article/details/124495550

版权

CSS 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

怪异盒模型

含义:更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改
属性: box-sizing
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。
属性值: content-box
这是由CSS2.1规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
■标准盒子模型
请添加图片描述
属性值: border-box
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
请添加图片描述

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 30px;
            border: 10px solid black;
            box-sizing: content-box;
            /* 标准盒模型 */
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            margin-top: 100px;
            padding: 30px;
            border: 10px solid black;
            box-sizing: border-box;
            /* 怪异盒模型 */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></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>
        .box{
            width: 900px;
            height: 300px;
            background-color: yellow;
            margin: 0 auto;
        }
        .box div{
            width: 300px;
            height: 300px;
            float: left;
            text-align: center;
            padding: 10px;
            border: 10px solid red;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae enim, iste sunt explicabo minus nobis dolor eum facilis esse saepe illo, fuga perferendis? At illum illo tempore nulla, laudantium numquam?
        </div>
        <div>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore debitis eius cum, a quibusdam expedita est ipsam similique aspernatur officiis sequi nulla omnis natus minima ex sunt distinctio beatae.
        </div>
        <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet debitis maiores sit nihil impedit omnis, labore beatae quibusdam, molestias reiciendis eaque numquam sequi! Recusandae cupiditate veniam debitis nam consequuntur totam.
        </div>
    </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>
        .box{
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 100px auto;
            display: flex;
        }
        .box div{
            width: 100px;
            height: 100px;
            border: 1px dashed red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1111</div>
        <div>2222</div>
        <div>3333</div>
        <div>4444</div>
    </div>
</body>
</html>

请添加图片描述
没加display: flex;之前

影响:行内元素，变成了块级元素

<!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{
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 100px auto;
            display: flex; 
        }
        .box span{
            width: 100px;
            height: 100px;
            border: 1px dashed red;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1111</span>
        <span>2222</span>
        <span>3333</span>
        <span>4444</span>
    </div>
</body>
</html>

请添加图片描述
没加display: flex;之前

影响:只有一个元素的时候，margin:auto自动居中

<!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{
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 100px auto;
            display: flex; 
        }
        .box span{
            width: 100px;
            height: 100px;
            border: 1px dashed red;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1111</span>
        <!-- <span>2222</span>
        <span>3333</span>
        <span>4444</span> -->
    </div>
</body>
</html>

请添加图片描述

弹性盒—修改主轴方向

flex-direction 属性规定灵活项目的方向。
注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。
默认值： row
在这里插入图片描述

<!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{
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 100px auto;
            display: flex;
        }
        .box div{
            width: 100px;
            height: 100px;
            border: 1px dashed red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1111</div>
        <div>2222</div>
        <div>3333</div>
        <div>4444</div>
    </div>
</body>
</html>

flex-direction:row; 沿水平主轴让元素从左向右排列
请添加图片描述
flex-direction: row-reverse;
在这里插入图片描述
flex-direction: column;

flex-direction: column-reverse;

弹性盒主轴侧轴对方式

https://blog.csdn.net/weixin_46048542/article/details/119909439

九阈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
怪异盒模型和弹性盒

怪异盒模型含义:更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改属性: box-sizingbox-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。属性值: content-box这是由CSS2.1规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。■标准盒子模型属性值: border-box为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过
复制链接

扫一扫