0904笔记--浮动

“`
1.css的三大特性
层叠性: 样式会覆盖
继承性: 少写属性(字体属性,color line-height text-align)
权重优先级: 权重大的选择器优先显示.
标签选择器 < 类选择器
1 10
注意:1.继承权重为0
权重不够的时候:带父类

2.盒子模型
    border:1px solid red;  
    padding: 10px;    padding:20px 40px; 
    margin:0 auto;   margin:10px auto 0; 

    问题:
        border和padding会撑大盒子

        margin会出现合并和塌陷的现象:  overflow:hidden; padding border

-----------------------------------------------------------------------
0.其他知识
    border-radius:50%;  50%表示圆形( 高或者宽的一半)
    border-radius:10px;

    box-shadow:0 0 0 0 red; (4+1)

1.浮动
    浮动的作用: 让盒子在一行上显示.
    浮动的单词: float:left;
                float:right;
    浮动的特性: float = 行内块  + 漂浮 + 快速左右对齐

    问题:浮动元素只会在原位置漂浮,不会影响上面元素,但是会影响下面元素.

    浮动的应用: 
            1.左右布局
            2.左中右布局
            3.等均分布局


    浮动的问题:
            1.浮动元素漂浮,导致父元素没有高.会让下面的盒子被盖住.

            将来网页中会出现三种情况盒子的高度是不能确定的?
                有动效
                数据可变
                商品数据参数可变

            矛盾: 能给高,但是又不能给高.
            解决办法: 高度不固定,但是又能自动检测高度(清除浮动)




2.清除浮动
    什么时候需要清除浮动?
        希望高度能自动变化的时候给清除浮动.
    额外标签法
    overflow:hidden:给父元素
    单伪元素清除
    双伪元素清除(需要给父元素添加clearfix类名)


3.网页中导航的实现方法
    1.网页中主导航的写法标签格式:  ul > li > a
    2.导航的宽度实现: padding实现导航文字距离
    3.导航的浮动,一定是给li

    如果有链接区域,有背景颜色,有边框 可以判断是用padding还是margin
    1.以谁为参考系(中心标签)
    2.选择对应的margin和padding是否满足自己的效果要求.

“`u