在前端开发中经常会碰到各种类型布局的网页,这要求我们对css网页布局非常熟悉。其中水平垂直居中布局,多列布局等经常会被使用到,今天就来解决一下css布局方面的问题。

水平垂直居中的几种方法

说到水平垂直居中布局我们一般会立马想到以下几种情况:

实验参数设置

  1. <div class="container">
  2. 123
  3. <p class="inner">456</p>
  4. <span class="inner">789</span>
  5. <img class="inner" src="img/1.jpg">
  6. </div>

未脱离文档流时

文本元素

  1. /*方法一:*/
  2. /*配合单行文字使用*/
  3. .container{
  4. height: 400px;
  5. width: 400px;
  6. border: 1px solid red;
  7. text-align:center;
  8. line-height:400px;
  9. }
  10. /*方法二:*/
  11. .container{
  12. height: 400px;
  13. width: 400px;
  14. border: 1px solid red;
  15. text-align:center;
  16. }
  17. .container:after{
  18. display:inline-block;
  19. content:"";
  20. height:100%;
  21. vertical-align:middle;
  22. }

行内元素

  1. /*方法一:*/
  2. .container{
  3. height: 400px;
  4. width: 400px;
  5. border: 1px solid red;
  6. text-align:center;
  7. display:table-cell;
  8. vertical-align:middle;
  9. }
  10. /*方法二:*/
  11. .container{
  12. height: 400px;
  13. width: 400px;
  14. border: 1px solid red;
  15. text-align:center;
  16. }
  17. .container:after{
  18. display:inline-block;
  19. cotent:"";
  20. height:100%;
  21. vertical-align:middle;
  22. }

块状元素

  1. /*方法一:*/
  2. .container{
  3. height: 400px;
  4. width: 400px;
  5. border: 1px solid red;
  6. text-align:center;
  7. display:table-cell;
  8. vertical-align:middle;
  9. }
  10. /*方法二:*/
  11. /*配合多行文本使用*/
  12. .container{
  13. height: 400px;
  14. width: 400px;
  15. border: 1px solid red;
  16. text-align:center;
  17. display:table-cell;
  18. vertical-align:middle;
  19. }
  20. .inner{
  21. width:200px; /*需要给子元素一个宽度*/
  22. margin: auto;
  23. }

替换元素

常见的替换元素有:<img> <input> <textarea> <select> <button>

  1. /*方法一:*/
  2. .container{
  3. height: 400px;
  4. width: 400px;
  5. border: 1px solid red;
  6. text-align:center;
  7. }
  8. .container:after{
  9. display:inline-block;
  10. cotent:"";
  11. height:100%;
  12. vertical-align:middle;
  13. }
  14. .inner{
  15. vertical-align:middle;
  16. }
  17. /*方法二:*/
  18. .container{
  19. height: 400px;
  20. width: 400px;
  21. border: 1px solid red;
  22. text-align:center;
  23. display:table-cell;
  24. vertical-align:middle;
  25. }
  26. .inner{
  27. vertical-align:middle;
  28. }

水平垂直居中的终极方法:

  1. .container{
  2. height: 400px;
  3. width: 400px;
  4. border: 1px solid red;
  5. display: flex;
  6. align-items: center;
  7. justify-content: center;
  8. /*以下是个各种兼容代码*/
  9. /* 老版本语法: 比较少用*/
  10. display: -webkit-box;
  11. display: -moz-box;
  12. display: -webkit-flex;
  13. display: -ms-flexbox;
  14. -webkit-box-align: center;
  15. -moz-box-align: center;
  16. -ms-flex-align: center;
  17. -webkit-align-items: center;
  18. -webkit-box-pack: center;
  19. -moz-box-pack: center;
  20. -ms-flex-pack: center;
  21. -webkit-justify-content: center;
  22. }

优点:同样的代码解决各种问题

缺点:IE8及以下不兼容

脱离文档流时

行内元素、块状元素、替换元素

由于行内元素加上position:absolute;之后会生成一个块级框,与块状元素类似,其高宽可控

  1. /*当知道子元素高宽时*/
  2. .container{position:relative;}
  3. .inner{
  4. position: absolute;
  5. width:100px;
  6. height: 50px;
  7. top:50%;
  8. left:50%;
  9. margin-left:-50px;
  10. margin-top:-25px;
  11. }
  12. 或者
  13. .inner{
  14. position:absolute;
  15. top:0;
  16. bottom:0;
  17. left:0;
  18. right:0;
  19. width:200px;
  20. height:设置为适当的高度;
  21. margin: auto;
  22. }
  23. /*当子元素高宽未知时*/
  24. .inner{
  25. position: absolute;
  26. top:50%;
  27. left:50%;
  28. -webkit-transform: translate(-50%,-50%);
  29. -o-transform: translate(-50%,-50%);
  30. -moz-transform: translate(-50%,-50%);
  31. -ms-transform: translate(-50%,-50%);
  32. transform: translate(-50%,-50%);
  33. }

