码迷,mamicode.com
首页 > Web开发 > 详细

css网页布局方式的理解

时间:2018-03-08 02:42:08      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:网页布局   relative   span   otto   style   absolute   结构   gpo   行内元素   

一,标准流(默认状态,元素盒按照文档中出现的顺序排列)

块级元素--垂直排版 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;

 

css网页布局方式的理解

标签:网页布局   relative   span   otto   style   absolute   结构   gpo   行内元素   

原文地址:https://www.cnblogs.com/yiyicheng/p/8525886.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!