学前端的第五天（css day03）笔记

1. 定位：
   position 属性
   static(默认值) : 没有定位
   relative: 相对定位，没有脱离文档流，相对于没有定位前的位置，进行偏移
   absolute: 绝对定位，脱离文档流
   后面的元素会向上补齐，覆盖块级元素(或行内元素)
   本质：元素会隐性变成inline-block(行内块级元素)

    	   原理：相对于离它最近的已定位的“祖先”元素，如没有定位的“祖先”元素，
    	         就以初始可视窗口为准，直接进行设置
   

   fixed : 固定定位，脱离文档流
   原理：相对于浏览器的边框，进行定位

   top:
   right:
   left:
   bottom:

   z-index: 指定层叠的顺序 . 值越大，就在最上面
   z-index属性必须和position结合使用，才有效

2. 定位应用场景：

   1. 重叠时应用
   2. 一般不用于布局

3.盒子尺寸

标准盒子：
总宽度 = 设置的宽度 + padding 左右 + border左右 + 外边距左右

怪异盒子：
总宽度 = 设置的宽度 + 外边距左右

设置的宽度 = 内容宽 + padding 左右 + border左右

box-sizing
content-box： 标准盒子计算尺寸
border-box : 怪异盒子计算尺寸

4. 盒子属性
   垂直方向的margin 后进行合并
   行内元素不能设置垂直方向的margin
   子元素与父元素之间没有任何填充物时，子元素的margin 会作用到父元素上

   思考 ： 到底用magin ,padding

5. 如何居中

具体：http://bugshouji.com/bbs-read-run?tid=1135

行内元素

水平居中：
text-align:center;

垂直居中：
单行文本：
height 与line-height 的高度相同时，可以实现垂直居中

多行文本：
方法1：
vertical-align:middle;

注：vertical-align 作用单元格时，才生效，所以一般会结合dispaly:table-cell; 一起使用

样式重点分析：

1. 父级的标签，高度和行度一致

p{
height: 200px;
line-height: 200px;
border: 1px solid red;
font-size: 16px;
}

2. 子标签, 设置为行内块级元素，垂直居中，且单独设置行高

注：line-hight:1 ; 这里的1指与父级的字体大小相同，你可以可以直接写具体的px

p span{
display: inline-block;
vertical-align: middle;
line-height: 1;
}

块级元素

水平居中：

方法1：常规方法 - 定宽元素

此方法缺点：内层元素必须设定（固定）宽度