「前端那些事儿」③ 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. sap 软件架构

    1:

  2. Python数据分析与挖掘常用模块

    python在数据科学方面需要用到的库: a.Numpy:科学计算库.提供矩阵运算的库. b.Pandas:数据分析处理库 c.scipy:数值计算库.提供数值积分和常微分方程组求解算法.提供了一个非 ...

  3. Oracle 26表空间的管理

    一.查看用户表空间 熟悉与表空间相关的数据字典 查看用户的表空间 相关的数据字典:(用于查询数据库信息的数据库表)dba_tablespaces (管理员级别的表空间的描述信息) User_table ...

  4. scrum学习笔记

    http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html#tab-id-1 推荐电子书 <Scrum精髓_敏捷转型指南> ...

  5. php中获取中文首字母程序代码

    年会抽奖,要求一等奖的中奖概率是0.12%,二等奖中奖概率是3%,三等奖中奖概率是12%,其他中奖概率是都是谢谢惠顾. <?php /** * 抽奖 * @param int $total */ ...

  6. js页面路径拼接字符串进行参数传递

    页面路径拼接字符串进行参数传递: 参数传递页面: <style> input,button{ border: 1px solid red; } body { font-size:24px; ...

  7. 【winform】DataGridView控件[表格]

    一.表格 0.从数据库获取一个表在DataGridView中显示: 数据库查询的方式大同小异,重点是如何把数据显示到控件中的方法,通过dataset作为数据的中继,把Adapter中的数据存到data ...

  8. AI 基础

    what AI ? 人工智能(Artificial Intelligence),英文缩写为AI. 人工智能是计算机科学的一个分支,它企图了解智能的实质,并生产出一种新的能以人类智能相似的方式做出反应的 ...

  9. 每天一个Linux命令 10

    文件处理命令:ln命令名称:ln 命令英文原意:link语法: ln -s [原文件] [目标文件] -s 创建软连接功能描述:生成链接文件 #ln -s /etc/issue /tmp/issue. ...

  10. 爬虫----requests模块

    一.介绍 #介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模块的api更加便捷(本质就是封装了urllib3) #注意:requests库发送请求将网页内 ...