网页布局（layout布局）

全栈程序员-站长 • 2026年3月18日上午9:53 • 未分类 • 阅读 2

目录

制作网站的大布局：

一、单列布局

1. 常见的单列布局：

二、两列自适应布局

三、三列布局

1.浮动布局

2.绝对定位布局

3.表格布局

4.网格布局

主要属性：

制作网站的大布局：

单列布局（主要采用居中布局，固定布局，px）

流式布局（百分比布局）

一、单列布局

主要采用居中布局。

1. 常见的单列布局：

header，content和footer等宽的单列布局。先通过对 header,content,footer 统一设置 width：1000px;或者 max-width：1000px(这两者的区别是当屏幕小于1000px 时，前者会出现滚动条，后者则不会，显示出实际宽度);然后设置 margin:auto 实现居中即可得到。

header与footer等宽，content略窄的单列布局。header、footer 的内容宽度不设置，块级元素充满整个屏幕，但 header、content 和 footer 的内容区设置同一个 width，并通过 margin:auto 实现居中。

块元素转化为行级块之后，元素之间默认大概有5px的间距。解决办法：给父元素设置字体大小为0，然后再给自身设置字体大小

设置浮动：父元素会撑不开。解决办法：设置overflow：hidden

浮动之后后面的元素都是相对于容器的边框对齐，即左上角对齐。

margin: 0 auto; 设置文本居中。

二、两列自适应布局

指一列由内容撑开，另一列撑满剩余宽度的布局方式。

float+overflow：hidden 如果是普通的两列布局，浮动+普通元素的margin便可以实现，但是如果是自适应的两列布局，利用float+overflow：hidden便可以实现，这种办法主要是通过overflow触发BFC，而BFC不会重叠浮动元素。
.parent{ width: auto; height: auto; } .left{ float: left; width: 300px; height: 100px; background-color: red; margin-right: 10px; } .right{ width: auto; height: 100px; overflow: hidden; background-color: silver; } 
    
     
     
    
      一段文字 
     
   
如果侧边栏在右边时，注意渲染顺序。即在HTML中，先写侧边栏后写主内容。

三、三列布局

中间列自适应宽度，旁边两侧固定宽度，实现三栏布局有多种方式

1.浮动布局
.boxfloat{ margin: 0 auto; width: 1000px; display: table; } .boxfloat>div{ height: 300px; } .left{ float: left; background-color: red; width: 200px; } .middle{ background-color: blueviolet; width: 500px; overflow: hidden; } .right{ float: right; background-color: orangered; width: 300px; } 
    
     
     
     
   
注：必须先写浮动部分，然后再中间块，否则右浮动块会掉到下一行。浮动布局的优点就是比较简单，兼容性也比较好。但浮动布局是有局限性的，浮动元素脱离文档流，必须要做清除浮动，这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。

2.绝对定位布局

注：容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题。

3.表格布局
.box{ margin: 0 auto; width: 1000px; height: 300px; border: 1px solid red; display: table; } .box>div{ display: table-cell; } .w{ width: 600px; } 
    
     
     
     
   
详情点击https://blog.csdn.net/_/article/details/#%E4%B8%89%E3%80%81display%EF%BC%9Atable

表格布局的缺点:① 无法设置栏边距；② 对 seo 不友好；③ 当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，然而有时候这并不是我们想要的效果。

4.网格布局

采用网格布局的区域，称为”容器”（container）。容器内部采用网格定位的子元素，称为”项目”（item）。
 
    
     
     1 
     
     
     2 
     
     
     3 
     
   
上面代码中，最外层的
元素就是容器，内层的三个
元素就是项目。
注：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的元素就不是项目。Grid 布局只对项目生效。
行和列的交叉区域，称为”单元格”（cell）。
Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。
主要属性：
.box{ width: 300px; height: 300px; margin: 0 auto; display: grid; /*grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px;*/ grid-template-columns: repeat(3,100px); grid-template-rows: repeat(3,100px); } .box>div{ border: 1px solid blue; box-sizing: border-box; background-color: orangered; } 
    
     
     
     
     
     
     
     
     
     
   