学习前端的第七天

今天主要学的是css的浮动，以下是我做的笔记：

1、vertical-align
    在垂直方向上的对齐方式。（只针对内联元素或者表单）
    vertical-align：baseline | sub | super |top | bottom | middle | text-top | text-bottom | 具体的值
    扩展：一个元素垂直方向上居中
    display：table-cell；
    vertical-align:middle；

2、盒子模型
   2.1 概念
       css 中非常常用的 思维模型，可以把每一个标签（元素）看做是一个矩形的盒子一个页面就是由各个盒子通过不同的排列方式进行堆叠，盒子之间彼此影响。

    2.2 分类
        标准盒子模型（w3c）

        怪异盒子模型（IE盒子模型）

    2.3 标准盒子模型（w3c）
        content（内容）：展示内容的区域
        大小由width与height决定。

        padding（内填充）：介于内容与边框之间，颜色与内容颜色一样。

        border（边框）：单独设置颜色

        margin（外填充）：透明的区域

        重点：盒子实际大小。
        宽度 = width + padding * 2 + padding * 2 + margin * 2
        高度 = height + padding * 2 + padding * 2 + margin * 2
    2.4 padding 的写法
        padding： 四边的大小
        padding-left
        padding-toppadding-bottom

        padding：10px 20x；（上下padding为10px，左右为20px）
        padding：10px 20px 30px ；（上为10px，左右为20px，下为30px）
        padding：10px 20px 30px 40px；（上右下左分别为10px，20px，30px，40px）
    2.5 margin 的问题
        margin 重叠问题
        如果两个元素在垂直方向上有margin，则两个元素之间的距离取margin最大值。

        父子嵌套的时候，子元素设置margin-top，并且父子元素之间没有其他的元素，浏览器会把子元素的margin-top 作用于父元素。
             * 父元素设置浮动；
             * 父元素设置padding-top：1px；
             * 父元素设置border；
             * 父元素设置display：inline-block；（同时拥有块级元素与内联元素的特性）
             * 父元素设置overflow 为 (hidden) 非visible；（推荐）

             margin 双倍边距bug：
             在IE6下，如果设置了左浮动，并且也设置了margin-left，那么实现margin效果是两倍margin-left的值
             解决办法：设置display：inline
3、overflow：当超出元素范围后，应如何处理。

     visible：超出后依然显示；
     hidden：超出部分会被隐藏；
     scoll：无论是否超出都会显示滚动条，超出的内容通过滚动条查看
     auto：内容超出后才会出现滚动条
4、display
    用于决定当前元素表现的特性
    inline：
         当前元素表现为内联标签的特性
         * 无法设置宽高，大小由内容决定
         * 可以设置水平方向margin、padding、border；
         * 垂直方向padding、border会遮挡其他元素
    block：
         块级标签的特性
         宽度默认父元素100%独占一行

    inline-block：
         * 不会独占一行
         * 可以设置宽高、margin、padding、border
    table-cell：
         单元格特性  
5、浮动
    5.1 文档流
         标准文档流
         块级元素从上往下排列，内联从左往右排列。

         浮动

         定位
    
    5.2 浮动定义
         浮动可以设置元素在水平方向上向左或者向右排列，直到遇到外边缘或者碰到包含框为之。

    5.3 语法
         float：left | right
    5.4 浮动的影响
         * 会改变当前块级元素独占一行的特性
         * 浮动元素不会影响之前的元素，但是会影响后面的元素
         * 如果当前块级元素没有设置宽度，设置浮动后会将宽度压缩到内容的大小
         * 内联元素浮动之后，可以设置宽高。

         * 浮动元素会脱离文档流
         * 导致父元素高度崩塌
    5.5 清楚浮动
         clear：left | right | both；

    5.6 清楚浮动对父元素的影响：
         * 添加一个空标签，设置clear：left | right | both；
         * 给父元素直接设置高度：适用于知道子元素的高度
         * 父元素也设置浮动：
         * 父元素设置 overflow：hidden | auto；
         * 伪元素方案：（最好用的清楚浮动方法）
        .clear::before,
        .clear::after{
            content: '';
            display: table;
        }
        .clear::after{
            clear: both;
        }
6、水平居中块级元素
     前提：
     块级元素
     必须设置宽度
     margin-left:auto；
     margin-right：auto；
      
     简写：margin： 0 auto；