CSS 盒模型

边框属性

border: 边框的宽度 边框的样式 边框的颜色;

连写

按上右下左的方向连写(分别设置四条边)

示例：

<style>   .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border-top:5px solid blue;
            border-right:10px dashed green;
            border-bottom:15px dotted purple;
            border-left:20px double pink;
        }</style>

按上 右 下 左方向和要素连写(分别设置四条边) border-width:  border-style:  border-color:

<style>.box{
            width: 500px;
            height: 500px;
            background-color: red;
            border-width: 5px 10px 15px 20px;
            border-style: solid dashed dotted double;
            border-color: blue green purple pink;
        }</style>

这三个属性的取值省略时的规律：

上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

上 右 下 左 > 上 > 右下左边取值和上边一样

非连写

border-top-width: ;  border-top-style:;  border-top-color:; border-right-width:;  border-right-style:; border-right-color:; border-bottom-width:;border-bottom-style: ;

注意点:同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的

.box3{  border: 5px solid red;  border-right:5px dashed red;}

内边距属性

定义：边框和内容之间的距离就是内边距；给标签设置内边距之后, 标签占有的宽度和高度会发生变化

格式1：单独设置四条边  padding-top: ; padding-right: ; padding-bottom: ; padding-left: ;

格式2：同时设置四条边 padding: 上 右 下 左;

外边距属性

标签和标签之间的距离就是外边距 

默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的，但是水平方向外边距会叠加，如下图所示：

内容的宽度和高度：就是通过width/height属性设置的宽度和高度

元素的宽度和高度：宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框（高度 同理可证）

元素空间的宽度和高度：宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距   （高度 同理）

box-sizing属性（CSS3中新增属性）

问题：增加了padding/border之后元素的宽高也会发生变化，如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高

答案：使用box-sizing属性，这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

box-sizing取值：content-box（默认值，所以添加无意义，此时元素的宽高 = 边框 + 内边距 + 内容宽高）；

border-box（元素的宽高 = width/height的宽高）    

盒子居中和内容居中

text-align:center;和margin:0 auto;区别：

   text-align: center; 是设置盒子中存储的文字/图片水平居中

   margin:0 auto;在嵌套关系的盒子中，让里面的盒子在外面的盒子中自己水平居中，仅限水平方向。

清空默认边距

直接添加 *{margin:0; padding:0}

在企业开发中为了更好地控制盒子的宽高和计算盒子的宽高等等，在编写代码之前第一件事就是要清空默认的边距。但是通配符性能不好，不建议使用*，故需要下面代码替换*{margin:0; padding:0}：

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}

行高

要想一行文字在盒子中垂直居中，只需要设置文字的行高等于盒子的高度即可。

div { width:80px; height:80px; line-height:80px; }

若有多行文字，使其在盒子中垂直居中，不能再使用上述方法，只能使用padding-top和padding-bottom实现，并用box-sizing:border-box属性限定元素宽高的变化。

还原字体和字号（借助FireWork工具设置对比之后，可以页面添加属性font）

在ul中设置样式ul { list-style:none; }可以将li前面的圆点去掉。

添加下划线可以使用boder-bottom：1px；实现