网页布局的三种方式:
一、标准文档流
1、从上到下从左到右(块级元素【div,ul,li,dl,dt,p】和行级元素【上盘,img,strong,input】)。
2、盒子模型
盒子模型属性:边框border,内边距padding【(上,右,下,左)(上,左右,下)(上下,左右)】,外边距margin【(上,右,下,左)(上,左右,下)(上下,左右)】。
3、盒子3d模型
盒子3d模型层级有border;content+padding;background-img;background-color;margin。
4、盒子模型尺寸等于边框+外边距+内边距+盒子中间内容尺寸。
二、浮动float
float:left,right,none。
清除浮动:
1、clear:both;(一般用于紧邻后面的元素清除浮动)。
2、同时设置width:1000%(固定宽度)+overflow:hidden。
注:当父包含快缩成一条时,用clear:both方法无效;一般用清除浮动的第二种方法。
三、绝对定位
1、静态定位,2、相对定位,3、绝对定位。
网页布局方式还有:
1、一列布局
一般都是固定的宽高,设置margin : 0 auto来水平居中,用于界面显著标题的展示等。
2、两列布局
说起两列布局,最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动。
设置左左浮动,或设置左右浮动。(这是需要确定父级元素的宽度)
3、三列布局
两侧定宽中间自适应。首先设置父级元素的宽度,可以左左右设置浮动。然后中间设置margin调整间距。也可以都设置成左浮动,设置margin,调整间距。同样注意清除浮动的影响。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)