前言
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;
bac公斤round-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%;
bac公斤round-color: #aadddd;
float: left;
}
.rightbox {
width: 700px;
height: 100%;
bac公斤round-color: #f08844;
float: right;
}
效果截图
image
两列布局，当已知列的宽度时，能够运用浮动属性来达到上下布局的
| 
发表于 2024-6-30 08:51:38
