「前端那些事儿」③ CSS 布局方案

我们在日常开发中经常遇到布局问题，下面罗列几种常用的css布局方案 话不多说，上代码！

居中布局

以下居中布局均以不定宽为前提，定宽情况包含其中

1、水平居中

a) inline-block + text-align

  1. .parent{
  2.     text-align: center;
  3. }
  4. .child{
  5.     display: inline-block;
  6. }
  7. 复制代码

tips：此方案兼容性较好，可兼容至IE8，对于IE567并不支持inline-block，需要使用css hack进行兼容

b) table + margin

  1. .child{
  2.     display: table;
  3.     margin: 0 auto;
  4. }
  5. 复制代码

tips：此方案兼容至IE8，可以使用<table/>代替css写法，兼容性良好

c) absolute + transform

  1. .parent{
  2.     position: relative;
  3.     height:1.5em;
  4. }
  5. .child{
  6.     position: absolute;
  7.     left: 50%;
  8.     transform: translateX(-50%);
  9. }
  10. 复制代码

tips：此方案兼容至IE9，因为transform兼容性限制，如果.child为定宽元素，可以使用以下写法，兼容性极佳


  2. .parent{
  3.     position: relative;
  4.     height:1.5em;
  5. }
  6. .child{
  7.     position: absolute;
  8.     width:100px;
  9.     left: 50%;
  10.     margin-left:-50px;
  11. }
  12. 复制代码

d) flex + justify-content

  1. .parent{
  2.     display: flex;
  3.     justify-content: center;
  4. }
  5. .child{
  6.     margin: 0 auto;
  7. }
  8. 复制代码

tips：flex是一个强大的css，生而为布局，它可以轻松的满足各种居中、对其、平分的布局要求，但由于现浏览器兼容性问题，此方案很少被使用，但是值得期待浏览器兼容性良好但那一天！

2、垂直

a) table-cell + vertial-align

  1. .parent{
  2. 	display: table-cell;
  3. 	vertical-align: middle;
  4. }
  5. 复制代码

tips：可替换成<table />布局，兼容性良好

b) absolute + transform

  1. .parent{
  2. 	position: relative;
  3. }
  4. .child{
  5. 	position: absolute;
  6. 	top: 50%;
  7. 	transform: translateY(-50%);
  8. }
  9. 复制代码

tips：存在css3兼容问题，定宽兼容性良好

c) flex + align-items

  1. .parent{
  2. 	display: flex;
  3. 	align-items: center;
  4. }
  5. 复制代码

tips：高版本浏览器兼容，低版本不适用

3、水平垂直

a) inline-block + table-cell + text-align + vertical-align

  1. .parent{
  2. 	text-align: center;
  3. 	display: table-cell;
  4. 	vertical-align: middle;
  5. }
  6. .child{
  7. 	display: inline-block;
  8. }
  9. 复制代码

tips：兼容至IE8 b) absolute + transform

  1. .parent{
  2. 	position: relative;
  3. }
  4. .child{
  5. 	position: absolute;
  6. 	left: 50%;
  7. 	top: 50%;
  8. 	transform: translate(-50%,-50%);
  9. }
  10. 复制代码

tips：兼容性稍差，兼容IE10以上 c) flex

  1. .parent{
  2. 	display: flex;
  3. 	justify-content: center;
  4. 	align-items: center;
  5. }
  6. 复制代码

tips：兼容差

多列布局

1、一列定宽，一列自适应

a) float + margin

  1. .left{
  2. 	float: left;
  3. 	width: 100px;
  4. }
  5. .right{
  6. 	margin-left: 120px;
  7. }
  8. 复制代码

tips：此方案对于定宽布局比较好，不定宽布局推荐方法b b) float + overflow

  1. .left{
  2. 	float: left;
  3. 	width: 100px;
  4. 	margin-right: 20px;
  5. }
  6. .right{
  7. 	overflow: hidden;
  8. }
  9. 复制代码

tips：个人常用写法，此方案不管是多列定宽或是不定宽，都可以完美实现，同时可以实现登高布局 c) table

  1. .parent{
  2. 	display: table; width: 100%;
  3. 	table-layout: fixed;
  4. }
  5. .left,.right{
  6. 	display: table-cell;
  7. }
  8. .left{
  9. 	width: 100px;
  10. 	padding-right: 20px;
  11. }
  12. 复制代码

d) flex

  1. .parent{
  2. 	display: flex;
  3. }
  4. .left{
  5. 	width: 100px;
  6. 	padding-right: 20px;
  7. }
  8. .right{
  9. 	flex: 1;
  10. }
  11. 复制代码

2、多列定宽，一列自适应

a) float + overflow

  1. .left,.center{
  2. 	float: left;
  3. 	width: 100px;
  4. 	margin-right: 20px;
  5. }
  6. .right{
  7. 	overflow: hidden;
  8. }
  9. 复制代码

