一.外边距重叠
两个相邻盒子的外边距发生重叠时,外边距大的覆盖外边距小的盒子。
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="" 文字描述.