前端基础 - CSS（三）

盒子模型

三大核心：盒子、浮动、定位 ->布局的

网页的布局过程

​ 准备好相关的网页元素，Box

​ 利用CSS设置好盒子样式，摆放位置

​ 往盒子里装东西

​ 核心的本质：利用CSS摆盒子

盒子模型：矩形的盒子。容器

​ CSS盒子模型本质就是一个盒子 封装周围的HTML元素、边框、内边距、外边距

​ 1.边框（border）

​ border可以设置元素的边框的。边框是由三部分组成 粗细、颜色、样式

​ 语法：border：border-width | border-style | border-color

​ 简写： border：1px soild red；没有顺序的

​ 边框分开写 border:1px soild red;

​ border-collapse：collapse

​ 属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框

​ collspae 合并的意思

​ border-collapse：collapse；表示相邻边框合并在一起

​ 边框会影响盒子实际大小

​ 1.测量盒子大小的时候，不量边框

​ 2.边框 width和height减去边框宽度

​ 内边距 padding属性设置盒子的内边距，即边框与内容之间的距离

​ padding-left right top bottom

​ 给padding后，发生了两件事：

​ 1.内容和边框有距离

​ 2.盒子大小改变

​ 盒子已经有了高度和宽度 指定了padding 撑大

​ 解决：保证盒子跟效果图一致，width、height减去多出来的内边距

​ padding内边距可以撑开盒子

​ 如果盒子本身没指定width height padding不会撑开盒子

​ 2.外边距 margin 属性设置外边距 控制盒子和盒子之间的距离

​ margin-left margin-top margin-right margin-bottom

​ margin简写和padding完全一致

​ 外边距的应用

​ 外边距可以让块级的盒子水平居中必须满足这两个条件

​ 1.盒子必须制定了width

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

​ text-align：center

​ 外边距的合并：

​ 1.相邻的块元素垂直合并

​ 取两个值中的较大者

​ 解决：尽量只给一个盒子添加margin的值

​ 2.嵌套的块元素垂直外边距塌陷

​ 解决方案：

​ 1.可以给父元素定义边框

​ 2.可以给父元素定义上内边距

​ 3.可以给父元素添加overflow：hidden。

​ 还有其他 浮动 固定 绝对定位盒子

​ 清除内外边距

​ 注意：行内元素为了兼容性问题，不要去设置上下的内外边距，只设置左右内外边距

​ 转换为块级元素和行内块元素

​ 2.圆角边框

​ border-radius属性设置元素的外边框的圆角

​ border-radius：length

​ 3.盒子的阴影

​ box-shadow属性给盒子添加阴影

​ box-shadow：h-shadow v-shadow blur spread color