HTML栅格布局container,布局&栅格

本文详细介绍了HTML布局的几种经典方法,如圣杯布局、双飞翼布局、Flex布局和绝对定位布局,以及它们的优缺点。接着讨论了栅格系统的重要性和作用,特别是在提高生产力、灵活性和响应式设计方面的优势。文中提到了Bootstrap、ElementUI和AntD等UI框架的栅格系统,并提供了创建自定义栅格系统的基本步骤和响应式设计的实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

布局方式

先聊聊布局方面的知识,先列据一个实现三栏水平布局(左右定宽,中间自适应)案列,目前有圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局。

圣杯布局 & 双飞翼布局(都是三列左右栏固定中间栏自适应的网页布局)。

相同点:

三列布局,两边定宽,中间自适应;

中间栏要在浏览器中优先展示渲染;

允许任意列的高度最高;

差异点:

双飞翼布局比圣杯布局多创建了一个div,但不用相对布局了

DOM节点结构:

圣杯布局:

main
left
right

.container {

padding: 0 300px 0 200px;

}

.left, .main, .right {

position: relative;

min-height: 130px;

float: left;

}

.left {

left: -200px;

margin-left: -100%;

background: green;

width: 200px;

}

.right {

right: -300px;

margin-left: -300px;

background-color: red;

width: 300px;

}

.main {

background-color: blue;

width: 100%;

}

双飞翼布局:

main
left
right

.left, .main, .right {

float: left;

min-height: 130px;

text-align: center;

}

.left {

margin-left: -100%;

background: green;

width: 200px;

}

.right {

margin-left: -300px;

background-color: red;

width: 300px;

}

.main {

background-color: blue;

width: 100%;

}

.content{

margin: 0 300px 0 200px;

}

双飞翼布局比圣杯布局多使用了一个div,少用大致4个css属性,比圣杯布局思路更直接和间接一点。

Flex弹性布局

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局, Flex 布局将成为现代浏览器的首选方案。

main
left
right

.container{

display: flex;

min-height: 130px;

}

.main{

flex-grow: 1;

background-color: blue;

}

.left{

order: -1;

flex-basis: 200px;

background-color: green;

}

.right{

flex-basis: 300px;

background-color: red;

}

绝对定位布局

绝对定位position: absolute使元素的位置与文档流无关,因此不占据空间。PS:这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

main
left
right

.container{

position: relative;

}

.main,.right,.left{

top: 0;

height: 130px;

}

.main{

margin: 0 300px 0 200px;

background-color: blue;

}

.right{

position: absolute;

width: 300px;

right: 0;

background-color: red;

}

.left{

position: absolute;

width: 200px;

background-color: green;

left: 0;

}

栅格布局

栅格

以规则的网格阵列来指导和规范网页中的版面布局以及信息分布,通俗一点的就是在一个特定区域内划分出有规律的格子,并依靠这些格子进行有规律的版面布局。

f1657738b719

栅格布局的作用

提高生产力 ;通过在网格的划分,元素更容易堆放而且在跨浏览器上面具有一致性,使我们可以专心的注意布局而不是兼容上。

具有灵活性 ;无论是什么样的布局,都可以拆分到粒度为一个网格的大小。

支持响应式设计 ;栅格系统本身能很好的和响应式设计结合在一起,或者说,我们的栅格系统是基于响应式设计的。

栅格布局的使用

现大多数UI框架设计上都会设计栅格化系统,比如bootstrap(jquery)、element(vue)、antD(react)等。

Bootstarp

Bootstrap 的栅格化系统采用将页面布局分为12列,再根据页面宽度采用预定义类控制模块占用宽度比例(宽度百分比)的思想,实现响应式布局。

工作规范

container (.container-fluid)> .row > .column ;采用容器内行 (row) 列 (column) 布局方式,.column 必须包含在 .row 中,.row 必须包含在 .container 中;.container 可以包含多个 .row,.row 可以包含多个 .column ;

