第六章 盒子模型

第六章 盒子模型

1.边框

• border-color：值为一个：四个边框同色

  ​ 两个：上下、左右

  ​ 三个：上、左右、下

  ​ 四个：上、右、下、左

  ​ boder-top-color：上边框颜色

  ​ boder-right-color：右边框颜色

  ​ boder-bottom-color：下边框颜色

  ​ boder-left-color：左边框颜色

• border-width（边框粗细）：像素值 thin、medium、thick

• border-style（边框样式）：none、hidden、doyyed、dashed、solid、double

• border简写：border: 1px dashed red;

2.外边距

margin：margin-top、margin-right、margin-bottom、margin-left、margin

网页居中对齐：margin:0px auto;

3.内边距

padding：padding-left、padding-right、padding-top、padding-bottom、padding

盒子模型总尺寸 = border+padding+margin+内容宽度

box-sizing：content-box(默认值，盒子总尺寸) | border-box(盒子的宽度或高度等于元素内容的宽度或高度) | inherit(元素继承父元素的盒子模型模式);

border-box 消除border和padding

4.圆角边框

border-radius（顺时针）：

• 圆形： 元素的宽高必须相同

  border-radius: 50%;

• 半圆形：

  1.制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值

  2.制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

• 扇形：（三同，一不同）

  “三同”是元素宽度、高度、圆角半径相同“一不同”是圆角取值位置不同

5.盒子阴影

box-shadow：阴影类型 水平偏移量 垂直偏移量 模糊半径 颜色；