CSS盒子模型的详细解析(1)

简介: 03-盒子模型作用:布局网页,摆放盒子和内容。盒子模型-组成内容区域 – width & height内边距 – padding(出现在内容与盒子边缘之间)

03-盒子模型

作用:布局网页,摆放盒子和内容。

盒子模型-组成

  • 内容区域 – width & height
  • 内边距 – padding(出现在内容与盒子边缘之间)
  • 边框线 – border
  • 外边距 – margin(出现在盒子外面)
div {
  margin: 50px;
  border: 5px solid brown;
  padding: 20px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

2706167b8a7b427cb4644478423646ee.png

边框线

四个方向

属性名:border(bd)

属性值:边框线粗细 线条样式 颜色(不区分顺序)

div {
  border: 5px solid brown;
  width: 200px;
  height: 200px;
  background-color: pink;
}
单方向边框线

属性名:border-方位名词(bd+方位名词首字母,例如,bdl)

属性值:边框线粗细 线条样式 颜色(不区分顺序)

div {
  border-top: 2px solid red;
  border-right: 3px dashed green;
  border-bottom: 4px dotted blue;
  border-left: 5px solid orange;
  width: 200px;
  height: 200px;
  background-color: pink;
}

内边距

作用:设置 内容 与 盒子边缘 之间的距离。

  • 属性名:padding / padding-方位名词
div {
  /* 四个方向 内边距相同 */
  padding: 30px;
  /* 单独设置一个方向内边距 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 80px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

提示:添加 padding 会撑大盒子。

  • padding 多值写法

技巧:从开始顺时针赋值,当前方向没有数值则与对面取值相同

尺寸计算

默认情况:盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论:给盒子加 border / padding 会撑大盒子

解决:

  • 手动做减法,减掉 border / padding 的尺寸
  • 內减模式:box-sizing: border-box

外边距

作用:拉开两个盒子之间的距离

属性名:margin

提示:与 padding 属性值写法、含义相同

版心居中

左右 margin 值 为 auto(盒子要有宽度)

div {
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  background-color: pink;
}

清除默认样式

清除标签默认的样式,比如:默认的内外边距

/* 清除默认内外边距 */


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 清除列表项目符号 */
li {
  list-style: none;
}

元素溢出

作用:控制溢出元素的内容的显示方式。

属性名:overflow

外边距问题

合并现象

场景:垂直排列的兄弟元素,上下 margin合并

现象:取两个 margin 中的较大值生效

.one {
  margin-bottom: 50px;
}
.two {
  margin-top: 20px;
}
外边距塌陷

场景:父子级的标签,子级的添加 上外边距 会产生塌陷问题

现象:导致父级一起向下移动

.son {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background-color: orange;
}

解决方法:

  • 取消子级margin,父级设置padding
  • 父级设置 overflow: hidden
  • 父级设置 border-top

CSS盒子模型的详细解析(2):https://developer.aliyun.com/article/1393337?spm=a2c6h.13148508.setting.31.434b4f0eJFR9Df


相关文章
|
2天前
|
自然语言处理 前端开发 API
解析CSS文件
【5月更文挑战第23天】解析CSS文件。在Python中,可以使用一些第三方库来帮助解析CSS文件,例如`cssutils`。
9 2
|
6天前
|
前端开发
CSS 盒子模型(Box Model
CSS 盒子模型(Box Model。
11 1
|
9天前
|
前端开发
CSS的盒子模型:掌握网页设计的基石!
CSS的盒子模型:掌握网页设计的基石!
|
10天前
|
前端开发
CSS盒子模型
【5月更文挑战第4天】CSS盒子模型。
24 7
|
10天前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
10天前
|
前端开发 UED
【Web 前端】css盒子模型有几种类型?它们区别是什么?
【4月更文挑战第22天】【Web 前端】css盒子模型有几种类型?它们区别是什么?
|
10天前
|
前端开发
CSS 盒子模型
CSS 盒子模型。
17 4
N..
|
10天前
|
前端开发
CSS盒子模型
CSS盒子模型
N..
16 0
|
10天前
|
前端开发 JavaScript 容器
CSS学习笔记(一) 盒子模型
CSS学习笔记(一) 盒子模型
|
10天前
|
存储 前端开发 算法
【正在完善】高级CSS特效解析其示范案例
【正在完善】高级CSS特效解析其示范案例
129 0

推荐镜像

更多