css浮动及其选择器

标签嵌套的规则

• 大标签嵌套小标签

<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是否正确，对象是否正确
• 前面是否出现错误（比如多了一个{）
• 漂浮漂不上去