本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
css布局方法有:1、一列布局,一般都是固定的宽高;2、两列布局,使用float来实现;3、三列布局,两侧定宽中间自适应;4、混合布局,在一列布局的基础上,保留top和foot部分;5、其他布局等。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
网页实质是块与块之间的位置,块挨着块,块嵌套块,块叠着块。
三种关系:相邻,嵌套,重叠。
下面介绍网页布局的常用几种方式
1.一列布局:
一般都是固定的宽高,设置margin : 0 auto来水平居中,用于界面显著标题的展示等;
1 2 3 4 5 6 | .main{
width: 200px;
height: 100px;
background-color: grey;
margin: 0 auto;
}
|
2.两列布局:
说起两列布局,最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动。
设置左左浮动,或设置左右浮动(这是需要确定父级元素的宽度)
如何父级元素没有设置高度,则需要设置overflow:hidden来清除浮动产生的影响
对于自己相邻元素清除浮动产生的影响用:clear:both;
1 2 3 4 | <p class = "main" >
<p class = "left" >left</p>
<p class = "right" >right</p>
</p>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .main{
width: 400px;
background: red;
overflow: hidden;
}
.left{
background: yellow;
float: left;
}
.right{
background: green;
float: left;
}
|
3.三列布局:
两侧定宽中间自适应
首先设置父级元素的宽度,可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动,设置margin,调整间距。同样注意清除浮动的影响!
1 2 3 4 5 | < p class = "main" >
< p class = "left" >left</ p >
< p class = "middle" >middle</ p >
< p class = "right" >right</ p >
</ p >
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .main{
width: 100%;
background: red;
overflow: hidden;
}
. left {
background: yellow;
float : left ;
width: 100px;
}
.middle{
background: rosybrown;
float : left ;
width: cacl(100%-200px);
}
. right {
background: green;
float : right ;
width: 100px%;
}
|
或着为父级元素设置relative属性,再为子元素设置absolute属性,再分别定位,调间距。
1 2 3 4 5 6 7 8 9 10 11 12 | <p class= "parent" style= "" >
<p class= "left" style= "" >
<p> left </p>
</p>
<p class= "center" style= "" >
<p> center </p>
<p> center </p>
</p>
<p class= "right" style= "" >
<p> right </p>
</p>
</p>
|
1 2 3 4 5 6 7 8 | <style>
p{margin: 0;}
.parent{position: relative;height:40px;}
.left,.right,.center{position: absolute;}
.left{left: 0;width:100px;}
.right{right: 0;width: 100px;}
.center{left: 120px; right: 120px;}
</style>
|
4.混合布局:
在一列布局的基础上,保留top和foot部分,将中间的main部分改造成两列或三列布局,小的模块可以再逐级同理划分。
1 2 3 4 5 6 | <p class = "top" ></p>
<p class = "main" >
<p class = "left" >left</p>
<p class = "right" >right</p>
</p>
<p class = "footer" ></p>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | . top {
height : 100px ;
background : teal ;
}
.footer{
height : 100px ;
background : wheat;
}
.main{
width : 100% ;
background : red ;
overflow : hidden ;
}
. left {
background : yellow;
float : left ;
width : 50% ;
}
. right {
background : green ;
float : right ;
width : 50% ;
}
|
5.扩展(如等分布局等)
1 2 3 4 5 6 | <p class = "parent" >
<p class = "child" ></p>
<p class = "child" ></p>
<p class = "child" ></p>
<p class = "child" ></p>
</p>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | body{margin: 0;}
.parent{
border: 1px solid red;
overflow: hidden;
margin- right : -10px;
}
.child {
width: calc(25% - 10px);
height: 100px;
background: green;
float : left ;
margin- right : 10px;
}
|
推荐学习:css视频教程
以上就是css布局方法有哪些的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css内边距是什么
background属性怎么用
css与javascript的区别是什么
详解css处理长短文本内容的几种小技巧(值得收藏)
css里的display属性有啥作用
怎么用css设置记录用户密码
css如何增加权重
css如何设置背景图片不平铺
css后代选择器有哪些
css如何设置超链接的样式
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css布局方法有哪些