CSS实现各类分栏布局
在CSS中,实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning),它可以将文档中的某个元素从其原本位置上移除,并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动(float)
在CSS中,实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning),它可以将文档中的某个元素从其原本位置上移除,并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动(float)概念。
绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用,也可以结合在一起,相辅相成。
1、绝对定位
绝对定位的优势在于,我们可以丝毫不差地精确控制任何元素的位置—这里面没有什么需要猜测或者运气的成分。由于应用了绝对定位的元素被不留痕迹地从常规文档流中完全移除,所以它也不会为其他元素带来任何的影响。
那么让我们试一试用绝对定位如何实现下面的布局。
这是一个三栏的布局,并且是居中显示的。其中,A栏是主体内容栏,B栏和C栏都是侧边栏。首先,我们不可能直接用绝对定位将A、B、C三栏定位到居中的位置,因为每个人显示器的分辨率是不同的,在1024X768分辨率的显示器上定位的居中效果,在别的分辨率的显示器上看到的效果肯定不会是居中显示的,那么,该如何解决这个问题呢?
幸好,在绝对定位模型中有个极为有用的特性,那就是:若某个绝对定位元素的容器也被定位过,那么该元素指定的top和left值将不会基于文档的根元素html(也就是浏览器窗口的左上角)计算,而是会基于其容器的左上角计算这个偏移量。换句话说,也就是:被定位过的容器将扮演其中所有元素绝对定位起始点的角色。
所以,利用这个特性,我们给A、B、C栏的外部加上一个容器D,如下图:
然后,我们让容器D居中,并给它加上一个属性:position:relative,这样,再用绝对定位定位A、B、C的top和left值,A、B、C的位置就会基于容器D的左上角的位置来计算了,这样就可以实现我们期望的三栏居中的效果了。
但是,我们常用的布局并没有这么简单,除了三栏之外,我们还需要一个页头和一个页脚,如下图:
这时候,再用绝对定位布局就行不通了,因为绝对定位的元素会从文档流中完全移除,这时,页脚会紧挨着页头,显示在页头的下方。
如果我们一定要采用绝对定位的话,那么必须预先知道这三栏中每一栏的高度,然后再根据其中最高的一栏定位页脚。若是任意一栏中的文本长度无法确定的话,除了使用JavaScript,我们也只能放弃绝对定位的念头,转而投入到浮动布局的怀抱。
2、浮动
浮动的本意是要将插入到文章中的图片向左或者向右浮动,使图片下方的文字自动环绕在它的周围,使图片的左边或者右边不会出现一大块的留白。
浮动的语法虽然简单,但却不那么容易掌握,下面让我们举例说明如何用浮动来进行布局。同样,我们要实现一个带页脚的三栏布局。如下图:
如何用浮动实现这样的效果呢?其实很简单:
1、设定E的宽度,让E居中
2、设定A、B、C的宽度,将A、B、C分别向左浮动
3、给页脚设置clear属性
需要说明的是,浮动布局依然遵循常规文档流,所以与绝对定位相比,浮动定位时HTML源文件中元素声明的位置显得格外重要。 当然,解决这个问题的最简单的方法就是在源文件中交换左栏和右栏的声明次序,也有方法不用交换各栏的次序也可以实现同样的布局,但是,这就要用到一种比较晦涩的使用负边距值的方法。一般情况下,人们十有八九会选择交换源文件中左中两栏的声明次序。
转载于:https://www.cnblogs.com/ndos/p/8367180.html
CSS实现各类分栏布局相关推荐
- column分栏布局只是文字布局吗_写给自己看的CSS columns分栏布局教程
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8436 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可, ...
- css 分栏布局 columns
分栏布局 – 简介 将子元素拆分为列,使用场景并不多,重点掌握 columns 和 column-gap,其他用得少,简单了解下即可. 优点: 不会改变元素原本的display计算值 <ul s ...
- Css布局学习之column的分栏布局
Css布局学习之column的分栏布局 一. column分栏布局的常用属性: column-count 设置分栏的个数 column-width 设置分栏的宽度 注:一般个数和宽度有冲突,所以col ...
- 纯CSS实现侧边栏/分栏高度自动相等
一.为何要分栏高度一致? 分栏高度一致的目的是更加美观.举两个例子吧 2.1 对于分栏布局,我们或许会用边框(border)进行分隔,就如鄙人博客的分栏 此时最担心的问题就是高度不一致,尤其是无边框属 ...
- 网页设计中分栏布局的几种实现方案
在网页设计中,分栏布局是常用的布局手法,一般有两栏布局,三栏布局.这其中又以部分栏固定,部分栏自适应的方式最为常见.下面我们先以常见的三栏布局开始,描述一下常用的几种实现方案. 三栏布局 三栏布局最常 ...
- 【LaTeX笔记12】Latex分栏布局及模板使用
经过三天的学习,记录了12个笔记,所有的代码已经上传到GitHub. 1 分栏布局 分栏布局是我们阅读文献经常见到的排版布局,下面给一种分栏布局的基本方法. % 导言区 \documentclass[ ...
- pc端常见的几种布局:分栏布局,通栏布局,版心布局,版心布局
pc端常见的几种布局:分栏布局,通栏布局,版心布局 1分栏布局: float 2 通栏布局: 在页面中不设置宽度,让默认宽度和浏览器等宽的布局 3.版心布局: 内容始终出现在整个浏览器版面的中心固定的 ...
- column分栏布局和等高布局和双飞翼布局和圣杯布局
column分栏布局 column-count:分栏的个数 column-width:分栏的宽度 column-gap:分栏的间距 column-rule:分栏的边线 column-span:合并分栏 ...
- css的经典三栏布局如何实现,css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 左边 中间 右边 body { padding: ; margin: ; } /* 绝对定位 */ .left, .right { po ...
最新文章
- SAP UI5 library-dbg.js - local location
- bcp 不能调用where 子句_MySQL中IS NULL、IS NOT NULL、!=不能用索引?胡扯!
- 【今日CV 视觉论文速览】29 Nov 2018
- 安卓开发笔记(二十二):读取本地(内置)html文件并实现和Javascript交互
- 清北学堂模拟赛day7 错排问题
- struts2 拦截器_Struts 2拦截器示例
- ASP.NET页面间的传值方法(2)
- tiledmap 图块属性_cocos2dx[3.4](25)——瓦片地图TiledMap
- E-prime实验设计常用技术
- ADS仿真遇到error如何查找原因
- java实现电子面单pdf生成_电子面单打印功能实现方法
- 自动检测删除微信好友:学会这些方法,别再花冤枉钱!
- 前端 - token 是什么?为什么每次请求头(HEADS)里要携带它?
- 基于Aspect的情感分析
- 在Windows上部署一个FHIR服务器(HAPI FHIR)
- EAX、ECX、EDX、EBX、ESI、EDI、ESP、EBP寄存器
- 介绍一个关于小米Zigbee的开源项目
- 交易的核心精髓是什么?
- MySQL经典练习题,看看你会几道?
- 为什么数组的下标是从0开始而不是从1开始?
热门文章
- 扫个地用得到5TOPS算力?自动驾驶芯片公司这样说
- 帮腾讯云拿下行业第一的程序员们,不穿格子衫和人字拖
- 腾讯大数据平台,要“没人管”了
- 25分钟训练机器人学会6个动作,伯克利开发高效机器人操纵框架
- 七夕节,阿里云AI发女朋友了
- ACL 2020三大奖项出炉!知名学者夫妇曾先后获终身成就奖,时间检验奖回溯95年经典著作...
- 美国进入紧急状态:谷歌投入1700名工程师上阵抗疫,马斯克称车祸比新冠病毒危险...
- 大牛出品:TensorFlow 2.0入门指南
- 机器“血液”登上Nature:一条假鱼靠它续航36小时,无需固态电池
- Elasticsearch-单机部署避坑指南