三、box 盒子模型

三、

1、边框 border

颜色 border-color
粗细 border-width
样式 border-style
solid
实线的
dashed
虚线
dotted
点状线
举例
border: 1px solid red ;
4个边框都是红色的实线
border-top: 1px dashed pink;
top left right bottom
border-top-color: skyblue;
上边框线的颜色 天蓝色
border: none
去掉边框

2、内边距 padding

padding 盒子内部的距离
padding 会撑开盒子 我们一般情况下用 width 和高度 减去 多出来的padding
有的盒子我们没有给宽度，此时一般情况padding不会撑开
四种写法
padding: 10px;
4个内边距都是10
padding: 10px 20px;
上下 10 左右 20
padding: 10px 20px 30px;
上 10 左右 20 下 30
padding: 10px 20px 30px 40 px
上右下左 顺时针

3、外边距 margin

margin 让块级盒子居中对齐
块级
有宽度
让div整体在页面水平居中：
①给div设置宽度
②给div设置marign：margin 左右auto就可以了
margin： 0 auto;
margin： auto
margin-left: auto;
margin-right: auto;
margin外边距的特殊现象（合并 塌陷）
上下的外边距才有合并的问题
嵌套关系的盒子会有塌陷
给父盒子 border
给父盒子 padding 上
给父盒子 overflow:hidden;

4、宽高 width,height

盒子模型的经典应用
1、去掉所有标签默认的内填充和外填充
* {
margin: 0;
padding: 0;
}
body, div,span, h1,h2,h3,h4,h5,h6,pul,li,ol,dl,dt,dd,table,tr,td,th,form,input,select,textarea {
margin: 0;
padding: 0;
}
2、如何让一个块盒子水平居中
要求
1、给盒子设宽度
2、margin左右自动
margin-left: atuo;
margin-right: auto;
margin: auto;
margin: 0 auto;
margin: 50px auto;
上下50px的外填充，左右自动
举例
div {
width: 1000px;
margin: 0 auto;
}