首页 > 开发 > CSS > 正文

html+css 布局系列

2016-04-19 20:36:32  来源:慕课网

如何为固定大小盒子和不固定盒子大小设置网页水平居中,垂直居中
margin:0 auto;(固定大小——设置水平居中对齐,使用自动外边距实现居中,但是必须为该容器指定宽度)
position:absolute; left:40%; top:40%; width:10%; height:10%;(不固定盒子大小实现垂直居中)
如果我们想固定盒子大小,又想固定盒子居中位置,那么可以设置盒子为绝对定位,然后将top和left值设定为50%;并且设置margin-top和margin-left的值为盒子高度和宽度的一半的负值,这样就是可以确保盒子的居中位置
eg:
.box{position:absolute; top:50%; left:50%; width:500px; height:500px; margin:-250px 0 0-250px; border:1px solid red;}

网页利用CSS布局主要有四类布局:一列布局,两列布局,三列布局,混合布局
一列布局通常是指点宽度的,方便进行布局显示,例如百度首页
通常使用margin:0 auto;实现效果
两列布局通常是2个DIV块并排显示,通常使用float实现效果,但是使用浮动之后要记得清楚浮动
三列布局是指三列并排显示
如果是固定宽度就可以直接使用float进行设置,如果有一个是固定宽度,另外一个非固定宽度,就要让固定宽度的那个盒子进行定位,设置好相关的left和top值,然后另外一边的值设置margin值