自我学习前端第三天--选择器和浮动

1、第二天内容的补充：span标签

span标签
文本内容标签本身没有任何的效果是用来插入更改部分文本的css样式
<span></span>

2、选择器

标签名 元素选择器，标记选择器、类型选择器

<div></div>             css   div{}   网页里所有的div标签

id选择器

 <div id="box"></div>   css  #box{}  id名为box的内容，唯一性，名字不能重复使用

class选择器（类选择器）

<div class="box"></div> css  .box{} 选中class名为box的内容，可以重复设置

高级用法：一个class可以设置多个值，用空格隔开

通配符选择器

 css   *      网页内的所有内容

   *{
        margin:0px;
        padding:0px;
        /* 设置内容的外边距和内边距都清零 */
    }

包含选择器

        父子选择器（通过父元素选择子元素）
            父元素 >  子元素

        后代选择器（只要是包含关系就都能选中）
            祖先元素   后代元素

伪类选择器

    设置内容在不同的状态下选择内容

        a:link   设置内容访问前的状态
        a:visited 设置内容访问后的状态
        a:hover   设置内容鼠标移入的状态
        a:active  设置鼠标按下时的状态（鼠标激活的状态）

3、选择器的权重

内联样式表 1000  》   id  0100  》    class  0010   》   标记选择器  0001   》  通配符选择器 0000

包含选择器的权重
    包含选择器的权重是计算所有选择器的权重值和


 群组选择器是不会造成权重冲突


伪类选择器   10

总结：

1 、css样式冲突的时候，谁的权重高设置谁
2、如果权重值相同，跟顺序有关，谁在后面设置谁
3、css的继承（就近原则）
        自己的样式  》  父元素的样式   》   祖孙元素的样式

4、浮动

float:
        left
        right
        none


1、浮动的图文环绕效果
2、让垂直的内容水平排列



清除浮动有两种作用
1：套一个父元素设置高度隔开
2：
clear   清除浮动 （给受影响的盒子设置清除浮动）
        left   清除左浮动
        right  清除有浮动
        none   不清除
        both   清除两边浮动