盒子模型（box-sizing)

1.什么是盒子模型？

margin>border>padding>content

2.边框

属性	说明
border-top-color	上边框颜色
border-right-color	右边框颜色
border-bottom-color	下边框颜色
border-left-color	左边框颜色
border-color	四个边框为同一颜色
	上、下边框颜色：#369 左、右边框颜色：#000
	上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00
	上、右、下、左边框颜色： #369、#000、#f00、#00f

border-width：像素值表示

border-style：solid   dashed dotted  hidden  none  double

border简写: border:1px solid #3a6587;

3.margin(外边距)

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

网页居中对齐：margin：0 auto；

4.padding(内边距)

padding-left padding-right padding-top padding-bottom padding

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

6.盒子模型

box-sizing：content-box  |  border-box  |  inherit;

content-box：默认值，盒子的总尺度（以内容为基准）

border-box：盒子的宽度或高度等于元素内容的宽度或高度（以边框为基准）

7.圆角边框

border-radius: 20px  10px  50px  30px;    四个属性值从左上按顺时针排列

圆形：

1.元素的宽度和高度必须相同

2.圆角的半径为元素宽度的一半，或者直接设置圆角半径值为一半

半圆形：

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

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

扇形：

1.“三同”是元素宽度、高度、圆角半径相同

2.“一不同”是圆角取值位置不同

8.盒子阴影

box-shadow:inset  x-offset  y-offset  blur-radius  color;