CSS属性

1.选择器的权重

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

谁的权重的值大，谁的优先级就高

    
    
        
        
        
    
    
        百度一下
    

image.png

2.浮动

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

脱流： 浮动、定位
1.浮动：就是让竖着现实的标签横着来，块的默认宽度是内容的宽度
float： left和right

注意：
1.如果要使用浮动，同一级的全部标签都要一起全部浮动
2.如果父标签浮动，子标签的位置也会跟着一起动
3.布局的基本顺序：从上往下，从左往右

image.png

3.文字环绕

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

    
        
        
        
        
    
    
        

            
        
        

            wqheioqwueiou 
wqaoiasbrdfaslfdjasjdopawujndj
xzfhasnfasjdoasioiawio
ujaoisuejaweeodaioepiaopsejaj
dajldajpdoiaq
wewewqioasdajkdlahweqowiuaoeqweqweqweqweqwr
wqrqwrqwrqwrdfhgjsrtyfdasfaservraeghasdfcrw
        
        
    

image.png

4.清除浮动

1.清除浮动：是指清楚应为浮动而产生的问题（高度塌陷） ---问题不是什么时候都产生的

2.怎么去除
a.添加空白div
在父标签（高度塌陷的标签）的最后添加一个空的div，并且设置这个div的样式表：clear:both
问题：可能会产生大量的额外代码
b.设置overflow
在父标签中设置样式表的overflow的值为hidden

image.png

5.disply

1.HTML中标签分为块和行内

2.CSS中中标签分为3类：块，行内快，行内（display）
（在标准流中）
inline-block标签（行内块）：在右边会有一个空隙，目前没有办法清除），不能和其他标签无缝连接
block：块（一个占一行，默认宽度是100%，高度根据内容来确定；直接设置宽高有效）
inline-block：行内块(一行可以有多个，默认高度是内容的宽高；直接设置宽高有效)
inline：行内（一行可以有多个，默认高度是内容的宽高；直接设置宽高无效）

转换就直接在标签的样式表中直接设置disply的值为相应的值（改变标签的性质）块、行内块、行内之间切换

    
        
        
        
        
    
    
        
            wyeiqohj
        
        
            wqewr
        
        

            aaa 
bbb
        
    

image.png

6.定位

1.距离
top: 标签顶部距离其它标签的位置
bottom：标签的底部距离其它标签的距离
left：标签的左边距离其它标签的距离
right：标签的右边距离其它标签的距离

2.position
想要设置标签的值top\bottom\left\right的值有效，必须设置标签的参考对象
initial(默认值)没有参考对象
absolute:相对第一个position的值是非static非initial的父标签进行定位
relative：正常位置定位（按照标准流定位）
fixed:相对于浏览器定位
sticky:不滚动的时候按照标准流定位，滚动的时候相对于浏览器定位

image.png

7.relative练习

image.png

8.盒子模型

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

    
        
        
        
        
    
    
        

            abc
        
        

            123
        
        
    

image.png

9.居中

1.垂直居中
a.固定标签高度
b.设置属性line-height的值和高度一样
2.水平居中
text-align: center;

    
        
        
        
        
    
    
        

            
坚持比努力更可拍
        
        
    

image.png