元素的转换及定位

最新推荐文章于 2022-07-06 09:51:46 发布

一个对前端瑟瑟发抖的小白

最新推荐文章于 2022-07-06 09:51:46 发布

阅读量393

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_46578458/article/details/105152578

版权

元素的转换

     元素类型的转换：
                        display属性：
                            属性值：
                                block
                                inline
                                none


                大部分块状元素默认的display的值block,其中li默认的值 list-item (列表元素)
                大部分内联元素默认的display的值inline,其中input默认的值 inline-block(行内块元素)

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


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

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


                  行内块元素：
                                input


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





                                                        
                图片默认的display的值为inline 为什么图片能直接添加大小？？

                            从另一个角度对所有的标签进行分类。
                            分为：置换元素与非置换元素


                            置换元素：
                                典型的置换元素：img\input 依赖标签的属性或者元素自身类型，来决定当前元素在页面中显示的状态。
                                因为是置换元素所以能添加大小。因为置换元素在页面显示过程中，生成一个框（框架），这个框能添加大小的。

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

定位

 css定位 需要哪几步
           1  让元素知道自己知道要做位置变动 position
           2  确定参照物 知道在哪里变动
           3  最后确定坐标
              left/rigth/top/bottom

         

       定位  position  属性 
        
                   属性值  static   默认状态
                           absolute  绝对定位
                           relative  相对定位
                           fixed    固定 
                           sticky    相对定位和固定 


             absolute  绝对定位  脱离文档流
             1 如果父元素没有设置定位 则会根据文档
             2 不占据空间