十三、盒子模型
边框(border) 边框由三部分组成：边框宽度 边框样式 边框颜色
border : border-width(单位 px) border-style（实线还是虚线） border-color
div {
width: 200px;
height: 200px;
border-width: 5px;
border-color: black;
****solid 实线 dashed 虚线 dotted 点线****
border-style: dotted;
**** 边框符合写法 无顺序****
border: 5px solid red;
****边框分开写法 ****
border-top: 5px solid blue;
border-bottom: 4px dashed pink;
background-color: pink;
padding 内边距 盒子边框与内容之间的距离 上下左右
padding-left: 20px;
padding-top: 30px;
padding: 5px; ****1个值 表示上下左右都有五像素 ****
padding: 5px 10px; ****两个值 代表上下五像素 左右十像素****
padding: 5px 10px 20px; ****上5 左右10 下20****
padding: 5px 10px 20px 30px; ****上5 右10 下20 左30 顺时针****
****padding 会影响盒子大小 ****
}
div {
width: 200px;
height: 200px;
color: pink;
}
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
}
.nav a {
height: 41px;
padding: 0px 20px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
display: inline-block;
text-align: center;
line-height: 41px;
}
.nav a:hover {
background-color: lightgrey;
color: #ff8500;
}
**** 如果盒子不指定width/height属性，此时padding不会撑开盒子大小 ****
margin属性用于设置外边距 即控制盒子和盒子之间的距离
div {
width: 200px;
height: 200px;
background-color: pink;
}
.one {
margin-bottom: 20px;
}
.two {
margin: 30px;
}
外边距可以让块级盒子水平居中，但必须满足两个条件：
1.盒子必须制定了宽度（width） 2.盒子左右外边距设置为auto
行内元素或者行内块元素水平居中可以给其父级添加：text-align: center;
.header {
width: 900px;
height: 200px;
background-color: pink;
margin: 0 auto;
text-align: center;
}
外边距合并：使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是margin-bottom与margin-top 之和取两个值中的合井之前较大者这种现象被称为相邻块元案垂直外边距的合并
****对于两个嵌套关系的块元素，父元素有上外边距而子元素也有上外边距，此时父元素会塌陷较大外边距值 ****
解决方法：
1.为父元素设置边框
2.为父元素设置上内边距
3.可以为父元素添加overflow:hidden
.fu {
width: 400px;
height: 400px;
background-color: pink;
margin-top: 40px;
border: 1px solid transparent;
padding-top: 10px;
overflow: hidden;
}
.zi {
width: 200px;
height: 200px;
background-color: red;
margin-top: 60px;
}
****网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一致，因此我们在布局前，首先要清除下网页元素的内外边距 ****
* {
margin: 0; 清除外边距
padding: 0; 清除内边距
}
****行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。 但转化为块级或者行内块级就可以了 ****
