盒子模型 css

作用：布局网页，摆放盒子和内容。

1 盒子模型-组成

• 内容区域 – width & height

• 内边距 – padding（出现在内容与盒子边缘之间）

• 边框线 – border

• 外边距 – margin（出现在盒子外面）

  div {
    margin: 50px;
    border: 5px solid brown;
    padding: 20px;
    width: 200px;
    height: 200px;
    background-color: pink;
  }

  

2 边框线

2.1 四个方向

属性名：border（bd）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

 

div {
  border: 5px solid brown;
  width: 200px;
  height: 200px;
  background-color: pink;
}

2.2 单方向边框线

属性名：border-方位名词（bd+方位名词首字母，例如，bdl）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

div {
  border-top: 2px solid red;
  border-right: 3px dashed green;
  border-bottom: 4px dotted blue;
  border-left: 5px solid orange;
  width: 200px;
  height: 200px;
  background-color: pink;
}

3 内边距

作用：设置 内容 与 盒子边缘 之间的距离。

技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。

• 属性名：padding / padding-方位名词

  div {
    /* 四个方向 内边距相同 */
    padding: 30px;
    /* 单独设置一个方向内边距 */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 40px;
    padding-left: 80px;
    width: 200px;
    height: 200px;
    background-color: pink;
  }

  提示：添加 padding 会撑大盒子。

• padding 多值写法

4 尺寸计算

默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论：给盒子加 border / padding 会撑大盒子

解决：

• 手动做减法，减掉 border / padding 的尺寸

• 內减模式：box-sizing: border-box

5 外边距

作用：拉开两个盒子之间的距离

属性名：margin

提示：与 padding 属性值写法、含义相同

6 版心居中

左右 margin 值 为 auto（盒子要有宽度）

div {
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  background-color: pink;
}

7 清除默认样式

清除标签默认的样式，比如：默认的内外边距。

/* 清除默认内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 清除列表项目符号 */
li {
  list-style: none;
}

8 元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

9 圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：数字+px / 百分比

提示：属性值是圆角半径

 多值写法

技巧：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

• 正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%

img {
  width: 200px;
  height: 200px;
  
  border-radius: 100px;
  border-radius: 50%;
}

 胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半

div {
  width: 200px;
  height: 80px;
  background-color: orange;
  border-radius: 40px;
}

 

10 盒子阴影

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：

• X 轴偏移量 和 Y 轴偏移量 必须书写

• 默认是外阴影，内阴影需要添加 inset

  div {
    width: 200px;
    height: 80px;
    background-color: orange;
    box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
  }