如何理解盒子模型 CSS3的box-sizing的使用

最新推荐文章于 2024-07-18 17:34:14 发布

milkyFog

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量99

点赞数

分类专栏： HTML5 + CSS3 文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_56599702/article/details/129470433

版权

HTML5 + CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏


1. 盒子模型 Box Model 是指在Web页面中 每个元素都是一个矩形的盒子
  1. box-width-height = 内容区域content + 内边距区域padding + 边框区域border + 外边距区域margin 

2. box-sizing 定义盒子模型的类型
  1. content-box(default): width = content
  2. border-box(global): width = content + padding + border
  3. inherit: box-sizing属性的值应该从父元素继承

* {
  // 全局设置为border-box 这样设置一个div的width就很接近盒子的实际大小box-width-height
  box-sizing: border-box;
  // 去除某些标签自带的padding和margin
  padding: 0;
  margin: 0;
}
.box {
  box-sizing: border-box;
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}
content-width = 240px = 300px - 2 * 20px + 5px
content-height = 160px = 200px - 2 * 20px + 5px
box-width = 320px = 300px + 2 * 10px
box-height = 220px = 200px + 2 * 10px