css之盒子模型box-sizing属性

最新推荐文章于 2024-04-14 12:49:42 发布

小鱼的池塘

最新推荐文章于 2024-04-14 12:49:42 发布

阅读量518

点赞数

分类专栏：前端基础语言从学习文章标签： css

本文链接：https://blog.csdn.net/haha_hello/article/details/56668155

版权

前端基础语言从学习专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一，box-sizing属性，自适应盒子元素的宽高的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>52-盒子box-sizing.html</title>
    <style>
        .content{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .aside{
            width: 100px;
            height: 200px;
            background-color: cyan;
            float: left;
        }
        .article{
            /*
                1,css3中新增了box-sizing 属性,这个属性可以保证我们给盒子新增padding和border之后,盒子元素的宽高不会发生变化
                2,box-sizing取值
                (1),border-box 元素的宽高恒等于width
                (2),content-box 默认属性,元素的宽高=边框*2+内边距*2+width
            */
            box-sizing: content-box;
            width: 200px;
            height: 200px;
            background-color: green;
            float: right;
            padding: 20px;
            /*border: 20px solid #000;*/
        }
    </style>
</head>
<body>
<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>

</body>
</html>

二，盒子嵌套注意点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53-盒子模型练习.html</title>
    <style>
        .big{
            width: 500px;
            height: 500px;
            background-color: red;
            border: 5px solid #000;
            /*box-sizing: border-box;*/
            /*padding-top: 150px;*/
            /*padding-left: 150px;;*/
        }
        .little{
            width: 200px;
            height: 200px;
            background-color: cyan;
            /*
                1,注意点:如果两个盒子是嵌套关系,那么设置了里面盒子的顶部外边距,外面的盒子也会被顶下来
                2,如果外面的盒子不被一起定下来,可以给外边的盒子添加边框属性
                3,在企业开发中,一般情况下如果需要控制嵌套关系盒子之间的距离,
                    应该首先考虑padding,本质上是控制父子关系之间的间隙的;
                    其次考虑margin,margin本质上是用于兄弟关系之间的间隙的,如果要用margin就得给父盒子添加边框属性
            */
            /*margin-top: 150px;*/
            /*margin-left: 150px;*/
            /*margin: 150px 150px;*/
            /*
                margin: 0 auto; 表示盒子水平居中,但是对垂直无效
                margin: 150px auto; 表示盒子水平居中,垂直也居中
            */
            margin:150px auto;
        }
    </style>
</head>
<body>
<!--
    有一个大盒子,元素的宽高是500
    有一个小盒子,元素的宽高是200
    要求将小盒子放到大盒子中,并且让小盒子在大盒子中水平垂直居中
-->
</body>

<div class="big">
    <div class="little"></div>
</div>

</html>

三，盒子居中和内容居中的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>54-盒子的居中和内容的居中.html</title>
    <style>
        .father{
            width: 500px;
            height: 500px;
            background-color: red;
            text-align: center;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: cyan;
            margin:0 auto;
        }
    </style>
</head>
<body>
<!--
    1,text-align:center;和margin:0 auto;的区别
    text-align:center;设置盒子中文字和图片内容的居中
    margin:0 auto;设置盒子自身居中
-->
<div class="father">
    我是文字 <br>
    <img src="images/image.png" alt="">
    <div class="son"></div>
</div>
</body>
</html>