CSS的知识点总结（三）——布局

目录

一、默认布局

二、display

三、浮动：float

四、定位布局：position

        1.相对定位

         2.绝对定位

         3.固定位置

        4.粘性布局

---

一、默认布局

        1.默认布局又称线性布局

                默认文档结构从外到内，自上而下，从左到右。

二、display

        1.定义：将块级元素转换为行类元素

        2.display:inline;  行内元素

        3.display:inline-block; 行内块级元素：可以共享一行空间，也可以指定宽高。

三、浮动：float

        1.定义：浮动就是兄弟之间的元素可以脱离正常的文档流，从而左右漂浮。

        2.语法：（一般要和display结合使用）

                （1）float:left; 左浮动

                （2）float:right; 右浮动

        3.浮动产生的问题：

                （1）失去对父元素的支撑

                （2）兄弟元素会掉下来

        4.解决浮动产生的问题：清除浮动

                （1）对父元素来说：

                        1.在子元素后添加一个空元素，为其添加 clear:both 。但会增加无意义的元素结构。

                        2.给父元素设置一个overflow:hidden，解决了上一种方法的弊端。

                        3.::after  为需要清除浮动元素的伪对象中，设置hight:0

                        【注意：用伪类清除浮动时用after，并且加上content:""可以加内容也可以不加，但是一定要加上display:block;，同时还要写clear:both;】  

#layout::after{
    display:block;
    clear:both;
    content:"";
}

             （2）对于兄弟元素来说：

                    给当前元素（被浮动影响的元素）设置css属性clear，值可为left\right\both。作用分别为清除左浮动元素带来的影响，清除右浮动元素带来的影响，清除左右两侧浮动元素带来的影响。

四、定位布局：position

        1.相对定位

               （1）定义：相对于自己的父元素进行移动，不会脱离文档流。

               （2）语法：position:relative;【要和top、left、bottom、right配合使用】

position:relative;
top:20px;
left:50px;

         2.绝对定位

               （1）定义：相对于自己的祖先元素进行移动，会脱离文档流。

               （2）语法：position:absolute;【要和top、left、bottom、right配合使用】

         3.固定位置

                （1）定义：将一个块级元素相对于它的祖先元素在某个固定的位置固定住。脱离文档流。

                （2）语法：position:fixed;【要和top、left、bottom、right配合使用】

                （3）用途：运用于浏览器的广告。

        4.粘性布局

                （1）定义：当某个块级元素被下拉到一个固定的位置时，它会相对于父元素会被固定住。

                （2）语法：position:sticky;  position:-webkit-sticky;

                （3）用途：网页首页的最上边的导航栏。

                （4）使用条件：

                        1.父元素不能overflow:hidden或overflow:auto属性。

                        2.必须指定top、bottom、left、right4个值之一，否则只会处于相对位置。

                        3.父元素的高度不能低于sticky元素的高度

                        4.sticky元素仅在其父元素内生效