H5元素类型的转换 及定位的属性笔记

  
第一节：元素类型的转换：

       1、display属性：
            属性值：
                block
                inline
                none
        a、大部分块状元素默认的display的值block,其中li默认的值 list-item (列表元素)

        b、大部分内联元素默认的display的值inline,其中input默认的值 inline-block(行内块元素)

       2、内联元素里面特殊的一个：行内块元素（内联块元素）
            特点：
                 1: 可以设置宽高
                 2：在一行内逐个显示
                 3：当前元素的display的值为inlin-block 能支持vertical-align属性

       3、vertical-algin:; 垂直对齐。
             top
             bottom
            middle
            baseline

       4、让一个元素在父元素里面左右上下居中。
            1:给父元素添加text-align:center (左右居中)
           2:给当前元素添加
                                display:inline-block;
                    vertical-align:middle;
           3:在当前元素后面（不要回车），添加一个空的span
                   给span设置样式：
                        display:inline-block;
                        width:0;
                         height:100%;
                        vertical-align:middle;

       5、行内块元素：
            a、input
            b、img当作行内块使用 -> 特殊的存在：拥有行内块的特点。
                  img默认情况下：在浏览器中display值为inline

    第二节：标签的嵌套规则：

        1：尽量让块状元素作为父元素（容器）存在
        2: 内联元素的子元素尽量也是内联元素
        3: p标签中不能出现h1 - h6
        4：p标签 h1 - h6  不能互相嵌套

       (添加了解面试题）
       图片默认的display的值为inline 为什么图片能直接添加大小？？
               答:
            从另一个角度对所有的标签进行分类。
             分为：置换元素与非置换元素
        a:置换元素：
                典型的置换元素：img\input 依赖标签的属性或者元素自身类型，来决定当前元素在页面中显示的状态。
                 因为是置换元素所以能添加大小。因为置换元素在页面显示过程中，生成一个框（框架），这个框能添加大小的。
        b:非置换元素：
        不是置换元素的都是非置换元素。

  第三节：定位(让元素的位置放生改变)

       1、例子：
            把大象放冰箱需要几步？
                第一步：把大象拿起来
                第二步：确定参照物（冰箱）
                第三步：确定具体的坐标

            班级给卢本伟调换座位？
                第一步：让他离开现在的位置（把他拿起来）
                第二步：参照物：隔壁教室
                第三步：坐标：坐在隔壁教室的门口。

      2、css定位需要几步：
            1: 让元素知道自己要做位置的变动。
            2：确定谁是参照物
            3：指定固定的坐标

      3、定位属性：
             a、position属性:设置或检索元素定位方式。
                   （如果元素有了position属性，元素就知道自己要做位置的移动了）
           b、 position的属性值：（属性值才是告诉元素参照物是谁）
          c、指定坐标：left\right\top\bottom

      4、position的属性值：
            1: position:static       【静态定位】
                   (默认值：添加和不设置的效果一样的)

            2: position:absolute  【绝对定位】
                   a: 绝对定位的参照物：
                        已经有定位的父元素为参照物
                     如果父元素都没有定位或者没有父元素，以整个文档为参照物。
                  b: 绝对定位的特点:
                        不占据空间,脱离布局流