CSS基础之盒子模型

文章目录

• 前言
• 1.盒子模型的组成
• 2.边框(border)
• 3.内边距(padding)
• 4.外边距(margin)
• • • ①外边距典型应用
    • ②外边距合并
    • ③清除内外边距

---

前言

css页面布局三大重点： css 盒子模型 、 浮动 、 定位

---

1.盒子模型的组成

• border(边框)
• content(内容)
• padding(内边距)
• margin(外边距)

2.边框(border)

• CSS 边框属性允许你指定一个元素边框的样式和颜色
• 边框由三部分组成：边框宽度（粗细）、边框样式、边框颜色

属性

作用

border-width

定义边框粗细，单位是px

border-style

边框的样式

border-color

边框颜色

①border-style

边框样式的样式如下：

• none:没有边框即忽略所有边框的宽度（默认值）
• solid :边框为单实线（最为常用的）
• dashed: 边框为虚线
• dotted: 边框为点线

②边框会影响盒子实际大小
边框会额外增加盒子的实际大小，对此我们有两种解决方法：

• 测量盒子大小的时候，不量边框
• 如果测量的时候包含了边框，则需要 width/height 减去边框宽度

3.内边距(padding)

padding 属性用于设置内边距,即盒子边框与内容之间的距离

属性

作用

padding-left

左内边距

padding-right

右内边距

padding -top

上内边距

padding-bottom

下内边距

padding的简写属性：

值的个数

表达意思

padding : 1px;

上下左右内边距为1px

padding :1px 1px;

上下内边距是1px ，左右内边距是1px

padding: 1px 1px 1px;

上内边距1px，左右内边距1px，下内边距1px

padding :1px 1px 1px 1px;

上内边距，右内边距，下内边距，左内边距都是1px

注意点：

• 当我们给盒子指定 padding 值之后，发生了2件事情：
  ① 内容和边框有了距离，添加了内边距
  ②padding影响了盒子实际大小，也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
  ③ 解决方式：如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可
• 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

4.外边距(margin)

margin属性用于设置外边距，即控制盒子和盒子之间的距离

属性

作用

margin-left

左外边距

margin-right

右外边距

margin-top

上外边距

margin-bottom

下外边距

margin 简写方式与 padding 完全一致，具体可参考上文padding写法

①外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件:
1.盒子必须制定了宽度(width)
2.盒子左右的外边距都设置为 auto

Tips:
以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可。

②外边距合并

使用 margin 定义块级元素的垂直外边距时，可能会出现外边距的合并

主要有两种情况：

1. 相邻块元素垂直外边距的合并
2. 嵌套块元素垂直外边距的塌陷

①相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和，取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

②嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方法：
1.可以为父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加overflow: hidden

③清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 java开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 点击我的Gitee获取。
还有 高级java全套视频教程 java进阶架构师 视频+资料+代码+面试题！

全方面的java进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。