原创 码农笔记 CSS笔记

CSS 盒子模型

盒子模型

页面布局有三大学习核心，盒子模型、浮动和定位，盒子模型能非常好的帮助我们布局页面。

看透网页布局的本质

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子。
2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。
3. 往盒子里面装内容。

盒子模型（Box Model）的组成

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，分别是：边框、外边距、内边距和实际内容。

边框

border可以设置元素的边框，边框有三部分组成：边框宽度、边框样式、边框颜色
语法规范：

border : border-width || border-style || border-color

表格的细线边框

boder-collapse : collapse;

• collapse 是合并的意思
• border-collapse : collapse; 则是白哦是相邻边框合并在一起。

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

边框会额外增加盒子的大小，因此我们有两种方案解决：

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

内边距

padding用于设置盒子的内边距

外边距

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

外边距典型应用

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

1. 盒子必须指定了宽度（width）
2. 盒子左右的外边距都设置为 auto
   常见的写法有以下三种：

- margin-left:auto;margin-right:auto;
- margin:auto;
- magin:0 auto;

注意：以上方法是让块级元素水平居中，若要让行内元素或行内块元素水平居中，只需要给父元素添加：text-algin:center即可

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

对于两个嵌套关系的块元素，父元素上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：

1. 给父元素定于上边框
2. 给父元素定义上内边距
3. 给父元素添加overflow:hidden
4. 浮动、固定、绝对定位的盒子等

清除内外边距

*{
    padding:0;   /*清除内边距*/
    margin:0;    /*清除外边距*/
}

圆角边框

（仅在 CSS3 后可以使用）
语法规范：

border-radius:length;

注意：

1. length 可以为精确数值，也可以是百分比
2. 如果需要圆形，只要将 length 设置为正方形边长的一半
3. 如果需要圆角矩形，只要将 length 设置为高度的一半

盒子阴影

（仅在 CSS3 后可以使用）
语法规范：

box-shadow:h-shadow v-shadow blur spread color inset;

文字阴影

（仅在 CSS3 后可以使用）
语法规范：

text-shadow:h-shadow v-shadow blur color;

本文由 小但 创作
全文共：2218个字
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载，均为作者原创，转载前请务必署名
最后编辑时间为: Jan 23, 2021 at 12:09 pm