布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单列布局、多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现),希望能给需要的小伙伴带来一些帮助。

目录

1.常用居中方法:水平居中,垂直居中,

2.单列布局

3.二列&三列布局:float+margin,position+margin,圣杯布局(float+负margin),双飞翼布局(float+负margin),flex布局

如果你想学习交流html5css3等web前端技术,想多了解一些前端方面的内容,可以加入我们的QQ学习群:27062964,一起学习交流,提升自己,有学习资料和源码分享。或者点击链接直接加入QQ群:https://jq.qq.com/?_wv=1027&k=48DmPsZ

总结

1.常用居中方法

居中在布局中很常见,我们假设DOM文档结构如下,子元素要在父元素中居中:

水平居中

子元素为行内元素还是块状元素,宽度一定还是宽度未定,采取的布局方案不同。下面进行分析:

行内元素:对父元素设置text-align:center;

定宽块状元素: 设置左右margin值为auto;

不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;

通用方案: flex布局,对父元素设置display:flex;justify-content:center;

垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。

父元素一定,子元素为单行内联文本:设置父元素的height等于行高line-height

父元素一定,子元素为多行内联文本:设置父元素的{display:table-cell或inline-block,vertical-align:middle};

块状元素:设置子元素position:fixed(absolute),然后设置margin:auto;

通用方案: flex布局,给父元素设置{display:flex; align-items:center;}。

2.单列布局

特征:定宽、水平居中

常见的单列布局有两种:

一种是header、content、footer宽度都相同,其一般不会占满浏览器的最宽宽度,但当浏览器宽度缩小低于其最大宽度时,宽度会自适应。

一种是header、footer宽度为浏览器宽度,但content以及header和footer里的内容却不会占满浏览器宽度。

对于第一种,对header、content、footer统一设置width或max-width,并通过margin:auto实现居中。

DOM文档:

CSS清单:

对于第二种,header、footer的内容宽度为100%,但header、footer的内容区以及content统一设置max-width,并通过margin:auto实现居中。

DOM文档:

CSS清单:

3. 二列&三列布局

二列布局的特征是侧栏固定宽度,主栏自适应宽度。三列布局的特征是两侧两列固定宽度,中间列自适应宽度。

之所以将二列布局和三列布局写在一起,是因为二列布局可以看做去掉一个侧栏的三列布局,其布局的思想有异曲同工之妙。对于传统的实现方法,主要讨论上图中前三种布局,经典的带有侧栏的二栏布局以及带有左右侧栏的三栏布局,对于flex布局,实现了上图的五种布局。

a. float+margin

原理说明:设置两个侧栏分别向左向右浮动,中间列通过外边距给两个侧栏腾出空间,中间列的宽度根据浏览器窗口自适应。

DOM文档:

布局步骤:

对两边侧栏分别设置宽度,并对左侧栏添加左浮动,对右侧栏添加有浮动。

对主面板设置左右外边距,margin-left的值为左侧栏的宽度,margin-right的值为右侧栏的宽度。

CSS清单:

一些说明:

* 注意DOM文档的书写顺序,先写两侧栏,再写主面板,更换后则侧栏会被挤到下一列(圣杯布局和双飞翼布局都会用到)。* 这种布局方式比较简单明了,但缺点是渲染时先渲染了侧边栏,而不是比较重要的主面板。

二列的实现方法

如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的margin-right值,其他操作相同。反之亦然。

b. position+margin

原理说明:通过绝对定位将两个侧栏固定,同样通过外边距给两个侧栏腾出空间,中间列自适应。

DOM文档:

布局步骤:

对两边侧栏分别设置宽度,设置定位方式为绝对定位。

设置两侧栏的top值都为0,设置左侧栏的left值为0, 右侧栏的right值为0。

对主面板设置左右外边距,margin-left的值为左侧栏的宽度,margin-right的值为右侧栏的宽度。

CSS清单:

一些说明:

与上一种方法相比,本种方法是通过定位来实现侧栏的位置固定。

如果中间栏含有最小宽度限制,或是含有宽度的内部元素,则浏览器窗口小到一定程度,主面板与侧栏会发生重叠。

二列的实现方法

如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的margin-right值,其他操作相同。反之亦然。

c. 圣杯布局(float + 负margin + padding + position)

原理说明:

主面板设置宽度为100%,主面板与两个侧栏都设置浮动,常见为左浮动,这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来,左侧栏的负边距为100%,刚好是窗口的宽度,因此会从主面板下面的左边跑到与主面板对齐的左边,右侧栏此时浮动在主面板下面的左边,设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容,在外层设置左右padding值为左右侧栏的宽度,给侧栏腾出空间,此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的,两个侧栏并不会像我们理想中的停靠在左右两边,而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局,调整两个侧栏到相应的位置。

DOM文档:

布局步骤:

三者都设置向左浮动。

设置main宽度为100%,设置两侧栏的宽度。

设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。

设置main的padding值给左右两个子面板留出空间。

设置两个子面板为相对定位,sub的left值为负的sub宽度,extra的right值为负的extra宽度。

CSS清单:

一些说明

DOM元素的书写顺序不得更改。

