css 常用布局
「前端那些事儿」③ 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 常用布局的更多相关文章
- CSS常用布局实现方法
CSS 布局对我来说,既熟悉又陌生.我既能实现它,又没有很好的了解它.所以想总结一下,梳理一下 CSS 中常用的一列,两列,三列布局等的实现方法.本文小白,仅供参考.但也要了解下浮动,定位等. 一.一 ...
- css常用布局
1.一列布局 html: <div class="header"></div> <div class="body">< ...
- CSS常用布局整理(二)
1-2-1单列变宽布局 side列定宽300px,content列变宽,尺寸是100%-300px.核心的问题就是浮动列的宽度应该等于“100% - 300px”,而CSS显然不支持这种带有减法运算的 ...
- CSS常用布局整理
固定宽度布局 1-2-1布局(浮动) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <titl ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- html+css 常用布局
1.中间固定宽度,两侧自适应 1.1 flex布局 <!DOCTYPE html><html lang="en"> <head> <met ...
- CSS常用布局技巧 实例
末尾用省略号! white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ######################## 两个i ...
- CSS常用布局学习笔记
水平居中-行内元素 如果是文字和图片这类的行内元素,则在其父级元素上加上样式:text-align:center; 水平居中-定宽块元素 div{ width:100px; margin:0 auto ...
- DIV+CSS常用网页布局技巧!
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
随机推荐
- sap 软件架构
1:
- Python数据分析与挖掘常用模块
python在数据科学方面需要用到的库: a.Numpy:科学计算库.提供矩阵运算的库. b.Pandas:数据分析处理库 c.scipy:数值计算库.提供数值积分和常微分方程组求解算法.提供了一个非 ...
- Oracle 26表空间的管理
一.查看用户表空间 熟悉与表空间相关的数据字典 查看用户的表空间 相关的数据字典:(用于查询数据库信息的数据库表)dba_tablespaces (管理员级别的表空间的描述信息) User_table ...
- scrum学习笔记
http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html#tab-id-1 推荐电子书 <Scrum精髓_敏捷转型指南> ...
- php中获取中文首字母程序代码
年会抽奖,要求一等奖的中奖概率是0.12%,二等奖中奖概率是3%,三等奖中奖概率是12%,其他中奖概率是都是谢谢惠顾. <?php /** * 抽奖 * @param int $total */ ...
- js页面路径拼接字符串进行参数传递
页面路径拼接字符串进行参数传递: 参数传递页面: <style> input,button{ border: 1px solid red; } body { font-size:24px; ...
- 【winform】DataGridView控件[表格]
一.表格 0.从数据库获取一个表在DataGridView中显示: 数据库查询的方式大同小异,重点是如何把数据显示到控件中的方法,通过dataset作为数据的中继,把Adapter中的数据存到data ...
- AI 基础
what AI ? 人工智能(Artificial Intelligence),英文缩写为AI. 人工智能是计算机科学的一个分支,它企图了解智能的实质,并生产出一种新的能以人类智能相似的方式做出反应的 ...
- 每天一个Linux命令 10
文件处理命令:ln命令名称:ln 命令英文原意:link语法: ln -s [原文件] [目标文件] -s 创建软连接功能描述:生成链接文件 #ln -s /etc/issue /tmp/issue. ...
- 爬虫----requests模块
一.介绍 #介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模块的api更加便捷(本质就是封装了urllib3) #注意:requests库发送请求将网页内 ...