day31-总结（css布局）

css中的布局

css选择器的权重

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

display属性

HTML中标签分为块和行内
CSS中标签分为3类：块，行内块，行内(block, inline-block, inline)
(在标准流内)
block:一个占一行，默认宽度100%，高度默认根据情况确定；直接设置宽高有效
inline-block:一行可以有多个，默认宽高是内容的宽高;可以直接设置宽高有效，右边有默认的间隙，无法消除
inline:一行可以有多个，默认宽高是内容的宽高;设置宽高无效
通过改变标签的display的值，可以让一个标签在块，行内块和行内之间任意切换

浮动float

标准流：
1.块标签一个占一行，从上往下布局
2.行内标签一行可以显示多个，从左往右布局，遇到边界自动换行

脱流：浮动，定位
1.浮动，让竖着显示的标签横着显示
float：left和right

注意：1.如果要使用浮动，同一级的标签都要浮动
2.如果父标签浮动，那么子标签的位置会跟着一起动

文字环绕

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

    
        
        
        
    
    
        

        

            阿诗丹顿多多多多多多多多
        
    

清除浮动

清除浮动：是指清除因为浮动而产生的问题(高度塌陷)

如何清除浮动？
a.添加空的div

在父标签(高度塌陷的标签)的最后添加一个空div，并且设置div的样式表：clear：both
可能会产生大量的额外的代码
b.设置overflow
在父标签中设置样式表的overflow的值为hidden
c.万年清除法
div:after {display:block;clear:both;content:"";visibility:hidden;height:0;}
div {zoom:1;}

定位

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

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

盒子模型

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

    
        
        
        
    
    
        

            abc
        
    

居中

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

    
        
        
        
    
    
        

            
床前明月光