当面板的main内容部分比两边的子面板宽度小的时候,布局就会乱掉。可以通过设置main的min-width属性或使用双飞翼布局避免问题。

二列的实现方法

如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的padding-right值,其他操作相同。反之亦然。

d. 双飞翼布局(float + 负margin + margin)

原理说明:

双飞翼布局和圣杯布局的思想有些相似,都利用了浮动和负边距,但双飞翼布局在圣杯布局上做了改进,在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言,main的margin值变化便不会影响两个侧栏,因此省掉了对两侧栏设置相对布局的步骤。

DOM文档:

布局步骤:

三者都设置向左浮动。

设置main-wrap宽度为100%,设置两个侧栏的宽度。

设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。

设置main的margin值给左右两个子面板留出空间。

CSS清单:

一些说明

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

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

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

二列的实现方法

如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置main-wrap的margin-right值,其他操作相同。反之亦然。

以下是五种布局的flex布局代码:

DOM文档:

CSS清单

与之前所讲的几种传统布局方案相比,flex布局的代码可谓异常简洁,而且非常通用,利用简单的三行CSS即实现了常见的五种布局。

总结

传统的布局方法基于盒状模型,依赖display属性 +position属性 +float属性,逻辑相对复杂,对于实现一些特殊效果,例如垂直居中,尤其复杂繁琐。而flex布局中的flex容器可以根据实际可用空间动态调整子元素的宽高比和顺序,使元素能够尽可能地利用可用空间,同时也能通过缩小来避免超出。flex布局提供了一套简便、完整、响应式的布局方案。

转自  http://www.cnblogs.com/jiaoyu121/p/6965268.html

底通的一个方案:

htm的常见布局的更多相关文章

  1. android开发中常见布局的注意点

    常见布局的注意点 线性布局: 必须有一个布局方向 水平或者垂直 在垂直布局中 只有左对齐 右对齐 水平居中生效 在水平布局中 只有顶部对齐 底部对齐 垂直居中生效 权重:组件按比例分配屏幕的剩余部分( ...

  2. 学习微信小程序之css16常见布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Android 布局学习之——Layout(布局)具体解释二(常见布局和布局參数)

     [Android布局学习系列]   1.Android 布局学习之--Layout(布局)具体解释一   2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数)   ...

  4. css常见布局方式

    CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...

  5. CSS常见布局问题整理

    实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...

  6. css CSS常见布局解决方案

    CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...

  7. Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)

    [Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.And ...

  8. 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

    纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...

  9. 前端进阶系列(二):css常见布局解决方案

    水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...

随机推荐

  1. HDU 5288 OO‘s sequence (技巧)

    题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=5288 题面: OO's Sequence Time Limit: 4000/2000 MS (Jav ...

  2. 关于APICloud读取不到虚拟机及数据库的问题

    工具:apicloud编辑器 虚拟机:夜神虚拟机(nox_setup_v6.0.1.0_full)版本 数据库:Oracle 11G 以为夜神虚拟机版本太高,进程adb.exe读取不出虚拟机和数据库, ...

  3. 二、spring Boot构建的Web应用中,基于MySQL数据库的几种数据库连接方式进行介绍

    包括JDBC.JPA.MyBatis.多数据源和事务. 一.JDBC 连接数据库 1.属性配置文件(application.properties) spring.datasource.url=jdbc ...

  4. .net core中使用GB2312编码的问题

    最近在用.net core写一个爬虫抓取网页上的数据,碰到了网页编码是GBK的页面,抓取的数据都是乱码,当使用Encoding.GetEncoding("GBK")的时候抛出了异常 ...

  5. Selenium与phantomJS 登入豆瓣 有bug

    # -*- coding:utf-8 -*- from selenium import webdriver from selenium.webdriver.common.keys import Key ...

  6. FastDFS并发会有bug,其实我也不太信?- 一次并发问题的排查经历

    前一段时间,业务部门同事反馈在一次生产服务器升级之后,POS消费上传小票业务偶现异常,上传小票业务有重试机制,有些重试三次也不会成功,他们排查了一下没有找到原因,希望架构部帮忙解决. 公司使用的是Fa ...

  7. JMeter接口HTTP请求implementation不选java会报错解决方法

    1.若不对c参数和d参数进行URL编码则需要选择implementation为java: 2.若想不设implementation值,则需进行c参数d参数URLEncoding import java ...

  8. 【java】method.invoke(方法底层所属对象/null,new Object[]{实际参数})

    反射调方法时无论是静态/非静态,固定/可变参数,都有Object对象数组对参数进行包装. package com.tn.clas; import java.lang.reflect.Method; i ...

  9. CentOS 7部署ASP.NET Core应用程序

    看了几篇大牛写的关于Linux部署ASP.NET Core程序的文章,今天来实战演练一下.2017年最后一个工作日,提前预祝大家伙元旦快乐.不扯淡,直接进入正题.您有任何问题请在评论区留言. 1.环境 ...

  10. bzoj 3718: [PA2014]Parking

    Description 你的老板命令你将停车场里的车移动成他想要的样子. 停车场是一个长条矩形,宽度为w.我们以其左下角顶点为原点,坐标轴平行于矩形的边,建立直角坐标系.停车场很长,我们可以认为它一直 ...