常见的几种页面布局

固定布局

负边距除去列表右边框
  1. <style type="text/css">
  2. #div1 { width: 580px; height: 380px; margin: 0 auto; border: 3px solid lightblue; overflow: hidden; margin-top: 10px; }
  3. .box { width: 180px; height: 180px; margin: 0 20px 20px 0; background: lightgreen; float: left; }
  4. #div2 { margin-right: -20px; /*通过在外面包裹的div上添加负边距,除去列表的右边框*/}
  5. </style>
  6. <div id="div1">
  7. <div id="div2">
  8. <div class="box"></div>
  9. <div class="box"></div>
  10. <div class="box"></div>
  11. <div class="box"></div>
  12. <div class="box"></div>
  13. <div class="box"></div>
  14. </div>
  15. </div>
双飞翼布局
  1. 三列布局,中间宽度自适应,两边定宽;
  2. 中间栏要在浏览器中优先展示渲染;
  3. 允许任意列的高度最高;
  4. 要求只用一个额外的DIV标签;
  5. 要求用最简单的CSS、最少的HACK语句;
  1. body,html { height: 100%; font: 20px/40px "microsoft yahei"; color: white; }
  2. #container { width: 90%; margin: 0 auto; height: 100%; }
  3. #header,#footer { height: 12.5%; background: deepskyblue; }
  4. #main { height: 75%; }
  5. #center,#left,#right { height: 100%; float: left; }
  6. #center { width: 100%; background: lightgreen; }
  7. #left { background: lightcoral; width: 20%; margin-left: -100%; }
  8. /*左侧设置margin-left: -100%;使得left移上去*/
  9. #right { background: lightblue; width: 20%; margin-left: -20%; }
  10. /*右侧设置margin-left: -20%;使得right在右侧*/
  11. #main-inner { margin: 0 20%; }
  12. /*双飞翼布局和圣杯布局的区别在于是否有main-inner块,如果没有可直接通过设置
  13. #center{padding: 0 20%;}
  14. #left{position:relative;left:-leftwidth;}
  15. #right{position:relative;right:-rightwidth;}
  16. </style>
  17. <div id="container">
  18. <div id="header">
  19. header
  20. </div>
  21. <div id="main">
  22. <div id="center">
  23. <div id="main-inner">
  24. center
  25. </div>
  26. </div>
  27. <div id="left">
  28. left
  29. </div>
  30. <div id="right">
  31. right
  32. </div>
  33. </div>
  34. <div id="footer">
  35. footer
  36. </div>
  37. </div>

流式布局

网页中主要的划分区域的尺寸使用百分数(搭配min-、max-属性使用)图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕,在当今的移动端开发也是常用布局方式。

缺点:宽度使用百分比定义,但是高度和文字大小等大都是用px来固定(现在用em,rem),所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调。

弹性布局

由于前人总结的很好,我就不造轮子了

一劳永逸的搞定 flex 布局

由于flex是css3的属性,低版本浏览器不兼容

瀑布流布局

masonry实现瀑布流布局

具体使用方法可参考官网教程

响应式布局

  1. @media screen and (max-width:320px){ /*视窗<=320px*/
  2. /*css code */
  3. }
  4. @media screen and (min-width:769px)and(max-width:1000px){ /* 769px<=视窗<=1000px */
  5. /*css code */
  6. }

清除浮动的几种方法

空标签

  1. <div style="clear:both;"></div>

优点:简单明了

缺点:增加无意义的空标签,违背了结构表现分离,给后期维护带来了问题。

利用BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

BFC布局规则:

  • 内部的Box会在垂直方向,一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时,浮动元素也参与计算

以下元素会生成BFC:

  1. 根元素
  2. float属性不为none
  3. overflow不为visible
  4. positionabsolutefixed
  5. displayinline-block, table-cell, table-caption, flex, inline-flex中任何一个

after伪类样式

给父元素增加clearfix类即可,推荐使用

  1. .clearfix:after{
  2. content: ".";
  3. display: block;
  4. height: 0px;
  5. clear: both;
  6. visibility: hidden;
  7. }

