CSS笔记——盒子模型

盒子模型

1 盒子模型介绍

• 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
• 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子

CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin ）构成，这就是 盒子模型 。

2 内容区域的宽度和高度

作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小

属性：width / height

常见取值：数字+px

3 边框 （border）

• 作用：给设置边框粗细、边框样式、边框颜色效果

• 常见属性：

  

• 属性连写

  单个取值的连写，取值之间以空格隔开
  如：border : 10px solid red;

• 单方向设置：

  属性名：border - 方位名词

  属性值：属性的连写

4 内边距（padding）

• 作用：设置 边框 与 内容区域 之间的距离

• 常见取值：

  padding:10px;

  距离属性取值数可有一个到四个，遵循从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的原则

• 单方向设置：

  属性名：padding - 方位名词

  属性值：数字 + px

5 外边距（margin）

• 作用：设置边框以外，盒子与盒子之间的距离

• 常见取值：

  margin:10px;

  距离属性取值数可有一个到四个，遵循从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的原则

• 单方向设置：

  可使当前盒子往设定的方位移动

  属性名：margin - 方位名词

  属性值：数字 + px

6 盒子实际大小计算公式

设置width和height是内容的宽高，设置border和padding会撑大盒子

盒子宽度/高度 = 边框 + padding + 内容宽度/高度

7 清除默认内外边距

浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的

margin和padding，

8 特殊情况

• 水平布局 的盒子，左右的margin正常，互不影响

• 垂直布局 的 块级元素，上下的margin会合并

• 互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上，导致父元素一起往下移动

  解决

  1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
  2. 给父元素设置overflow：hidden
  3. 转换成行内块元素
  4. 设置浮动

• 给行内元素设置margin和padding时无效