15158846557 或

在线咨询

所在位置：首页 > 营销资讯 > 网站运营 > DIV+CSS页面基本布局总结

DIV+CSS页面基本布局总结

时间：2023-09-26 10:48:01 | 来源：网站运营

时间：2023-09-26 10:48:01 来源：网站运营

DIV+CSS页面基本布局总结：

前言

DIV+CSS布局是前端最为基础的知识，而现在网络上最为普遍的有一列，两列，三列，窗格式布局以及自适应布局等等。
在我们熟悉了html布局之后，经常会选用能够满足当前自己需求的排版布局或习惯性选用自己常用的布局方式，有时候我发现能满足我某个时刻需求的网页布局往往是我习惯常用的，但不一定是更好更适合的布局，所以我就想回到最初，把最基础的页面布局总结一下，可以供入门的新手了解一下，我认为多对一些基础知识点多总结多了解没有坏处。

1.固定宽度布局

一列水平居中布局
一列的宽度固定为已知值，使用margin设置来达到水平居中效果。

html代码：

<!DOCTYPE html><html><head>    <title>一列水平居中布局</title>    <meta charset="utf-8"></head><body>    <div class="one-center-col">一列布局</div></body></html>

css代码：

<style>    .one-center-col {          width: 1000px;          height: 700px;          background-color: grey;          margin: 0 auto;    }</style>

效果截图：

image

其中对于宽度固定的元素，只需要设置该元素的css样式(margin:0 auto;)就可以实现让该元素在其父元素的宽度下水平居中对齐显示。

两列布局（浮动）
网页布局常见左右两列布局，如果已知左右两列的宽度是固定值，则可以使用float浮动方式完成基本布局排版。

html代码：

<div class="container"> <div class="leftbox">左侧列</div> <div class="rightbox">右侧列</div></div>左右列的css代码：

.leftbox {  width: 300px;  height: 100%;  background-color: #aadddd;  float: left;}     .rightbox {  width: 700px;  height: 100%;  background-color: #f08844;  float: right;}

效果截图

image

两列布局，当已知列的宽度时，可以使用浮动属性来达到左右布局的效果，仅需设置float:left和float:right就可以轻松达到页面布局效果。

三列布局
三列水平布局，如果列的宽度都是固定的，实现方式与上面两列布局相似，使用浮动即可达到效果。

html代码：

<div class="container">  <div class="leftbox">左侧列</div>  <div class="midbox">中间列</div>  <div class="rightbox">右侧列</div></div>

css部分代码：

.leftbox {  width: 300px;  float: left;}.midbox {  width: 400px;        float: left;}.rightbox {  width: 300px;  float: right;}

效果示意图

image

leftbox和midbox设置左浮动，rightbox设置右浮动。但关键的是，三个子元素的总宽度不能大于或者等于父元素的宽度。

2. 自适应宽度布局

两列布局（实现效果：两列自适应宽度）
思路：实现自适应两列布局，可以继续使用浮动方式来布局，但在设置浮动元素的宽度时，不再使用固定值，而要使用百分比，从而实现宽度的自适应。
两列布局（实现效果：左侧为固定宽度，右侧自适应）
1）使用浮动来进行自适应布局：

.leftbox {    width: 300px;    height: 100%;    background-color: #aadddd;    float: left;}.rightbox {    height: 100%;    margin-left: 300px;    background-color: #f08844;}

基本思路分析：

左侧设置固定宽度并设置浮动float:left;
右侧不设置宽度，只设置左侧边距为左侧栏的宽度加上左侧与右侧的间距margin-left。

2）使用定位来进行布局：

.container {  width: 1000px;  height: 700px;  margin: 0 auto;  position: relative;}.leftbox {  width: 300px;  /*左侧固定宽度值*/  height: 100%;  position: absolute;}.rightbox {  height: 100%;  margin-left: 300px; /*边距值=左侧固定宽度值*/  position: relative;}

基本思路分析：

父元素设置为position:relative;
leftbox设置固定宽度，设定为绝对定位position:absolute。
rightbox设置为相对定位position:relative。（使其遮盖左侧栏）
rightbox设置左边距，边距值margin-left刚好为左侧栏的宽度。

截图展示：

image

三列布局：中间自适应（实现效果：原理类似于两列布局）
1）使用浮动来布局
核心思想：中间列自适应。

.leftbox {    width: 300px;    height: 100%;    background-color: #aadddd;    float: left;}      .midbox {    margin: 0 300px;    height: 100%;    background-color: #aa11dd;}.rightbox {    width: 300px;    height: 100%;    background-color: #f08844;    float: right;}

基本思路分析：
1.左侧以及右侧设置固定宽度，并且分别设置左右浮动。
2.中间栏设置左右边距，边距值刚好分别等于左右侧栏的宽度。

2）使用定位来布局

.container {    width: 1000px;    height: 700px;    margin: 0 auto;    position: relative;}.leftbox {    width: 300px;    height: 100%;    position: absolute;    left: 0;}.midbox {    margin: 0 300px;    height: 100%;    position: relative;}.rightbox {    width: 300px;    height: 100%;    position: absolute;    right: 0;}

思路分析：
1.父元素设置position:relative;
2.leftbox和rightbox设置position:absolute;并且设置左右侧栏的宽度值。
3.midbox设置position:relative;
4.midbox设置左右margin值，正好对应左右侧栏的宽度值(margin=leftboxWidth/rightboxWidth)。

截图展示：

image

以上为我自己简单总结归纳的一些最基础的div+css布局的考虑实现方式，希望能够对某些刚接触前端的新手在基础布局的实现上提供一点点帮助。

如果需要练手，可以在学习这个教程：
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/
也可以参考盒子模型
https://www.runoob.com/css/css-boxmodel.html
属性参考手册
https://www.runoob.com/cssref/css-reference.html
布局
https://www.runoob.com/html/html-layouts.html

css 在线编辑器

http://tool.chinaz.com/Tools/cssdesigner.aspx

css速查：http://code.ciaoca.com/style/css-cheat-sheet/

css速查：http://www.css88.com/book/css/quicksearch.htm

页面布局

https://blog.csdn.net/xxlovesht/article/details/80736419

希望对大家有帮助

关键词：布局,总结,基本

网站
营销
设计
运营
优化
效率
专注
电商
方案
推广

解决方案&服务

客户&案例

营销资讯

关于我们

解决方案&服务

客户&案例

营销资讯

关于我们

微信公众号

为了最佳展示效果，本站不支持IE9及以下版本的浏览器，建议您使用谷歌Chrome浏览器。点击下载Chrome浏览器

关闭

快捷入口

DIV+CSS页面基本布局总结

前言

1.固定宽度布局

2. 自适应宽度布局

湖州室内设计培训学校，哪家学校比较好？

如何选择seo优化公司？

FESCO公司是做什么的

如何选择适合外贸空间的服务器?所考虑的因素有哪些?

用google analytics为你的网站定制数据报告

UI设计切图规范-史上最全面

杭州外贸网站优化公司整理的2019年最新外贸邮件敏感词汇总

Luffy - 前台搭建

中英双语企业网站建设如何避免人财双损失？

国外虚拟主机怎么租用?

快捷入口

DIV+CSS页面基本布局总结

前言

1.固定宽度布局

2. 自适应宽度布局

推荐文章