CSS（三）盒子模子

目次
Content
Padding
Border
Margin
盒子模子盘算方式
使用 box-sizing 属性控制盒子模子的盘算

---

全部的HTML元素都可以看作像下图如许一个矩形盒子：

这个模子包罗了四个地区：content（内容地区）、padding（内边距）、border（边框）和 margin（外边距）



Content





内容地区是盒子模子的最核心部门，包罗了元素的实际内容，比方文本、图片、视频、按钮等
内容地区的巨细由元素的 width 和 height 属性决定。通常，CSS 的 width 和 height 只会影响内容地区的尺寸，padding、border 和 margin 不管帐入该地区的尺寸。比方想要设置一个 div 元素的宽度为 300px，那么该 div 的内容地区的宽度就为 300px：

1. div {
2.   width: 300px;
3.   height: 150px;
4. }

复制代码

Padding





内边距是内容地区与边框之间的空间，通过调解 padding，可以控制内容与边框之间的隔断
比方，增长内边距可以使文本阔别边框，提升可读性

1. div {
2.   padding: 20px;
3. }

复制代码

上述代码会在 div 元素的全部边沿（上、右、下、左）添加 20px 的内边距
同样，也可以单独设置四个方向的内边距：padding-top、padding-right、padding-bottom、padding-left




Border





边框围绕内容地区和内边距的外部，是一个可视的界限。边框的样式、宽度和颜色可以自界说
影响元素界限的属性：border-width、border-style、border-color

1. div {
2.   border: 3px solid black;
3. }

复制代码

上述代码会给 div 元素添加一个 3px 宽的玄色实线边框

圆角边框：
使用border-radius属性来设置圆角框的半径

1. border-radius:10px

复制代码

border-radius 可以吸取 1 到 4 个值，决定了每个角的半径

• 1个值：四个角类似
  
• 2个值：第一个值为水平半径，第二个值为垂直半径
  
• 3个值：前两个为左右角，末了一个为上下角的半径
  
• 4个值：依次为左上、右上、右下、左下的圆角半径
  

Margin






外边距是盒子与其他元素之间的清闲，用来控制元素间的隔断
外边距不会影响元素的实际巨细，但它会改变元素与其他元素之间的间距

1. div {
2.   margin: 20px;
3. }

复制代码

上述代码会在 div 元素的四个方向添加 20px 的外边距，增长元素与其他元素之间的间距
同样也可以设置四个单独方向的外边距：margin-top、margin-right、margin-bottom、margin-left

控制块居中：

1. margin:auto;

复制代码

盒子模子盘算方式





默认情况下，CSS 中的宽度和高度只包罗 内容地区，不包罗内边距、边框和外边距。
因此，元素的总巨细大于其指定的 width 和 height。

总宽度 = 内容宽度 (width) + 左右内边距 (padding-left 和 padding-right) + 左右边框 (border-left 和 border-right) + 左右外边距 (margin-left 和 margin-right)

总高度 = 内容高度 (height) + 上下内边距 (padding-top 和 padding-bottom) + 上下边框 (border-top 和 border-bottom) + 上下外边距 (margin-top 和 margin-bottom)





使用 box-sizing 属性控制盒子模子的盘算





box-sizing 属性可以控制怎样盘算元素的宽度和高度。
它的取值为：

• content-box（默认值）：
  
  
  
  • 宽度和高度只包罗内容地区，不包罗内边距和边框
    
  • padding 和 border 会额外增长在元素的尺寸上
    
  
  
• border-box：
  
  
  
  • 宽度和高度包罗内容地区、内边距和边框的尺寸
    
  • 使用 border-box 后，设置的宽度和高度会包罗 padding 和 border，更符合直观的结构
    
  
  

比方：

1. div {
2.   box-sizing: border-box;
3.   width: 300px;
4.   padding: 20px;
5.   border: 10px solid black;
6. }

复制代码

在这种情况下，div 元素的总宽度是 300px，此中包罗 padding 和 border。
如果使用 content-box，则总宽度将是 300px + 20px（padding-left）+ 20px（padding-right）+ 10px（border-left）+ 10px（border-right）= 360px

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。