day3-css核心属性

01-选择器的优先级

每种选择器都有权重值，权重值越大优先级越高
权重值一样的时候谁后写谁高

标签选择器：0001（1）
class选择器：0010（2）
id选择器：0100（4）
群组选择：单独的看每个选择器的权重
后代选择器：每个但单独选择器的权重和

不管什么情况，内联样式表优先级永远最高

    
        
        
    
    
        

            

                百度
            
        
    

02-标准流

css用来对内容进行布局和设置样式
1.标准流：在没有写样式的时候，默认的布局方式，就是标准流
在标准流中不同类型的标签布局方式不一样
a.如果是块级标签，一个标签占一行，默认宽度是父级标签的宽度，默认高度是内容的高度，
并且设置宽度和高度有效
b.如果是行内标签，一行可以显示多个，默认高度和宽度都是内容的宽度和高度，设置宽高无效
c.如果是行内块标签，一行可以显示多个，默认高度和宽度都是内容的宽度和高度，设置宽度和高度有效

2.标签的默认分组
块级标签：h1-h6，p，table，ul，ol，dl，li，div...
行内标签：font，input，img，a，select，textarea，span...

    
        
        
    
    
        
        

            

                
            1
            
1
            
1
            
1
1
1
        
    

03-display属性

display属性的值代表的是标签的类型：
1.block：快标签
2.inline：行内
3.inline-block：行内块
默认情况下，标签只有行内和块标签，没有行内块的，但可以通过修改display属性来修改

注意：使用行内块的时候，有一个坑，行内块到其他标签的时候有一个间隙，这个间隙无法消除
所以不要用

    
        
        
    
    
        
        
段落1
        
段落2
        
段落2
        12
    
    
        
1
        
1
        
        
1
        
1
        
1
    

04-浮动

浮动（float）
left：左浮动 - 先上再左
right：右浮动 - 先上再右
1.浮动会脱标 - 标准流的布局方式无效;所有标签都会一行显示多个，
默认大小是内容大小，设置宽高有效

2.浮动

布局原则，努力的向左上角靠

    
        
        
    
    
        
1
        
1
    

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



    
        
        
    
    
        
              
        
        

            hello hellohello hellohello hello5和史蒂夫但事实上才二手房hi维护费
        
        
    

06-清除浮动

1.高度塌陷
父标签不浮动，子标签浮动，就会出现高度塌陷问题

2.清除浮动
a.添加空盒子 - 在高度塌陷的父标签的后面添加一个空的div，并且设置style的clear属性为both
b.overflow - 选中高度塌陷的标签，设置样式的overflow的值为hidden
c.万能清除法 - id:after{display:block;content:"";visibility:hidden;....}
·

07-定位

1.定位属性
left - 左间距
right - 右间距
top - 上间距
bottom - 下间距

2.position属性 - 设置标签定位时候的参考对象
initial/static（默认值） - 不相对任何对象定位
absolute - 相对于第一个非initial/static的父标签进行定位
relative - 相对当前标签在标准流中的位置定位
（一般把一个标签的position设为relative是为了让标签相对自己定位）
fixed - 相对浏览器定位
sticky - 当网页中内容超过一屏，相对浏览器定位，没有超过就相对标准流的位置定位
一般只针对最后一个标签

注意：定位也会让标签脱流 - 不管怎么脱，标签都是按脱流的方式进行布局
（一行显示多个，设置宽高有效）

08-盒子模型

html中在网页所有可见的标签都是盒子模型，有固定的结构；
所有的标签都是由：内容、padding、border、margin组成，其中margin不可见
其他都是可见。
1.内容(content) - a.设置宽高的值就是在设置内容的大小；
b.标签中添加的内容也是添加到content里面的
， c.设置背景颜色，会作用于content

2.padding - a.通过padding相关属性设置padding大小（4个方向）
b.设置背景颜色，也会作用于padding

3.border（边框） - a.通过border相关属性设置border的大小
b.边框的大小需要单独设置

4.margin - a.通过margin相关属性来设置大小，
b.不可见但是占位