CSS学习笔记（内边距~文字在盒子里的垂直居中）

内边距
1.内边距就是内容和边框之间的距离。
2.格式
2.1.非连写

.san1{
            width: 100px;
            height:100px;
            border: 1px solid black;
            padding-top: 20px;
            padding-left: 20px;
            padding-bottom: 20px;
            padding-right: 20px;
        }

2.2.连写

{
	padding:上 右 下 左;
}

省略的规律同边框属性。
注意：
1.在设置内边距之后，div的大小会发生变化，原来的+内边距的大小
2.有边框属性才会有内边距属性。
3.内边距也会有背景颜色。
外边距
1.外边距就是标签和标签之间的距离。
2.格式
2.1非连写

.san1{
            width: 100px;
            height:100px;
            border: 1px solid black;
            margin-top: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
        }

2.2连写

margin:上 右 下 左;

3.应用
用

body{
	margin: 0px;
}

来消除网页和浏览器之间的距离。
注意
1.没有设置外边距margin属性时，会发现两个标签之间仍旧存在一段距离，这是因为字符实体的原因，HTML将回车自动当做1个空格来识别。
2.margin那一部分没有背景颜色。
外边距合并现象
在默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距比较大就听谁的。
盒子模型
1.HTML中的所有标签都是盒子模型 content+padding+border+margin
2.盒子模型的宽度和高度
2.1 content的宽度和高度
通过标签设置的width和height
2.2 元素的宽度和高度
宽度=左边框+左内边距+width+右内边距+右边框
高度=上边框+上内边距+height+下内边距+下边框

border：50px;

注意：这相当于上、右、下、左的边框都为50px。

2.3 元素空间的宽度和高度
宽度=左外边距+元素的宽度+右外边距
高度=上外边距+元素的高度+下外边距
盒子box-sizing属性（CSS3新增属性）
怎么在增加border、padding时元素的大小仍旧保持不变（不采用直接增减content的宽、高）

box-sizing: border-box;/*和直接增减content的宽、高原理相同*/

box-sizing: border-box / content-box;
content-box元素的宽高=边框+内边距+设置的宽高
盒子居中
大盒子里面一个小盒子，让小盒子在大盒子里水平垂直居中。
1.padding(用padding挤下来)

.big{
            width: 500px;
            height: 500px;
            background-color: red;
            padding: 150px;/*大盒子和小盒子之间的距离，小盒子此时相当于大盒子的内容*/
            box-sizing: border-box;
            }
.small{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 150px;
            }

2.margin

.big{
            width: 500px;
            height: 500px;
            background-color: red;
            border: 1px solid red;
        }
.small{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 150px;
        }

注意
1.如果两个盒子是嵌套关系，那么当给里面的盒子设置了顶部的外边距，外面的盒子也会被顶下来。
2.解决这个问题的方法是给外面那个盒子设置边框属性。
3.解决嵌套关系盒子之间的距离，首先考虑padding，再考虑margin，margin本质上用于控制兄弟关系之间的间隙。
水平居中

.big{
            width: 500px;
            height: 500px;
            background-color: red;
        }
.small{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 0 auto;/*只对水平居中管用，垂直居中用像素*/
        }

盒子的居中和内容的居中
text-align: center;和margin: 0 auto;的区别
text-align: center;设置盒子里的文字和图片的水平居中
margin: 0 auto;设置盒子自己水平居中
注意
默认清空标签的外边距和内边距

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}

在这个网址里直接复制

http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

行高和字号
在CSS中所有的行都有自己的行高
行高和盒子的高是不同的，行高是指某一行内容的高度，盒子的高度是指标签的高度。
line-height设置行高
规律
1.文字是在行高中垂直居中的。
2.文字在盒子里的垂直居中
1.一行文字：
将盒子的高度设置和行高设置为一样，就可以保证一行文字在盒子的高度中是垂直居中的。
2.多行文字:

.big{
            margin: 0px;
            box-sizing: border-box;
            width: 500px;
            height: 200px;
            border: 1px solid #000;padding-top: 20px;
            padding-top: 80px;/*用padding挤*/
        }
p{
            line-height: 20px;
        }