CSS 2种模式下的盒模型互相转化

最新推荐文章于 2022-09-24 20:23:36 发布

喝着绿茶的猫

最新推荐文章于 2022-09-24 20:23:36 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：盒模型 css

本文链接：https://blog.youkuaiyun.com/luyu13141314/article/details/53516641

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了CSS中的盒模型，包括padding、border和margin的影响。重点讲解了标准模式（content-box）与怪异模式（border-box）的区别，并展示了如何使用CSS3的box-sizing属性进行两种模式的转换。内容还涵盖了box-sizing在移动端布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

盒模型简介

在这里插入图片描述
一个盒子中主要的属性就5个：width、height、padding、border、margin。

width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
padding是“内边距”的意思
border是“边框”
margin是“外边距”

真实占有宽度= 左border + 左padding + width + 右padding + 右border

padding

 如果写了4个值：
 padding:30px 20px 40px 100px;
 上、右、下、左

 如果只写3个值：
 padding: 20px 30px 40px;
 上、右、下、??和右一样

 如果只写2个值：
 padding: 30px 40px;


  //用小属性层叠大属性：
  padding: 20px;
  padding-left: 30px;

 //下面的写法错误：
 padding-left: 30px;
 padding: 20px;
 (不能把小属性，写在大属性前面。)

padding影响盒子大小

div {
	width:100px;
	height:100px;
	padding: 0 0 0 40px;
}

在这里插入图片描述
盒子宽度=盒子宽度+左右内边距+边框宽度

继承的盒子，设置padding 值一般不影响宽度

在这里插入图片描述

border

边框有三个要素：粗细、线型、颜色；

实线：solid
虚线：dashed

border属性能够被拆开，有两大种拆开的方式：

1）按3要素:border-width、border-style、border-color
2）按方向：border-top、border-right、border-bottom、border-left

 //按3要素拆开：
 border-width:10px;    → 边框宽度
 border-style:solid;   → 线型
 border-color:red;     → 颜色
 等价于：
 border:10px solid red;


 //按方向来拆
 border-top:10px solid red;
 border-right:10px solid red;
 border-bottom:10px solid red;
 border-left:10px solid red;
 等价于
 1border:10px solid red;

margin

小总结：

内边距padding：内容与边框之间的距离【移动的是内容范围】
外边距margin：盒子与盒子之间的距离【移动的是盒子】
浮动的元素或者定位的元素依然可以设置margin或者padding

2种模式下的盒模型互相转化

CSS3 的 box-sizing的属性值有3个，分别为border-box 、 content-box、inherit(规定应从父元素继承 box-sizing 属性的值)。可以通过该属性转化这两种盒模型。

盒模型的两种标准

标准模型（w3c）：盒模型的宽高只是内容（content）的宽高
怪异模式（IE模式）：盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高

标准模式下的盒模型: content-box

content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为标准模式下的盒模型。

怪异模式（IE模式）下的盒模型:border-box

border-box： padding和border被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
此属性表现为怪异模式下的盒模型。

看下面图示更清晰：

     .test1 {
        width: 200px;
        padding: 30px;
        border: 10px solid black;
        background: yellowgreen;
        margin-bottom: 20px;
      }
      .test2 {
        width: 200px;
        padding: 30px;
        border: 10px solid black;
        background: pink;
        box-sizing: border-box;
      }

在这里插入图片描述
上面的content-box ( Element width = width ) 即width = 200px，元素实际宽度为200px
下面的content-box ( Element width = width + border + padding ) 即 width =120 + 102 + 302 。元素实际宽度为120px

CSS如何设置两种模型？（用到CSS3的box-sizing）

标准模型：box-sizing: content-box;
怪异模式（IE模式）：box-sizing:border-box;

box-sizing应用场景

盒子内减，配合百分比布局是实现移动端布局的方式之一

/*bootstrap全局中设定该样式*/
*,
*::before,
*:after{
border-sizing:border-box;
}

小例子：实现两列布局，中间始终保持有10px的间距

<style>
* {
    padding: 0;
    margin: 0;
}
.left {
    width: 50%;
    float: left;
    height: 300px;
    padding-right: 5px;
    box-sizing: border-box;
}
.right {
    width: 50%;
    float: left;
    height: 300px;
    padding-left: 5px;
    box-sizing: border-box;
}
.info {
    width: 100%;
    height: 100%;
    background-color: pink;
    }

</style>
</head>
<body>
<div class="left"><div class="info"></div></div>
<div class="right"><div class="info"></div></div>
</body>