参考文章:

  1. CSS3与页面布局学习总结(四)——页面布局大全
  2. 一劳永逸的搞定 flex 布局

CSS页面布局常见问题总结的更多相关文章

  1. CSS 页面布局、后台管理示例

    CSS 页面布局.后台管理示例 页面布局 1.头部菜单 2.中间内容/中间左侧菜单 3.底部内容 <div class='pg-header'> <div style='width: ...

  2. css页面布局

    写在前面: 页面布局整体上可以分为两类:固定宽度(一般固定960px):流式布局:将流式布局转换为固定布局很容易,只需要外围再包括一个div,为其设置宽度即可. html默认的布局方式是将每个块状标签 ...

  3. css页面布局总结

    W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html.xml),表现 标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成.这个标准倡 ...

  4. CSS页面布局与网格(上)

    1.布局规划 1.1 网格 网格系统是设计师在切分布局时作为参照的一组行和列. 1.2 布局辅助类 类名用于为布局添加样式.为了让样式可以重用,让类名表达其意图. .column { /* 一般列的样 ...

  5. 第6天:DIV+CSS页面布局实战

    今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真 ...

  6. 一、CSS概述 二、CSS的选择器(认识) 三、CSS样式和属性(练习) 四、重构商城首页DIV+CSS(页面布局)(重点) 浮动/更改显示方式

    一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...

  7. 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局

    一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...

  8. dic+css页面布局分享

    HTML部分代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  9. 第五章 CSS页面布局基础

    1.标准文档流 在正常流中,在没有使用浮动或者定位的情况下,文本元素按照从上到下.从左到右的格式布局.这是浏览器的默认行为.在正常流中,块级元素从上到下依次排列,而行级元素从左到右依次排列.正常流中的 ...

随机推荐

  1. .NET手记-定义类和接口的扩展方法

    对于iOS开发者来说,使用扩展方法是家常便饭.因为有很多的类是有系统框架的定义的,我们不能修改或者不想修改他们的源码,但是我们又想要给他添加一些扩展方法来使用.这时定义扩展方法就是很有用的方式了,正如 ...

  2. app测试自动化之定位元素

    app中元素定位是通过uiautomatorviewer来查看,这个是android sdk中自带的一个工具,可以在sdk家目录的tools下找到: 双击打开之后,点击第二个按钮即可把手机当前界面的元 ...

  3. 当x,y和theta都是向量的时候如何计算损失

    function J = computeCost(X, y, theta) %COMPUTECOST Compute cost for linear regression % J = COMPUTEC ...

  4. 【WebAPI No.2】如何WebAPI发布

    介绍: Asp.Net Core在Windows上可以采用两种运行方式.一种是自托管运行,另一种是发布到IIS托管运行. 自托管 首先有一个完好的.Net Core WebAPI测试项目,然后进入根目 ...

  5. centos下如何使用sendmail发送邮件

    最近在实施服务端日志监控脚本,需要对异常情况发送邮件通知相关责任人,记录下centos通过sendmail发送邮件的配置过程. 一.安装sendmail与mail 1.安装sendmail:  1) ...

  6. Eclipse markers窗口使用

    项目提示有错误,又不知道错误是哪里导致的,这时你可以打开eclipse的markers窗口查看错误信息或者警告信息 markers窗口提示信息: 到项目工程目录的settings目录下找到org.ec ...

  7. Android_TextView使用Spanable

    TextView通常用来显示普通文本,但是有时候需要对其中某些文本进行样式.事件方面的设置.Android系统通过SpannableString类来对指定文本进行相关处理,具体有以下功能: 1.Bac ...

  8. Android并发编程 原子类与并发容器

    在Android开发的漫漫长途上的一点感想和记录,如果能给各位看官带来一丝启发或者帮助,那真是极好的. 前言 上一篇博文中,主要说了些线程以及锁的东西,我们大多数的并发开发需求,基本上可以用synch ...

  9. PHP-CPP开发扩展(三)

    PHP-CPP是一个用于开发PHP扩展的C++库.本节讲解PHP函数形参相关的实现. 指定函数参数类型 有时候,我们需要指定函数的形参是数组或者指定的,那么在PHP-CPP里是否可以指定函数的参数类型 ...

  10. python3爬虫——下载unsplash美图到本地

    最近发现一个网站www.unsplash.com ( 没有广告费哈,纯粹觉得不错 ),网页做得很美观,上面也都是一些免费的摄影照片,觉得很好看,就决定利用蹩脚的技能写个爬虫下载图片. 先随意感受一下这 ...