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

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

居中布局

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

1、水平居中

a) inline-block + text-align

.parent{
text-align: center;
}
.child{
display: inline-block;
}
复制代码

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

b) table + margin

.child{
display: table;
margin: 0 auto;
}
复制代码

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

c) absolute + transform

.parent{
position: relative;
height:1.5em;
}
.child{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
复制代码

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


.parent{
position: relative;
height:1.5em;
}
.child{
position: absolute;
width:100px;
left: 50%;
margin-left:-50px;
}
复制代码

d) flex + justify-content

.parent{
display: flex;
justify-content: center;
}
.child{
margin: 0 auto;
}
复制代码

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

2、垂直

a) table-cell + vertial-align

.parent{
display: table-cell;
vertical-align: middle;
}
复制代码

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

b) absolute + transform

.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
复制代码

tips:存在css3兼容问题,定宽兼容性良好

c) flex + align-items

.parent{
display: flex;
align-items: center;
}
复制代码

tips:高版本浏览器兼容,低版本不适用

3、水平垂直

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

.parent{
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child{
display: inline-block;
}
复制代码

tips:兼容至IE8 b) absolute + transform

.parent{
position: relative;
}
.child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
复制代码

tips:兼容性稍差,兼容IE10以上 c) flex

.parent{
display: flex;
justify-content: center;
align-items: center;
}
复制代码

tips:兼容差

多列布局

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

a) float + margin

.left{
float: left;
width: 100px;
}
.right{
margin-left: 120px;
}
复制代码

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

.left{
float: left;
width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
复制代码

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

.parent{
display: table; width: 100%;
table-layout: fixed;
}
.left,.right{
display: table-cell;
}
.left{
width: 100px;
padding-right: 20px;
}
复制代码

d) flex

.parent{
display: flex;
}
.left{
width: 100px;
padding-right: 20px;
}
.right{
flex: 1;
}
复制代码

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

a) float + overflow

.left,.center{
float: left;
width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
复制代码

b) table

.parent{
display: table; width: 100%;
table-layout: fixed;
}
.left,.center,.right{
display: table-cell;
}
.right{
width: 100px;
padding-right: 20px;
}
复制代码

c) flex

.parent{
display: flex;
}
.left,.center{
width: 100px;
padding-right: 20px;
}
.right{
flex: 1;
}
复制代码

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

a) float + overflow

.left{
float: left;
margin-right: 20px;
}
.right{
overflow: hidden;
}
.left p{width: 200px;}
复制代码

b) table

.parent{
display: table; width: 100%;
}
.left,.right{
display: table-cell;
}
.left{
width: 0.1%;
padding-right: 20px;
}
.left p{width:200px;}
复制代码

c) flex

.parent{
display: flex;
}
.left{
margin-right: 20px;
}
.right{
flex: 1;
}
.left p{width: 200px;}
复制代码

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

a) float + overflow

.left,.center{
float: left;
margin-right: 20px;
}
.right{
overflow: hidden;
}
.left p,.center p{
width: 100px;
}
复制代码

5、等分

a) float + margin

.parent{
margin-left: -20px;
}
.column{
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
复制代码

b) table + margin

.parent-fix{
margin-left: -20px;
}
.parent{
display: table;
width:100%;
table-layout: fixed;
}
.column{
display: table-cell;
padding-left: 20px;
}
复制代码

c) flex

.parent{
display: flex;
}
.column{
flex: 1;
}
.column+.column{
margin-left:20px;
}
复制代码

6、等高

a) float + overflow

.parent{
overflow: hidden;
}
.left,.right{
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left{
float: left; width: 100px;
}
.right{
overflow: hidden;
}
复制代码

b) table

.parent{
display: table;
width: 100%;
}
.left{
display:table-cell;
width: 100px;
margin-right: 20px;
}
.right{
display:table-cell;
}
复制代码

c) flex

.parent{
display:flex;
width: 100%;
}
.left{
width: 100px;
}
.right{
flex:1;
}
复制代码

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

效果图

flex

.main {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.item {
display: inline-block;
}
.empty{
height: 0;
visibility: hidden;
}
复制代码

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

圣杯布局&双飞翼布局

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

圣杯布局

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

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

双飞翼布局

ps: “这不是一样的图嘛?” “对!就是一样的,因为是解决同一种问题的嘛。”

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

<div class="container">
<div class="header">header</div>
<div class="wrapper clearfix">
<div class="main col">
<div class="main-wrap">main</div>
</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
<div class="footer">footer</div>
</div>
复制代码
.col {float: left;}
.header {height: 50px;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
.footer {height: 50px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}
复制代码

定位布局

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

<div class="header">header</div>
<div class="wrapper">
<div class="main col">
main
</div>
<div class="left col">
left
</div>
<div class="right col">
right
</div>
</div>
<div class="footer">footer</div>
复制代码
.wrapper { position: relative; }
.main { margin:0 100px;}
.left { position: absolute; left: 0; top: 0;}
.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. window.onload和jquery等待加载的区别

    1.区别 window.onload是等待页面所有文档,图片等元素都加载完成再进行操作,是javascript原生语法. jquery是等待页面文档加载完成时,就进行操作. $(function(){ ...

  2. PHP GZ压缩与解压

    /*将字符串添加至GZ文件*/ function gz_str($str,$gz_name){ $fp = gzopen ($gz_name, 'w9'); gzwrite ($fp, $str); ...

  3. 对象缓冲池 ( cc.pool ) :

    对象缓冲池 ( cc.pool ) : 作用 : 优化创建效率 , 尤其是针对需要多次创建的情况 . 缓冲池 API : 缓冲池 ( cc.pool ) 提供的函数并不多 , 只有5个 . cc.po ...

  4. python_WSGI接口

    WSGI:Web Server Gateway Interface WSGI接口定义非常简单,它只要求Web开发者实现一个函数,就可以响应HTTP请求.我们来看一个最简单的Web版本的“Hello, ...

  5. 极致21点开发DAY1

    最近在学习UI框架,无奈没有完整的项目学习,四处搜索找了这款游戏源码,在Unity2018上完美运行.于是乎开始学习开发这款游戏.今天主要完成的任务时拼UI.搭建了3个场景, StartScene, ...

  6. Java IO--NIO(二)

    在我的上一篇文章JavaNIO详解(一)中介绍了关于标准输入输出NIO相关知识, 本篇将重点介绍基于网络编程NIO(异步IO). 异步IO 异步 I/O 是一种没有阻塞地读写数据的方法.通常,在代码进 ...

  7. 玩转spring boot——war部署

    前言 之前部署spring boot应用是通过直接输入命令“java -jar”来实现的.而有些情况,由于部署环境的制约,只能把项目从jar转换成war才能部署,如新浪云sae的java环境容器.那怎 ...

  8. DataTable插件 后台分页 (服务器端分页)

    <script type="text/javascript">        var persontable; var personQueryCondition = { ...

  9. JS中几种常见的高阶函数

    高阶函数:英文叫Higher-order function.JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数 ...

  10. java 43 接口