1、CSS的优先级
①通配和继承:0000
②元素选择器:0001
③类、伪类: 0010
④ID选择器: 0100
⑤行内样式: 1000
(加了 ‘!important’ 的优先级为无穷大)
2、外边距塌陷(外边距合并)
①、上下元素之间的外边距塌陷
当一个元素出现在另外一个元素的上面时,第一个元素的下外边距与第二个元素的上外边距将发生合并。合并的结果是外边距变成上述两者中大的一个。
②包含元素之间的外边距塌陷
当一个元素包含在另一个元素中,父元素没有内边距和边框且子元素没有外边距时,父元素与子元素的上外边距(或下外边距)会发生合并。
解决外边距塌陷的办法:
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距
- 可以为父元素添加overflow:hidden。
3、box-shadow属性的参数问题
box-shadow :h-shadow v-shadow [blur] [spread] [color] [inset]
前两个参数必需、后四个为可选
第一个/第二个参数分别为水平阴影位置、垂直阴影位置;
第三个参数用于决定模糊距离
第四个参数用于指定阴影尺寸
第五个参数用于指定阴影颜色
第六个参数用于指定阴影的内外部(inset内部、outset外部)默认为inset
4、浮动
特性:浮动元素不保留原来位置,脱离标准流,具有行内块元素特性。
浮动产生的问题:
下面展示一些 产生了浮动问题的代码
。
// A code block
var foo = 'bar';
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.clear {
clear: both;
}
.father {
width: 500px;
border: 1px solid red;
}
.son1 {
float: left;
width: 100px;
height: 100px;
border: 1px solid blue;
}
.son2 {
float: left;
width: 200px;
height: 200px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div style="background-color: pink;">后面的内容</div>
</body>
</html>
从上图可以看到,当父级盒子没有设置高度、子盒子浮动了、就会影响到后面的内容布局。此时就需要用到清除浮动。
清除浮动方法:
①额外标签法
在父元素father后面添加一个标签(必须是块级的)给该添加的标签加上上述代码中的clear这个类。
下面展示 额外标签法清除浮动
。
// A code block
var foo = 'bar';
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="clear">这是用来清除浮动的标签</div>
</div>
<div style="background-color: pink;">后面的内容</div>
加上清除浮动的标签后运行结果为:
可以看到,加了清除浮动的标签后,“后面的内容”能正确的布局。
②给父级元素添加overflow属性
在father选择器里添加overflow :hidden;
③给父级元素添加after伪元素
下面展示一些 after伪元素清除浮动
。
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
<body>
<div class="father clearfix">
<div class="son1"></div>
<div class="son2"></div>
<!--<div class="clear">这是用来清除浮动的额外标签</div>-->
</div>
<div style="background-color: pink;">后面的内容</div>
</body>
④添加双伪元素
下面展示一些 双伪元素清除浮动
。
.clearfix2:after,.clearfix2:before {
content: "";
display: table;
}
.clearfix2:after {
clear: both;
}
.clearfix2 { /*解决低版本浏览器的适配问题*/
*zoom: 1;
}
<body>
<div class="father clearfix2">
<div class="son1"></div>
<div class="son2"></div>
<!--<div class="clear">这是用来清除浮动的额外标签</div>-->
</div>
<div style="background-color: pink;">后面的内容</div>
</body>