CSS笔记04

CSS笔记04

css布局三种机制：

1、普通流normal flow：
元素从上到下，从左到右。

2、浮动 float：
脱离标准流,飘在普通流上边，不占位置，只能在水平线上浮动和对齐

    .class{
        float:none/left/right;
    }

• navigation通常用ul和li来制作。

父子级的盒子浮动仍受padding和border的影响

标准流的盒子自己独占一行，也不会被下面浮动的盒子所覆盖！上为浮则下上，下为浮则上不变，若浮动影响布局，则对于影响布局的浮动盒子，设置父盒子装起来。

浮动只会影响当前的和后面的盒子，不会影响之前的，转为浮动的盒子自动转为行内块（若不设置宽和高，则取决于内容的大小，空内容则不显示）~~

很多情况父级不方便给高度

清除浮动（的影响）：解决父级元素高度为0的问题

    选择器{
        clear:both;
    }

清除浮动的四种方法：

1、额外标签法
在最后一个浮动的元素后面添加一个新的标签

    <style>
    .clear{
        clear: both;
    }
    </style>

    <div class="father">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <!-- 添加 -->
        <div class="clear"></div>
    </div>

2、overflow法
给父级添加 overflow 为hidden/auto/scroll

    <style>
    .father{
        ……
        overflow: hidden;
    }
    </style>

3、after伪元素方法

    <style>
    .clearfix:after{
        content: "";
        display: block;
        visibility: hidden;;
        clear: both;
        height: 0px;
    }
    .clearfix{
        *zoom:1;
    }
    </style>
    <!-- 谁清除浮动谁调用 -->
    <div class="father clearfix">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>

4、双伪元素法

    <style>
    .clearfix:before,.clearfix:after { 
        content:"";
        display:table; 
    }
    .clearfix:after {
        clear:both;
    }
    .clearfix {
        *zoom:1;
    }
    </style>

页面布局原则：
1.确定可视区（版心）
2.先上后下，先左后右 “平时只看行”

表单类默认有边框

input，button{
    border: 0px ;
}

错行需要检查浮动失效（浮动自动转为行内块）

父级盒子如果也是浮动，可以不给宽度，其宽度会根据包含的子级内容自动调整。

图片和一行文字居中：
vertic-align: middle ;