css 中的若干心得

Posted 2020-08-04

    css布局中定位机制主要是普通的流，也就是说按照html文本的顺序在窗口上从上到下、从左到右去显示，遇见块级元素就换行显示。为了更进一步的控制，我可以使用相对定位、绝对定位、固定定位以及浮动。

     相对定位（position:relative）是相对于自身而言的，但会在原来的地方留出空白，所以不会影响后序的流；可能出现这个元素覆盖到其他元素上的情况发生。百分数表示的宽度相对于父元素的宽度而言的。

    绝对定位(position:absolute)会让该元素从流中去掉，其他元素不会再看见它，可以产生覆盖的效果；其定位是相对于离它最近的的非普通流的父元素（position非static）的左上角，否则一直到原始的盒子可能是body。其百分数表示的宽度是源自于其定位元素的宽度的。通常在父元素中使用position:relative;子元素中使用position:absolute;

    固定定位(position:fixed):这种定位是相对于浏览器窗口的，百分数表示的宽度也是相对于浏览器窗口的。该元素会从普通流中移除。

    这几种都可以设置z-index来改变各部分的相对屏幕位置。而且都可以在块级元素和内联元素上使用。

   float：在元素的父元素盒子里尽量向左或是右浮动，文本可以在周围浮动。

   当一个包含元素内只直接包含有一个浮动元素，那么包含元素会被认为高度为0，可以使用overflow：auto;width:100%来改变这种状况。