css浮动及其选择器

╰半夏微凉° 2022-12-25 13:54 92阅读 0赞

### 标签嵌套的规则 ###

*  大标签嵌套小标签

*  单标签不能嵌套
 *  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>（不是把浮动清除，而是清除浮动带来的影响）