展示的内容应当放置于 .column类中,并且只有.column可以作为.row的子元素;

使用类似于.row 、.col-xs-4等预定义类,快速创建栅格化布局;

栅格类适用于屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖栅格化类,比如.col-md-*在.container-fludid宽度≥992px时生效;

媒介分类

Bootstrap将屏幕大小分为4类,主要关键点是媒体查询 @media。

/* xs 屏幕大小小于768px */

@media (max-width: 767px) { ... }

/* sm 屏幕最小宽度为768px */

@media (min-width: 768px) { ... }

/* md 屏幕最小宽度为992px */

@media (min-width: 992px) { ... }

/* lg 屏幕最小宽度为1200px */

@media (min-width: 1200px) { ... }

实例

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

elementUI

官网中对Layout 布局的定义是: 通过基础的 24 分栏,迅速简便地创建布局.Element是基于vue.js开发的UI框架,其设计的栅格系统也与Bootstrap类似,可选flex方式满足现代浏览器,组件开发的目的都是为了解决基本布局定位的问题。

工作规范

主要组件为 Row 与 Col , 其中 Row 为行布局容器, Col 为列布局容器.

Row 是行布局容器,从功能上来说它的作用是控制内部元素的排列方式,提供 gutter 属性来指定每一栏之间的间隔,将 type 属性赋值为 flex,可以启用 flex 布局;

Col 是列布局容器,通过 Col 组件的 span 属性我们就可以自由地组合布局,提供 offset 属性指定分栏偏移的栏数等。

媒介分类

参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:

xs <768px

sm ≥768px

md ≥992px

lg ≥1200px

xl ≥1920px

实列

f1657738b719

antD

antD是Ant Design 团队基于 React 开发的一套企业级后台UI框架,其栅格整个设计建议区域按照 24 等分的原则进行划分

工作规范

支持 Flex 布局,允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间,支持顶部对齐、垂直居中对齐、底部对齐的方式。同时,支持使用 order 来定义元素的排列顺序

通过 row 在水平方向建立一组 column(简写col)

你的内容应当放置于 col 内,并且,只有 col 可以作为 row 的直接元素

栅格系统中的列是指1到24的值来表示其跨越的范围。例如,三个等宽的列可以使用 .col-8 来创建

如果一个 row 中的 col 总和超过 24,那么多余的 col 会作为一个整体另起一行排列

媒介规范

参照 Bootstrap 的 响应式设计,预设六个响应尺寸:

xs <576px

sm ≥576px

md ≥768px

lg ≥992px

xl ≥1200px

xxl ≥1600px

实例

import { Row, Col } from 'antd';

ReactDOM.render(

col-8col-8col-6 col-offset-6col-6 col-offset-6col-12 col-offset-6
,

mountNode

);

f1657738b719

怎么实现一个基本栅格化?

1. 首先思考栅格的组成?

通常一个基本的栅格化系统包括:

container: 包裹整个栅格系统的容器

rows: 行

columns: 列

gutters: 各列的间的空隙

2. 创建容器 (The Container)

为了给整个栅格系统设置宽度,我们需要一个容器。容器的宽度通常为100%,但你可能希望为更大的显示器设置最大宽度max-width。

.grid-container {

width : 100%;

max-width : 1200px;

}

3. 创建行 (The Row)

行元素用于防止里面的列( column )溢出到其他的行。通常会使用clearfix来清除浮动,因为我们是通过浮动来制作栅格系统的。

/*-- 清除浮动 -- */

.row:before,

.row:after {

content:"";

display: table ;

clear:both;

}

4. 创建列 (The Column)

列元素是栅格系统的核心,也是最复杂的一部分。因为列的定位可以有很多实现方式,同时还需要考虑它的宽度以及响应式设计等因素。

列的位置

