7_盒子模型.txt

css选择符就是，表示你将把你定义的样式，用给谁。

css盒子模型
一个盒子是由以下几部分构成：
1.盒子中的内容 content
2.盒子的边框 border
3.盒子的边框与内容之间的距离，称为填充 padding，内边距(内补丁)
4.多个盒子存在时，盒子与盒子之间的距离，称为边界 margin，外边距(外补丁)

css控制元素的尺寸：
1.设置元素宽度 width:100px;
2.设置元素高度 height:100px;
3.设置元素的某一个方向外边距 margin-top/right/bottom/left:10px;
4.通知参数个数不同来设置元素的外边距 margin:10px; 上右下左4个方向
margin:10px 20px; 上下10px 左右20px
margin:10px 20px 30px; 上10px 右20px 下30px 左20px
margin:10px 20px 30px 40px; 上10px 右20px 下30px 左40px

5.设置元素的内边距 padding:上 右 下 左;

注意1：在定义盒子的宽度时，要考虑padding、border、margin的存在。
如果增加了padding，整个盒子宽度值，要减去增加的padding的值。

注意2：在使用外边距margin时，要注意浏览器兼容性。
解决办法：加border属性就可以解决问题。如：border:2px solid blue;

注意3：由于各个浏览器存在着内外边距的默认值，还不同，
我们需要将所有浏览器的默认内外边距，都从零开始计算。

注意4：在实际开发中，不要用 *{margin:0;padding:0;} 因为效率低。
我们一般是用到了哪些元素，就把哪些元素的默认值归0

-----------------------

css小技巧：
1.让盒子水平居中。可以将对象的左右外边界，设置为auto
margin:10px auto;
2.让盒子中的内容，垂直居中，设置行高=盒子的高度。但是不要有换行。
height:50px;
line-height:50px;