CSS盒子模型

可以理解为网页的布局就是画盒子
一个标签里面有多个标签，可以理解最外面的标签就是一个盒子。一般是指div标签，但不止只有div是盒子。

**盒子组成：

**1.内容区域

盒子中内容的范围

2.边框border

border的几个属性
border-width边框的宽度
border-color边框的颜色
border-style边框的样式：none无，默认
solid实现
dashed虚线
dotted点线
边框属性联写

border:1px solid red;

或者单独指定每一个边框的样式
border-top-width…等等
去掉边框
border:none
或者
border-stule:none
去掉边框轮廓线
outline-style: none;
点击文字设置空间光标

<label for="uname">用户名：label><input type="" name="uname" id="uname">

点击用户名边框会变化，我看的是变蓝色。
边框圆角

border-radius：20px;

3&4.内边距

margin：内容与边框之间的距离 外边距padding：盒子与盒子之间的距离**

还是这张图容易理解。

padding不能改变元素的位置，只能改变元素中内容区域的位置
padding取值:

	padding: 10px;
			/*上下左右内边距为10px*/
			padding:10px 20px;
			/*上下10px  左右20px*/
			padding: 10px 20px 30px;
			/*上10px 左右20px 下30px*/
			padding: 10px 20px 30px 40px;
			/*顺时针方向：上10px 右20px 下30px 左40px*/
			/*padding: 10px 10px 10px 10px 也就等于 padding:10px;*/

盒子的大小：
(1)盒子实际（在浏览器中）大小=内容区域大小+边框+内边距
总结：
(2)如果一个盒子没有设置边框和内边距，那么该盒子在浏览器中的实际大小就是其内容区域的大小。
(3)如果一个容器设置了宽度和高度，同时又设置了内边距或者边框，要保证当前盒子大小不变，在要内容区域做减法操作。

margin
改变盒子的位置。
margin不会改变元素的大小
特点：垂直外边距合并（在垂直方向，外边距以最大值为准，不会进行叠加运算）
外边距垂直塌陷： 如果给子元素设置margin-top值的时候，发现父元素也向下移动了
给父元素设置边框
给父元素设置overflow：hidden;
让子元素或者父元素脱标（浮动，绝对定位，固定位定位）后面会讲