第八天学习目标

学习目标
1、 display属性的使用
2、 居中、缩进等显示汇总
3、 盒模型、盒模型的几种特殊现象分析
4、 Float浮动的使用
5、 案例

一、 display属性

属性值：inline(行内) inline-block（行内块级） block（块级）

可以将不同类型的元素进行转换：
eg：将块级元素转换为行内元素 display:inline;
二、 居中、缩进等显示汇总

text-align：元素中的文本内容，相对于当前元素水平居中：text-align:center

line-height:元素中的内容，相对于当前元素垂直居中： line-height:元素的高度

vertical-align:图片（行内块级元素）与右边并排的文本对齐方式top/ middle/bottom

text-decoration:对文本中线条装饰的设置，
none 没有线条
overline 上面的线条
underline 下面的线条（链接默认的样式）
line-through 从文字中穿过

margin:0 auto; 水平方向使用margin:0 auto;
----------当前元素相对于父元素水平居中

三、background背景

background-color:背景样色
background-image:背景图片
eg: background-image:url(“image/aaa.png”)
background-image:url(‘image/aaa.png’)
background-repeat:背景的重复方式
repeat:垂直和水平方向都重复—默认
no-repeat: 垂直和水平方向都不重复
repeat-x: 水平方向重复
repea-y: 垂直方向重复

background-position:水平位置 垂直位置 -------（背景的位置）
水平：left/center/right
垂直：top/center/bottom
Eg: background-position: left top;------图片在左上角（默认）

也可以使用具体的移动像素设置：
Eg: background-position: -150px 200px;------图片想左移动150px并向下移动200px

四、盒模型

1、padding:内边距----快速写法

padding:50px 100px 150px 200px;/上 右 下 左/
padding:50px 100px 150px;/上 左右 下/
padding:50px 100px;/*上下 左右 */
padding:50px;/上下左右/
每一个外边距分开设置：
padding-left: 20px;
padding-right: 40px;
padding-top: 60px;
padding-bottom: 80px;
2、边框border----快速写法

3、外边距margin----快速写法
/* margin:100px;*//上下左右/
margin:100px 200px;/上下 左右/
margin:100px 200px 300px;/上 左右 下/
margin:100px 200px 300px 400px;/上 右 下 左/

Margin-top
Margin-left
Margin-right
Margin-bottom

4、外边距的合并问题
当上面的元素有向下的外边距，下边的元素有向上的外边距，如何计算两个元素之间外边的总和：
margin-bottom>margin-top?margin-bottom:margin-top
100>120?100:120

上述合并问题只针对上下垂直的情况，左右水平方向不成立

6、 margin-top的传递问题
当子元素设置了margin-top时，会将父元素往下托拽

同时满足三个条件，才会有margin-top的传递问题发生
1、 子元素上面没有同级的元素（文本内容）-----没有哥哥
2、 父元素没有设置上内边距 padding-top
3、 父元素没有设置上边框 border-top

如何解决margin-top的传递问题
上面的三个条件只要打破了一个，就不会出现传递现象

7、Margin:auto 水平居中 与 text-align:center水平居中的区别