day23-CSS属性

1. 选择器的权重

选择器的权重：
类型选择(元素选择器)：0001
class选择器：0010
id选择器：0100
伪类选择器:0001
层级(包含)选择器：多个选择器的权重之和
群组选择器: 分开看每个选择器的权重
谁的权重的值大，谁的优先级就高

    
    
        
        
        
    
    
        百度一下
    

2. 浮动

1. 标准流：块标签一个占一行，从上往下布局。默认宽度是100%
   行内标签一行可以显示多个，从左往右布局，知道遇到边界就自动换行

2. 脱流：浮动、定位
   1.浮动：就是让竖着显示的标签横着来,块的默认宽度是内容的宽度
   float: left和right
   注意:1.如果要使用浮动，那么同一级的所有的标签都要浮动
   2.如果父标签浮动，那么子标签的位置会跟着一起动
   3.布局基本顺序：从上往下，从左往右

    
        
        
        
    
    
        
        

        

        

            
依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私
        
        

            阿是否可江安河上的发
        
        

    

3. 文字环绕

文字环绕: 被文字环绕的标签浮动，文字标签不浮动

    
        
        
        
    
    
        
            
        

            方递费加哈萨克货到付款撒都
分开哈萨克东方航
空撒货到付款阿士大夫
看撒谎快递费开始浇返回
        
    

4. 清除浮动

1. 清除浮动：是指清除因为浮动而产生的问题(高度塌陷) --- 问题不是什么时候都会产生的
2. 怎么清除浮动？
   a.添加空的div：
   在父标签(高度塌陷的标签)的最后添加一个空的div,并且设置这div的样式表: clear:both
   （可能会产生大量的额外的代码）
   b.设置overflow：
   在父标签中设置样式表的overflow的值为hidden
   c.after{display:block;clear:both;content:".";visibility:hidden;height:0;} clear{zoom:1;}

5. display属性

1. HTML中标签分为块和行内
2. CSS中中标签分为3类：块、行内块、行内（display）
   （在标准流中）
   block:块（一个占一行，默认宽度是100%，高度默认根据内容来确定；直接设置宽高有效）
   inline-block:行内块(一行可以有多个，默认宽高是内容的宽高；直接设置宽高有效)
   inline:行内(一行可以有多个，默认宽高是内容的宽高；设置宽高无效)
   通过改变标签的display的值，可以让一个标签在块、行内块个行内之间任意切换
   注意：inline-block标签的右边默认都有一个间隙，不能和其他标签无缝连接(这个间隙目前没有办法清除)

    
        
        
        
    
    
        
        
            ABC拿到的
        
        
            ABC拿到的
        
        
        

            aaa     

            bbb
        
        
            ajssjjdh
        
        
    

6. 定位

定位

1. 距离
   top: 标签顶部距离其他标签的位置
   bottom: 标签的底部距离其他标签的位置
   left: 标签的左边距离其他标签的位置
   right: 标签的右边到其他标签的位置
2. position
   想要设置标签的top,bottom,left,right的值有效，必须设置标签的参考方法
   --- initial:（默认值）没有参考对象
   absolute: 相对第一个position的值是非static,非initial的父标签进行定位
   relative: 正常位置定位（按标准流定位）
   fixed: 相对于浏览器定位
   sticky: 不滚动的时候按标准流布局，滚动的时候相对浏览器定位

7. relative练习

8. 盒子模型

每一个标签都是由4个部分组成：
1. 内容：显示标签内容的部分，可见的（设置宽和高的值，就是设置内容部分的大小）
2. 内边距(padding):可见的，不能显示内容（通过设置padding来改变其值，默认是0）
3. 边框(border):可见的，如果有内边距边框就显示在内边距上，否则显示在内容上
4. 外边距(margin):不可见的，但是会占据浏览器的空间

    
        
        
        
        
        
    
    
        
        

            abc
        
        

            
        
    

9. 居中

1. 垂直居中
   a.固定标签高度
   b.设置line-height的值和高度一样

    
        
        
        
        
    
    
        
        

            

                
床前明月光,疑是地上霜
            
            
        
        
    

作业：

    
        
        
        
    
    
        
        

        
————    居 家 优 品     ————
        


        

        
        

            

                
            
        
        
        

            
            

                
家电馆
                
                家电好物节
            
            
            
            
            
        
        
        

            
            

                
我爱我家
                
                品质生活家
            
            
            
            
            
        
        
        
        
        

        
        

            

                
            
        
        
        

            
            

                
家电馆
                
                家电好物节
            
            
            
            
            
        
        
        

            
            

                
我爱我家
                
                品质生活家
            
            
            
            
            
        
        

        
        

            

                
            
        
        
        

            
            

                
家电馆
                
                家电好物节
            
            
            
            
            
        
        
        

            
            

                
我爱我家
                
                品质生活家
            
            
            
            
            
        
        

        
        

            

                
            
        
        
        

            
            

                
家电馆
                
                家电好物节
            
            
            
            
            
        
        
        

            
            

                
我爱我家
                
                品质生活家
            
            
            
            
            
        
        
        
        
        

            
            
            
            
            
            
            
        
    

网页效果：

1.jpg