前端学习笔记——CSS基础语言的学习（三）

作者简介：大家好，本人刚专升本上岸，是个前端小菜鸟。每日都会虚心的学习。有什么写的不好的，大家都可以帮我提出来。我跟着pink老师学的！！！强烈推荐：https://www.bilibili.com/video/BV14J4114768p=1&vd_source=38cea56ff3dcca4556d2d0f0f2c18c0c

---

盒子模型

盒子模型简介

1.盒子模型：就是把HTML中的布局元素看作是一个矩形的盒子。css盒子模型本质上是一个盒子。封装周围的HTML元素，它包括：边框，外边距，内边距和实际内容

边框（border）

2.边框：border可以设置元素的边框。边框有三部分组成：边框粗细，边框样式 ，边框颜色

border-style 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框

3.边框（border）属性 简写：border：1px solid red：没有顺序

边框分开写法：

例子：border-top：1px solid red 只设定上边框

collapse属性

4.border-collapse属性控制浏览器绘制边框的方式。他控制相邻单元格的边框。

内边距（padding）

5.内边距：padding属性用于设置内边距

6.内边距（padding）简写方式：padding：5px 10px 15px 20px

外边距（margin）

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

8.margin属性简写方式和padding完全一致

盒子水平居中

9.外边距可以让块盒子水平居中，但是必须满足两个条件

（1）.盒子必须指定宽度（width）

（2）.盒子左右的外边距都设置为auto

注意！！！：以上方法是让块元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text—align：center

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

嵌套块元素垂直外边距的塌陷问题

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

解决方案：

1.可以为父元素定义上边框。

2.可以为父元素定义上内边距。

3.可以为父元素添加overflow：hidden

12.清除内外边距：网页元素很多都带有默认的内外边距，并且不同的浏览器有不同的内外边距。所以我们要清除网页元素的内外边距。

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换成块元素和行内块元素就可以了。