Floats 、 inline-blocks 、 display-table 、 display-flex 他们都可以实现栅格布局中,列的定位。先选取使用float,如果列都是空的,浮动的列都会贴在彼此的顶部。为了避免这种情况:

[class*='col-'] {

float: left;

min-height: 1px;

}

列的宽度

由于容器总宽度是100%,我们想要6列,所以每列宽度为:100 / 6 = 16.66

[class*='col-'] {

float: left;

min-height: 1px;

width: 16.66%;

}

这里我们把一行分成六列,通过简单的计算,还可以定义列的多种宽度。

.col-1 {

width: 16.66%;

}

.col-2 {

width: 33.33%;

}

.col-3 {

width: 50%;

}

.col-4 {

width: 66.664%;

}

.col-5 {

width: 83.33%;

}

.col-6 {

width: 100%;

}

列的间隙 (Column Gutters)

由于列的宽度单位是响应式的百分比(%),我们给列元素的间距是固定单位的padding(px单位),为了避免复杂的计算,我们规定所有的盒子模型为 border-box 类型。

[class*='col-'] {

/*-- 将栅格系统里的列元素设为 border box --*/

box-sizing: border-box;

float: left;

min-height: 1px;

width: 16.66%;

/*-- 设置间隙 --*/

padding: 12px;

}

5. 增加响应式

为了适配更多分辨率的布局,我们只需改变列的宽度。

比如当屏幕宽度小于1000px时,为了布局更简洁,我们使用两倍列的宽度,一行六列变为了一行三列。

@media all and (max-width:1000px){

.col-1{ width: 33.33%; }

.col-2{ width: 50%; }

.col-3{ width: 100%; }

.col-4{ width: 100%; }

.col-5{ width: 100%; }

.col-6{ width: 100%; }

.row .col-2:last-of-type{

width: 100%;

}

.row .col-5 ~ .col-1{

width: 100%;

}

}

当屏幕宽度比1000px还小时

@media all and (max-width:700px){

.col-1{ width: 50%; }

.col-2{ width: 100%; }

.col-3{ width: 100%; }

.col-4{ width: 100%; }

.col-5{ width: 100%; }

.col-6{ width: 100%; }

}

6. 完成Completed!

Document

.grid-container {

width: 100%;

max-width: 1200px;

}

/*-- 使用 cleafix 清除浮动 -- */

.row:before,

.row:after {

content: "";

display: table;

clear: both;

}

[class*='col-'] {

float: left;

min-height: 1px;

width: 16.66%;

/*-- 设置列的左右间隙 -- */

padding: 12px;

box-sizing: border-box;

background-color: #FFDCDC;

}

.col-1 { width: 16.66%; }

.col-2 { width: 33.33%; }

.col-3 { width: 50%; }

.col-4 { width: 66.66%; }

.col-5 { width: 83.33%; }

.col-6 { width: 100%; }

.outline,

.outline * {

outline: 1px solid #F6A1A1;

}

/*-- 列的额外内容样式 --*/

[class*='col-']>p {

background-color: #FFC2C2;

padding: 0;

margin: 0;

text-align: center;

color: white;

}

@media all and (max-width:1000px) {

.col-1 { width: 33.33%; }

.col-2 { width: 50%; }

.col-3 { width: 100%; }

.col-4 { width: 100%; }

.col-5 { width: 100%; }

.col-6 { width: 100%; }

.row .col-2:last-of-type { width: 100%; }

.row .col-5~.col-1 { width: 100%; }

}

@media all and (max-width:700px) {

.col-1 { width: 50%; }

.col-2 { width: 100%; }

.col-3 { width: 100%; }

.col-4 { width: 100%; }

.col-5 { width: 100%; }

.col-6 { width: 100%; }

}

col-1

col-1

col-1

col-1

col-1

col-1

col-2

col-2

col-2

col-3

col-3

col-4

col-2

col-5

col-1

col-6

>1000px

f1657738b719

<1000px

f1657738b719

<700px

f1657738b719

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值