b) table

  1. .parent{
  2. 	display: table; width: 100%;
  3. 	table-layout: fixed;
  4. }
  5. .left,.center,.right{
  6. 	display: table-cell;
  7. }
  8. .right{
  9. 	width: 100px;
  10. 	padding-right: 20px;
  11. }
  12. 复制代码

c) flex

  1. .parent{
  2. 	display: flex;
  3. }
  4. .left,.center{
  5. 	width: 100px;
  6. 	padding-right: 20px;
  7. }
  8. .right{
  9. 	flex: 1;
  10. }
  11. 复制代码

3、一列不定宽，一列自适应

a) float + overflow

  1. .left{
  2. 	float: left;
  3. 	margin-right: 20px;
  4. }
  5. .right{
  6. 	overflow: hidden;
  7. }
  8. .left p{width: 200px;}
  9. 复制代码

b) table

  1. .parent{
  2. 	display: table; width: 100%;
  3. }
  4. .left,.right{
  5. 	display: table-cell;
  6. }
  7. .left{
  8. 	width: 0.1%;
  9. 	padding-right: 20px;
  10. }
  11. .left p{width:200px;}
  12. 复制代码

c) flex

  1. .parent{
  2. 	display: flex;
  3. }
  4. .left{
  5. 	margin-right: 20px;
  6. }
  7. .right{
  8. 	flex: 1;
  9. }
  10. .left p{width: 200px;}
  11. 复制代码

4、多列不定宽，一列自适应

a) float + overflow

  1. .left,.center{
  2. 	float: left;
  3. 	margin-right: 20px;
  4. }
  5. .right{
  6. 	overflow: hidden;
  7. }
  8. .left p,.center p{
  9. 	width: 100px;
  10. }
  11. 复制代码

5、等分

a) float + margin

  1. .parent{
  2. 	margin-left: -20px;
  3. }
  4. .column{
  5. 	float: left;
  6. 	width: 25%;
  7. 	padding-left: 20px;
  8. 	box-sizing: border-box;
  9. }
  10. 复制代码

b) table + margin

  1. .parent-fix{
  2. 	margin-left: -20px;
  3. }
  4. .parent{
  5. 	display: table;
  6. 	width:100%;
  7. 	table-layout: fixed;
  8. }
  9. .column{
  10. 	display: table-cell;
  11. 	padding-left: 20px;
  12. }
  13. 复制代码

c) flex

  1. .parent{
  2. 	display: flex;
  3. }
  4. .column{
  5. 	flex: 1;
  6. }
  7. .column+.column{
  8. 	margin-left:20px;
  9. }
  10. 复制代码

6、等高

a) float + overflow

  1. .parent{
  2. 	overflow: hidden;
  3. }
  4. .left,.right{
  5. 	padding-bottom: 9999px;
  6. 	margin-bottom: -9999px;
  7. }
  8. .left{
  9. 	float: left; width: 100px;
  10. }
  11. .right{
  12. 	overflow: hidden;
  13. }
  14. 复制代码

b) table

  1. .parent{
  2. 	display: table;
  3. 	width: 100%;
  4. }
  5. .left{
  6. 	display:table-cell;
  7. 	width: 100px;
  8. 	margin-right: 20px;
  9. }
  10. .right{
  11. 	display:table-cell;
  12. }
  13. 复制代码

c) flex

  1. .parent{
  2. 	display:flex;
  3. 	width: 100%;
  4. }
  5. .left{
  6. 	width: 100px;
  7. }
  8. .right{
  9. 	flex:1;
  10. }
  11. 复制代码

并排等分，单排对齐靠左布局

效果图

flex

  1. .main {
  2.     display: flex;
  3.     flex-flow: row wrap;
  4.     justify-content: space-between;
  5. }
  6. .item {
  7.     display: inline-block;
  8. }
  9. .empty{
  10.     height: 0;
  11.     visibility: hidden;
  12. }
  13. 复制代码

具体详解请见下文 github.com/zwwill/blog…

圣杯布局&双飞翼布局

此处仅为代码展示，差别讲解请移驾下文 【方案】圣杯布局&双飞翼布局

圣杯布局

【demo】codepen.io/zwwill/pen/…

  1. <div class="container">
  2.     <div class="header">header</div>
  3.     <div class="wrapper clearfix">
  4.         <div class="main col">main</div>
  5.         <div class="left col">left</div>
  6.         <div class="right col">right</div>
  7.     </div>
  8.     <div class="footer">footer</div>
  9. </div>
  10. 复制代码
  1. .container {width: 500px; margin: 50px auto;}
  2. .wrapper {padding: 0 100px 0 100px;}
  3. .col {position: relative; float: left;}
  4. .header,.footer {height: 50px;}
  5. .main {width: 100%;height: 200px;}
  6. .left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
  7. .right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
  8. .clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}
  9. 复制代码

双飞翼布局

ps: “这不是一样的图嘛？” “对！就是一样的，因为是解决同一种问题的嘛。”

