css网页布局方式的理解

一，标准流（默认状态，元素盒按照文档中出现的顺序排列）

块级元素--垂直排版 display:block;

              单独一行，可以设置宽高，宽度默认和父元素宽度一致

             一般结构性标记都为块级元素，如div，h，p，ul等

行内元素--水平排版 display:inline-block;

              与其他元素并排一行，不能设置宽高，宽度默认为内容的宽度

              一般描述性标记都为行内元素，如span，a，img等

二，浮动流--水平排版

左浮动--float:left;

右浮动--float:right;

元素可以左右浮动，当该元素外边框边缘遇到另一个元素的外边框时，该元素有确定位置

浮动流的包含框宽度不够时，元素向下移动，两个浮动元素高度不同时，可能被卡住

三，定位流（通过top，bottom，left，right调整位置）

相对定位--position:relative;

top，bottom，left，right是相对于该元素在标准流中的位置移动的距离，不管是否移动，元素仍占据其在标准流中的位置，显示上可能覆盖其他元素

绝对定位--position:absolute;

top，bottom，left，right是相对于距离最近的已定位的父元素移动的距离，可以覆盖页面上其他元素，元素在标准流中不占据位置，不影响标准流中元素的位置

绝对定位有一个属性z-index，z-index越大显示在越上面

一般情况下，父元素采用相对定位，子元素采用绝对定位。以相对定位的父元素作为子元素绝对定位的参照物。

当然这种情况并不是绝对的，父元素也可以设置成absolute，子元素要找的是非static定位的父元素。

固定定位--positon:fixed;

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有