| （前端干货）网页的六种布局方式（固定布局，表格布局，浮动布局，流式布局，弹性布局，响应式布局） | 您所在的位置：网站首页 › 网页标准尺寸有哪些类型 › （前端干货）网页的六种布局方式（固定布局，表格布局，浮动布局，流式布局，弹性布局，响应式布局） |
（前端干货）网页的六种布局方式（固定布局，表格布局，浮动布局，流式布局，弹性布局，响应式布局）
|
思维导图
介绍 固定布局也叫静态布局特征 给页面元素设置固定的宽度，高度，单位一般采用px等绝对长度单位一般设置了min-width，当窗口缩小时，会出现滚动条针对不同分辨率的设备，分别写入不同的样式文件。优点 List item固定宽度的布局更易于使用以及制定设计页面。浏览器支持度高缺点 用户体验不好，固定宽度的布局可能给屏幕分辨率大的用户造成过多空白空间。较小的屏幕分辨率可能需要水平滚动条，这取决于固定布局的宽度。在可用性方面，固定宽度布局总体效果不是很好。不能根据用户的屏幕尺寸做出不同的表现。应用 当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。示例代码 /* 清除浏览器默认样式 */ *{ margin: 0; padding: 0; } .head{ width: 1000px; height: 150px; background-color: antiquewhite; margin: 0 auto; } .content{ font-size: 0; width: 1000px; height: 400px; background-color: aqua; margin: 10px auto; } .content .left{ display: inline-block; width: 200px; height: 100%; background-color: #F0F8FF; } .content .center{ display: inline-block; width: 600px; height: 100%; background-color: #F0a8FF; } .content .right{ display: inline-block; width: 200px; height: 100%; background-color: #F00fFF; } .footer{ width: 1000px; height: 120px; background-color: aliceblue; margin: 0 auto; } 浮动布局介绍 也叫float布局 浮动的设计初衷是为了设计文字环绕效果特征 脱离文档流优点 浮动可以使元素block块状化（也就是行内元素浮动后可以设置宽高）；即display:inline-block;可以使块元素同行排列缺点 导致父元素高度塌陷元素脱离文档流，布局困难应用 现在pc端网页使用此布局较为频繁，和固定布局结合使用示例代码 中间内容区使用浮动布局，实现三个div块同行 /* 清除浏览器默认样式 */ *{ margin: 0; padding: 0; } .head{ height: 150px; background-color: antiquewhite; } .content{ width: 1000px; height: 400px; background-color: aqua; margin: 10px auto; } .content .left{ width: 200px; height: 100%; background-color: #F0F8FF; float: left; } .content .center{ width: 600px; height: 100%; background-color: #F0a8FF; float: left; } .content .right{ width: 200px; height: 100%; background-color: #F00fFF; float: left; } .footer{ height: 120px; background-color: aliceblue; } 表格布局介绍 表格更多的是用来展示数据特征 当内容溢出时会自动撑开父元素优点 兼容性很好结构位置更简单容易上手缺点 无法设置栏边距；当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的标签结构多，复杂不利于搜索引擎抓取信息，直接影响到网站的排名Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌应用 很少有网站直接使用这种布局方式，但有些网站后台分页会使用它来展示数据示例代码 可以看到代码结构较为复杂 合并表格行或列 菜谱 素菜 青草茄子 花椒扁豆 小炒韭菜 白豆腐 荤菜 清蒸龙 鱼香肉丝 小炒肉 水煮肉片 列里边嵌入子表 购物车 1 2 3 4 名称 1 2 1 2 3 小计 名称 2016-11-22 小计 小计 苹果 3公斤 5元/公斤 15元 香蕉 2公斤 6元/公斤 12元 总价 27元 流式布局介绍 也叫百分比布局特征 高度定死,宽度自适应使用相对单位优点 可以适应不同尺寸的屏幕缺点 对于大屏幕来说,用户体验并不是特别好,有些布局元素会显得很长应用 移动端一般采用流式布局对于大的轮播图等,宽度100%自适应示例代码 可以试着改变浏览器宽度，看看页面的变化 流式布局 .box{ /* 百分比流式 */ /* 参考最近父级 */ /* width:90%; */ /* max-width:900px; min-width:600px; */ /* 窗口比 */ /* width:90vw; max-width:900px; min-width:600px; */ height:600px; background-color:orange; margin:0 auto; } .b{ width:100px; height:100px; background-color:red; border-radius:50%; float:left; } body{ font-size:30px; } .sup{ font-size:20px; } .text{ /* 1em=16px 不一定*/ /* font-size:1em; */ /* font-size:16px; */ /* font-size:0.4em; */ /* em为最近设置字体大小的父级规定的字体大小 */ font-size:1rem; /* rem为html字体大小 */ } html{ font-size:40px; } wenben 自适应布局介绍 自适应的概念网上有很多，这里单单指媒体查询 它本质是多个静态布局特征 分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化优点 适配大部分设备缺点 为每个设备写一个媒体查询应用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局示例代码 /* 清除浏览器默认样式 */ *{ margin: 0; padding: 0; } .head{ height: 150px; background-color: antiquewhite; } .content{ font-size: 0; width: 80%; background-color: aqua; margin: 10px auto; } .content .left{ display: inline-block; width: 25%; height: 300px; background-color: #F0F8FF; } .content .center{ display: inline-block; width: 50%; height: 300px; background-color: #F0a8FF; } .content .right{ display: inline-block; width: 25%; height: 300px; background-color: #F00fFF; } .footer{ height: 120px; background-color: aliceblue; } @media screen and (max-width: 500px) { .content .left,.content .center,.content .right{width:100%;} } 响应式布局介绍 通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用特征 每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变优点 适应pc和移动端，如果足够耐心，效果完美缺点 媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本应用 bootstrap响应式布局的实现可以通过媒体查询+px,媒体查询+百分比，媒体查询+rem+js这几种方式来实现示例代码 这是一个bootstrap实例 我的第一个 Bootstrap 4 页面 重置浏览器窗口大小查看效果！ 导航 链接 链接 链接 关于我 我的照片: 这边插入图像 关于我的介绍.. 一些链接 说明文本 激活状态 链接 链接 禁用 标题 副标题 图像 一些文本.. 菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！ 标题 副标题 图像 一些文本.. 菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！ 底部内容 弹性布局介绍 也叫flex布局 当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式特征 弹性盒子是CSS3的一种新布局模式弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。优点 容易上手，根据flex规则很容易达到某个布局效果缺点 浏览器兼容性比较差应用 用于适应各个尺寸的设备示例代码 body{margin:0;} ul,li{margin:0; padding:0;} li{list-style-type:none;} #list{border:2px solid gold; height:500px; display:flex; flex-direction:row;} #list li{font-family:"microsoft yahei"; font-size:50px; background:#C00; color:#fff; margin:2px; flex-grow:1;} #list li:nth-child(2){flex-grow:2;} test1 test2 test3 常见布局模式单列布局 头部、主体、底部等宽头部、底部自适应；主体固定宽度双列布局 左侧边栏固定，右边主体自适应右侧边栏固定，左边主体自适应三列布局 左右两列固定宽度；中间主体区自适应左右两列绝对定位；中间主体区自适应补充： rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面根元素。 注： 每个布局各有优缺点，在现实项目中应该配合使用 |
【本文地址】
公司简介
联系我们