【demo】codepen.io/zwwill/pen/…

  1. <div class="container">
  2.     <div class="header">header</div>
  3.     <div class="wrapper clearfix">
  4.         <div class="main col">
  5.             <div class="main-wrap">main</div>
  6.         </div>
  7.         <div class="left col">left</div>
  8.         <div class="right col">right</div>
  9.     </div>
  10.     <div class="footer">footer</div>
  11. </div>
  12. 复制代码
  1. .col {float: left;}
  2. .header {height: 50px;}
  3. .main {width: 100%;}
  4. .main-wrap {margin: 0 100px 0 100px;height: 200px;}
  5. .left {width: 100px; height: 200px; margin-left: -100%;}
  6. .right {width: 100px; height: 200px; margin-left: -100px;}
  7. .footer {height: 50px;}
  8. .clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}
  9. 复制代码

定位布局

简单的绝对定位即可解决问题，为啥还要搞什么圣杯和双飞翼？原因

  1. <div class="header">header</div>
  2. <div class="wrapper">
  3.     <div class="main col">
  4.         main
  5.     </div>
  6.     <div class="left col">
  7.         left
  8.     </div>
  9.     <div class="right col">
  10.         right
  11.     </div>
  12. </div>
  13. <div class="footer">footer</div>
  14. 复制代码
  1. .wrapper { position: relative; }
  2. .main { margin:0 100px;}
  3. .left { position: absolute; left: 0; top: 0;}
  4. .right { position: absolute; right: 0; top: 0;}

css 常用布局的更多相关文章

  1. CSS常用布局实现方法

    CSS 布局对我来说,既熟悉又陌生.我既能实现它,又没有很好的了解它.所以想总结一下,梳理一下 CSS 中常用的一列,两列,三列布局等的实现方法.本文小白,仅供参考.但也要了解下浮动,定位等. 一.一 ...

  2. css常用布局

    1.一列布局 html: <div class="header"></div> <div class="body">< ...

  3. CSS常用布局整理（二）

    1-2-1单列变宽布局 side列定宽300px,content列变宽,尺寸是100%-300px.核心的问题就是浮动列的宽度应该等于“100% - 300px”,而CSS显然不支持这种带有减法运算的 ...

  4. CSS常用布局整理

    固定宽度布局 1-2-1布局(浮动) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <titl ...

  5. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  6. html+css 常用布局

    1.中间固定宽度,两侧自适应 1.1 flex布局 <!DOCTYPE html><html lang="en"> <head> <met ...

  7. CSS常用布局技巧 实例

    末尾用省略号! white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ######################## 两个i ...

  8. CSS常用布局学习笔记

    水平居中-行内元素 如果是文字和图片这类的行内元素,则在其父级元素上加上样式:text-align:center; 水平居中-定宽块元素 div{ width:100px; margin:0 auto ...

  9. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

随机推荐

  1. SybaseIQ上SQL基本使用

    锁定: sp_iqlocks 踢人: 存储过程查找: sybase central里面查询的命令(查找过滤器例如:%table%),Sybase Central/Sybase IQ 15/服务器/xx ...

  2. slf4j日志使用

    scala中 trait LogSupport { protected val log = LoggerFactory.getLogger(this.getClass) } 需要要到的类 extend ...

  3. form提交xml文件

    --为何ajax提交不了xml?--原因:Request.Form["Data"]这种获取参数方式,原本就不是mvc路由参数获取方式,这是Asp.net中webfrom页面获取参数 ...

  4. 正则表达式（re模块）

    s='hello world' print(s.find('llo')) #找到llo ret=s.replace('ll','xx') #用xx代替ll print(ret) print(s.spl ...

  5. 重新设计导出API

    优雅的API是清晰简洁的,就像少女的肌肤一样柔滑. 背景 API 是软件应用向外部提供自身服务的一种形态和公开接口.就像一个人的着装打扮.举止言行.形象状态,是其内在的某种体现.很少有人能看到对方灵魂 ...

  6. python 文本处理操作

    打开和关闭文件 open 函数 用Python内置的open()函数打开一个文件,创建一个file对象,相关的方法才可以调用它进行读写 ''' 模式 描述 r 以只读方式打开文件.文件的指针将会放在文 ...

  7. openGL学习----光照

    0.光照处理时候,向量点乘一定要是标准化后的单位向量!!! 1.冯氏光照模型:光照=环境光+漫反射+镜面反射 vec3 result = ambient + diffuse + specular; 一 ...

  8. Python imprt动态模块

    1.解释器内部用的动态导入 directory_variable = __improt__("directory.filename") print(directory_variab ...

  9. @Transacitonal注解不生效之spring中expose-proxy的作用与原理

    几年前记得整理过,@Transacitonal注解的方法被另外一个方法调用的时候,事务是不生效的. 如果大量代码已经这么写了,这个时候抽取出去不现实,怎么办呢? 答案就是在<aop:aspect ...

  10. ubuntu16.04安装wordpress

    ubuntu16.04安装wordpress和centos7安装wordpress存在一定的差异. 当然共性大于差异. 共性是lamp环境. wordpress的必备环境. 先共性再差异. 一.搭建l ...