css三栏布局技巧,CSS-三栏布局的常用6种方法

三栏布局一般指左右两栏固定宽度，中间一栏自适应的布局方法，也是许多网站常用的布局方式。如下图：

该示例在一个html文件中编写，为方便起见，预先写好一个通用的css，左右宽度都为100px；

1.浮动三栏

左右两栏均为float，中间一栏宽度自适应，这里为了中间一栏的安全输入空间，要为中间一栏加上左右margin。因为block元素自带换行效果，所以main要放在左右元素的后面，而dom元素是按顺序加载的，因此main不能在左右两栏之间完成加载。

2.利用BFC

利用BFC不与float元素叠加的特点，让中间一栏通过设置overflow属性拥有BFC特性，实现了这个三栏布局。

该布局同样不能让main在左右两栏之前加载。

后面介绍的四种三栏布局可以让main在左右两栏之前加载。

3.absolute实现三栏布局

使用absolute定位，只需将左右两栏绝对定位到窗口两边，为main添加左右margin创建安全输入区域即可。因为absolute是以第一个定位不是static的父元素定位的，为这个整体添加一个定位不是static的父元素，绝对定位不会与header，footer等重叠。并且main的dom位置在left和right的前面，可在左右两栏之前完成加载

4.flex

flex为一种弹性布局方式，flex-direction默认为row，即按行排列；order可以指定在元素在一个flex盒子之中的排列顺序；将main放在left和right前面，并为其设置order至left和right的中间，可以让main优先加载，并且位置不变；flex-grow属性为元素相对放大比率，默认为0，即不放大，设置为1时会自动扩展。

5.圣杯布局

首先，建立main，left，right之间的dom结构，将main的width设为100%，main,left和right均为向左浮动，此时的界面如图：

然后利用负margin对元素碰撞的改变，让下面的两个元素上去。对left，要到最左边，margin-left设为-100%，right要到右边，margin-left设为负的自身宽度，现在界面如图

到这里的步骤都与下面的双飞翼布局一致。

虽然left和right都到了main两边，但main还没有安全输入区间，比如圣杯两字被left盖住了。

为这个整体的父元素box加padding，并用relative将left，right移至对应的位置。

即完成了圣杯布局，可完成main在left，right之前加载。

6.双飞翼布局

双飞翼的步骤基本同圣杯布局，不过在main里面嵌套了一个块级元素，为那个块级元素设置margin，在这个块级元素之中输入的内容不会被覆盖，并在left，right之前载入

css三栏布局技巧,CSS-三栏布局的常用6种方法相关推荐

微信小程序布局技巧（三）
微信小程序布局技巧(三) 前言小程序适配物理像素小程序中的px px和rpx转换应用尾巴前言本文是微信小程序(本文后面统称小程序)布局技巧系列最后一篇文章,主要说明小程序的屏幕适配问题. ...
php比较两个变量的值_总结PHP不用第三个变量交换两个变量的值的几种方法
"PHP不用第三个变量交换两个变量的值"这个题看到过好多次了,看来面试确实喜欢考这道题.今天,对于这个题目,我自己总结了几种方法,可能不全,大家来互相补充. 有些仅适用于字符串,方 ...
android布局技巧：创建高效布局
Android UI工具包提供了一些布局管理器,它们使用起来相当容易,而且,大多数的时候,你只需要使用它们最基本的特征来实现UI. 执着于基本特征的使用对于创建UI来说,往往不是最高效的.一个常见的例 ...
css布局技巧-css三角巧妙运用
css 超出隐藏滚动条_CSS滚动条隐藏并可以滚动的3种方法实现
在CSS中,隐藏滚动条的同时还支持滚动是可以实现的,而且方法也有不少.下面分享三种CSS滚动条隐藏并可以滚动的方法. 方法1:计算滚动条宽度并隐藏起来实例下面给一个简化版的代码 ...... .o ...
html 图片透明字不透明,CSS实现背景图片透明，文字不透明效果的两种方法
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...
你不知道的小技巧 — 把对象交给spring管理的3种方法及经典应用
背景先说一说什么叫把对象交给spring管理.它区别于把类交给spring管理.在spring里采用注解方式@Service.@Component这些,实际上管理的是类,把这些类交给spring来负 ...
cmd echo写入shell_渗透技巧——通过cmd上传文件的N种方法
0x00 前言在渗透测试的过程中,常常需要向目标主机上传文件,我在最近的学习测试过程中就碰到了这个问题,要求只能通过cmd shell向目标主机(Windows系统)上传文件,所以本文就对该技巧做一 ...
ldap服务器配置信息错误,技巧：排除LDAP主机服务器故障的两种方法
轻量级目录访问协议(LDAP) 允许你拥有一个主服务器+从服务器设置,拥有一旦发生故障时的容错功能或者分散工作量的功能.这拥有明显的优势.但是,它也隐藏了主服务器的一些问题. 如果你的主服务器关机,从 ...

css三栏布局技巧,CSS-三栏布局的常用6种方法

css三栏布局技巧,CSS-三栏布局的常用6种方法相关推荐

最新文章

热门文章