CSS布局

kviccn 发布于2019-08-30 13:46 / 972人阅读

摘要：圣杯布局圣杯布局和双飞翼布局都是为了解决两边定宽，中间自适应的三栏布局，中间栏在最前面优先渲染，多见于商城类网站布局。双飞翼布局不用设置相对布局，以及对应的和值。

合理的布局是产品的基础，可以使人感觉整齐大方，提升用户体验。掌握几种常见的布局形式也是前端开发的基础，对于快速实现页面重构有很大帮助。

原文链接

单列布局

单列布局通常用于网站的首页，分为头部的导航、网页内容、页脚相关信息。

//html

    
    
    


//css
.body{
    max-width: 1200px;
    margin: 0 auto;
}

优点：布局实现简单，界面显示整体性强，给人感觉简洁大方。

左右布局

左右布局常见于博客、后台管理系统，左侧为导航，右侧做内容显示。

//html

float+margin

左侧元素设置成向左浮动并固定宽度，右侧元素左外边距预留出左侧元素的宽度。

//css
.body{
    max-width: 1200px;
    margin: 0 auto;
}

.left{
    width: 200px;
    float: left;
}

.right{
    margin-left: 200px;
}

优点：布局简单，右侧宽带可自适应。

position+margin

左侧元素用绝对定位固定在左边，右侧元素预留左外边距。

.body{
    max-width: 1200px;
    margin: 0 auto;
}

.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

.right{
    margin-left: 200px;
}

优点：左侧内容可固定位置，右侧内容宽度自适应。

圣杯布局

圣杯布局和双飞翼布局都是为了解决两边定宽，中间自适应的三栏布局，中间栏在最前面优先渲染，多见于商城类网站布局。

float+负margin+padding+position

布局步骤：
1、三列内容都设置向左浮动。
2、设置container宽度为100%，设置两侧栏的宽度。
3、设置left左边距为负100%，设置right左边距为负的自身宽度。
4、设置body的padding值给左右两块内容留空间。
5、设置left、right为相对定位，左侧的left属性值为负自身宽度，右侧的right属性值为负自身宽度。

//html

    
    
    


//css
.body{
    padding: 0 150px;
}

.container{
    float: left;
    width: 100%;
}

.left, .right{
    position: relative;
    float: left;
    width: 150px;
}

.left{
    left: -150px;
    margin-left: -100%;
}

.right{
    right: -150px;
    margin-left: -150px;
}

这种布局中html的顺序不能更改，当窗口过小时会出现布局错乱，可以设置min-widthmin-width解决。

双飞翼布局

双飞翼布局始于淘宝UED，与圣杯布局相似，但是做了改进，是用html结构的调整减少了相对属性设置

float+负margin+margin

布局步骤：
1、三列内容都设置向左浮动。
2、设置container宽度为100%，设置左右内容的宽度。
3、设置left左边距为负100%，设置right左边距为负自身宽度。
4、设置content的margin值给左右内容留空间。

//html

    




//css
.container, .left, .right{
    float: left;
}

.container{
    width: 100%;
}

.left{
    width: 150px;
    margin-left: -100%;
}

.right{
    width: 150px;
    margin-left: -150px;
}

.content{
    margin: 0 150px;
}

优点：

圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。

双飞翼布局不用设置相对布局，以及对应的left和right值。

通过引入相对布局，可以实现三栏布局的各种组合，例如对右侧栏设置position: relative; left: 150px; ,可以实现left+right+content的布局。

flex布局

与传统布局方式相比，flex提供了一套简洁、完整、响应式的解决方案。
可以看下flex布局学习了解一下。

这里只是简单介绍几种布局方式，display+position+float属性可以实现不同特殊效果布局展现形式，选择最适合的方案才是王道

混合云私有云 css布局 css布局教程学习css布局 div布局布局html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115527.html

CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

garfileo 2019-08-30 11:25 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

CoderDock 2019-08-30 15:44 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0