盒子 box-sizing 属性
- CSS3 中新增了一个 box-sizing 属性，这个属性可以保证我们给盒子新增 padding 和 border 之后，盒子元素的宽度和高度不变
- box-sizing 属性是如何保证增加 padding 和 border 之后，盒子元素的宽度和高度不变
和我们前面学习的原理一样，增加 Padding 和 border 之后要想保证盒子元素的宽高不变，那么就必须减去一部分内容的宽度和高度 - box-sizing 取值
- content-box
元素的宽高 = 边框 + 内边距 + 内容的宽高 - border-box
元素的宽高 = width/height
盒子模型练习中的注意点
如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，外面一个盒子也会被顶下来
如果外面的盒子不想被一起顶下来，那么可以给外面的盒子添加一个边框属性
在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的举例，应该首先考虑 padding，其次再考虑 margin
margin 本质上是用于控制兄弟关系之间的间隙的在嵌套关系的盒子中，我们可以利用 margin:0 auto; 的方式来让连里面的盒子在外面的盒子中水平居中
margin:0 auto; 只对水平方向有效，对垂直方向无效，垂直方向用 Padding 来控制
margin:150px auto;
盒子居中和内容居中
- text-align:center; 和 margin:0 auto;的区别
text-align:center;zuo用设置盒子中存储的文字/图片/水平居中
margin:0 auto;作用让盒子自己水平居中
清空默认边距
- 为什么要清空默认边距（外边距和内边距）
在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等，所以在企业开发中，编写代码之前第一件事情就是清空默认的边距 - 如何清空默认的边距
格式
*{
margin:0;
padding:0;
}
注意点
通配符选择器会找到（遍历）当前界面中所有的标签，所以性能不好，企业开发中可以从这个网址中拷贝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
行高和字号
- 什么是行高
在 CSS 中所有的行都有自己的行高
注意点：
行高和盒子高不是同一个概念
行高指的是每行内容的高度
盒子高指的是元素的高度
规律
- 文字在行高中默认是垂直居中的
- 在企业开发中我们经常将盒子的高度和行高设置为一体，那么这样就可以保证一行文字在盒子的高度中是垂直居中的
简而言之就是：
要想一行文字在盒子中垂直居中，那么只需要设置这行文字的"行高等于盒子的高"即可 - 在企业开发中如果一个盒子中有多行文字，那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中，只能通过设置 padding 来让文字居中
还原字体和字号
注意点
- 如果一个盒子中存储的是文字，那么一般情况下我们会以盒子左边的内边距为基准，不会以右边的内边距为基准，因为这个右边的内边距有误差
- 右边内边距的误差从何而来？
因为右边如果放不下一个文字，那么文字就会换行显示，所以文字和内边距之间的举例就有了误差 - 顶部的内边距并不是边框到文字顶部的距离，而是边框到行高顶部的距离
文章界面
- 清空所有的边距
- 从外到内，从上到下的编写网页
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
body{
background-color: #efefef;
}
div{
margin:0 auto;
box-sizing: border-box;
width: 372px;
height: 232px;
border: 1px solid #666;
padding: 15px;
}
h1{
font-family:"微软雅黑";
font-size: 18px;
border-bottom: 1px solid #666;
padding-bottom: 10px;
}
span{
font-size: 14px;
}
ul{
list-style: none;
margin-top: 10px;
}
ul li{
line-height: 30px;
border-bottom: 1px dashed #666;
font-family:"微软雅黑";
font-size: 12px;
color: #242424;
padding-left: 20px;
}
</style>
