Loading

14. CSS3-盒子模型

@

目录

1. 传统盒子模型

传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding

通过样式box-sizing: content-box;指定盒子的模型（默认）

<style>
        div {
            /* 传统盒子模型= width + border + padding */
            /*传统盒子模型*/
		   box-sizing: content-box;
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid red;
        }
    </style>
<body>
    <div></div>
</body>



2. C3盒子模型

CSS3盒子模型：盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding

通过样式box-sizing: border-box;指定盒子模型,需要考虑兼容性问题

<style>        
        div:nth-child(2) {
           /*CSS3盒子模型*/
            /* padding 和 border 不会再撑大盒子了 */
		   box-sizing: border-box; /* 有了这句话就让盒子变成CSS3盒子模型 */
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            border: 10px solid blue;
        }
    </style>
<body>
    <div></div>
</body>



3. css3盒子模型行高问题

cs盒子模型的行高是按整个盒子的高度（包括border和padding）来算的，实际效果并不垂直居中！

posted @ 2021-12-26 10:29  Hong•Guo  阅读(95)  评论(0)    收藏  举报