第四天：外边距重叠、css背景设置、float浮动、伪元素

一.外边距重叠

两个相邻盒子的外边距发生重叠时，外边距大的覆盖外边距小的盒子。

margin 可以设置负数，表现为正数的相反操作。比如：margin-top正数为下，负数为上。 

二.css背景设置

transparent：透明设置 如：background-color：transparent；

（1）背景设置  background :

background-color:  背景颜色设置；

background-image: url（""）  背景图片设置；

background-repeat：repeat-x | repeat-y |

no repeat    背景平铺设置；

background-position: x y;  背景定位设置

background-size:  背景尺寸大小设置；

（2）颜色单位：英语单词  16进制  rgb()   hsl()    transparent；

background-color: red；

background-image:url("https://photo.tuchong.com/395783/g/20329210.jpg");

background-repeat: no-repeat；

可以设置像素(支持正负数)，可以设置方向和百分比(left=0%,center=50%,right=100%)

background-position: 50%;

（3）背景简写形式 官方没有提供固定顺序

background:  background-color   background-image   background-position   background-repeat;

如  background: red  url("https://photo.tuchong.com/395783/g/20329210.jpg")  center  center   no-repeat ;

（4）多背景,多个属性用逗号隔开

backgroundimage:  url("https://photo.tuchong.com/395783/g/20329210.jpg") ,    url("http://tse1.mm.bing.net/thid=OIP.IbYQdbyj5ZaYJvDLgS4oYAEYEY&w=300&h=300&p=0&pid=1.7") ,url("");

background-position: 0 0 , 100% 0;

（5）background-size:width height | cover |contain;

background-size：cover（contain）;

~ contain:充满框架，直到碰到宽或高的边界停止。

~ cover：充满整个框架，会随框架的增缩而自适应

三.float浮动(float:  left | right | none;)

1.float设计之初是用作文字环绕；

2.设置float的元素  会脱离文档流，往设置的方向进行浮动，直到遇到父级的边界或者其他的浮动元素 就会停止。 

（1）浮动的元素会脱离文档流。

（2）浮动的元素撑不开父级的高度。

3.如何解决浮动产生的负面影响

（1）给浮动元素的父级设置高度

（2）清除浮动 （clear: left  |  right  |  both;）

       只能清除位于其前面的浮动。

例如：.clearfix{

/*兼容IE6/7*/

zoom:1;

}

.clearfix::after{

 content:" ";

 display: block;

 height:0;

clear:both;

}

4.（1）float属性对块级元素的影响

设置浮动之后，块级元素的宽度不再跟随父级宽度，而是内容决定(内容撑开宽度) ；

（2）float元素对行级元素的影响

可以设置尺寸以及盒模型。

四.伪元素

（1）/*::before 前置伪元素*/

div::before{

/*必须*/

content:"123";

/*必须*/

display: block;

width:50px;

height:50px;

background:blue;

}

（2）/*::after 后置伪元素*/

div::after{

content:"123";

display: block;

width:50px;

height:50px;

background:pink;

}

拓展：

1. p 标签 段落 双标签  块级

2. img标签 图片标签 单标签 比较特殊，行级但是却可以设置尺寸

<img src=" " alt=" "/>

src="" 图片地址;                alt="" 文字描述.