day30 - CSS属性

一、选择器权重

• 类型选择器（元素选择器）----- 0001
• class选择器 ------ 0010
• id选择器 ----- 0100
• 伪类选择器 ---- 0001
• 层级（包含）选择器 ---- 多个选择器的权重之和
• 群组选择器 ---- 分开看每个选择器的权重

权重高，优先级就高

二、浮动

标准流

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

脱流

• 浮动
• 定位

1. 定义：

就是让竖着显示的标签横着来显示，块的默认宽度是内容的宽度

2. 形式：

float：left 和 right

3. 注意事项

• 如果要使用浮动，同一级的所有标签都要浮动
• 如果父标签浮动，子标签的位置会跟着浮动
• 布局基本顺序：从上往下，从左往右

4. 文字环绕

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

    
        
        
        
    
    
        
            
        

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

三、定位

1. 距离

• top：标签顶部距离其他标签的位置
• bottom：标签底部距离其他标签的位置
• left：标签左边距离其他标签的位置
• right：标签右边距离其他标签的位置

2. position

• absolute: 相对第一个position的值是非static,非initial的父标签进行定位
• relative: 正常位置定位（按标准流定位）
• fixed: 相对于浏览器定位
• sticky: 不滚动的时候按标准流布局，滚动的时候相对浏览器定位

四、清除浮动

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;}

五、display属性

1.HTML中标签分为块和行内
2.CSS中中标签分为3类：块、行内块、行内（display）（在标准流中）

• block:块（一个占一行，默认宽度是100%，高度默认根据内容来确定；直接设置宽高有效）
• inline-block:行内块(一行可以有多个，默认宽高是内容的宽高；直接设置宽高有效)
• inline:行内(一行可以有多个，默认宽高是内容的宽高；设置宽高无效)

通过改变标签的display的值，可以让一个标签在块、行内块个行内之间任意切换

注意：inline-block标签的右边默认都有一个间隙，不能和其他标签无缝连接(这个间隙目前没有办法清除)

六、盒子模型

• 每一个标签都是由4个部分组成：

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

七、居中

常用垂直居中方法 --- 戳我
常用水平居中方法 --- 戳我