标签嵌套的规则
- 大标签嵌套小标签
<h1><a href=""><img src="" alt=""></a></h1>
- 单标签不能嵌套
- p标签内不能套大标签div,p,h1
- 小标签之间可以相互嵌套,但a标签之间不能相互嵌套
- 特例,a标签可以嵌套大标签(当多个块跳转到同一页面时使用)
<a><div></div><p></p></a>(当多个块跳转到同一页面时使用
css选择器
<div class="a" id="aa"><span></span></div>
div{}标签选择器 权重:1
.a{}类选择器 权重:10
---<div class="b1 b11"></div>可以有多个类名
#aa{}id选择器 权重:100 id名不可以重复
!important 权重:1000
.a span{}后代选择器 权重:10+1
*{
margin:0;
padding:0;
}
*通配符选择器(所有都适用) 权重:0 0 0 0
class命名规则:必须以字母开头,不能用数字和其他特殊字符开头,名字可以重复
css权重
权重:后面的代码会覆盖前面的代码(前提在一个选择器下,定位平等)
若地位不等,想强行覆盖,用!important来提升优先级
权重的表示 0 0 0 0
行间样式的权重最高(但次于!important)不建议使用
css浮动属性float
浮动可以理解为让某个div脱离标准流,漂浮在标准流之上,和标准流不是一个层次,标准流是不管盒子宽度如何,自下而上排列
float:left/right/none
既能实现盒子的左右排列,也可以使小标签的宽,高起作用,所有的标签都可以当做盒子,但span标签宽,高,margin对其无效,所以小标签(span,a)不适合当作容器使用,加上浮动其可以起作用,一般使用div当做大的容器
display:block;(独占一行,可以使小标签相当于大标签)
清除浮动:在下面写一个空盒子<div style="clear:both;"></div>(不是把浮动清除,而是清除浮动带来的影响)
清除浮动的关键字是clear,语法:
- clear : none | left | right | both
- none : 默认值。允许两边都可以有浮动对象
- left : 不允许左边有浮动对象
- right : 不允许右边有浮动对象
- both : 不允许有浮动对象
css失效时可能的错误
- 整个css失效:css创建可能不正确
- 当某段代码不正确:class是否正确,对象是否正确
- 前面是否出现错误(比如多了一个{)
- 漂浮漂不上去