前端 day10

一、元素类型的转换

    1.display属性：

        属性值： block

                       inline

                       none

   2.大部分块状元素默认的display值是block，其中li默认的值list-item（列表元素）；

       大部分内联元素默认的display值inline，其中input默认的值inline-block（行内块元素）；

   3.input是内联元素里最特殊的，是行内块元素（内联块元素）  

        特点：

               1.可以设置宽高

               2.在一行内逐个显示

              3.只有当前元素的display值为inline-block

    4.vertical-align:

       属性值；top  middle   bottom   baseline

    5.让一个元素在父元素 里面左右上下居中

        方法(1)：（程序实现）

            1.给父元素添加

                  text-align:center;（左右居中）

            2.给当前元素添加

                 display:inline-block;

                 vertical-agiln:middle;

           3.在当前元素后面（不要回车），添加一个空的span，给span设置样式

                 display:inline-block;

                 width:0;

                 height:100%;

                 vertical-align:middle;

       方法(2):（弹性盒子）

            1.给父元素添加

                display:flex;

            2.给当前元素添加

                 margin:0 auto;

   6.行内块元素：

       1.Input

                display值为inline-bloak

    7.img

       1.img当作行内块元素使用（特殊的存在，拥有行内块的特点）

       2.img默认情况下：在浏览器中的display值为inline

   8.标签的嵌套规则

         1.尽量让块状元素作为父元素（容器）

         2.内联元素的子元素尽量为内联元素

         3.p标签中不能出现h1-h6

         4.p标签和h1-h6不能相互嵌套

 

   9.置换元素和非置换元素

         1.从另一个角度对标签进行分类，可以分为置换元素和非置换元素

         2.置换元素：

                1.典型的置换元素，img和input依赖标签的属性或是元素的自身属性，来决定在网页中的显示状态

                2.因为是置换元素所以能添加大小。因为置换元素在页面显示的过程，会生成一个框架，这个框架能添加大小

         3.非置换元素

               不是置换元素的都是非置换元素

   10.为什么图片能添加大小，图片默认的display值为inline

        答： 因为img是置换元素所以能添加大小。因为置换元素在页面显示的过程，会生成一个框架，这个框架能添加大小。

二、定位元素

          功能：让元素的位置发生改变。

   1.定位属性：

       1.position；static；(默认值：添加和不设置的效果一样)

       2.position:absolute;（决对定位）

               A:决定定位的参照物

                       已经有定位的父元素为参照物；

                       如果父元素都没有定位或者没有父元素，以整个文档为参照物

               B:决定定位的特点

                       不占据空间，脱离布局流