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 ...
随机推荐
- Java package can not import alias
you can not do "import x as y;" in Java. What you CAN do is to extend the class, or write ...
- centos7.5固定局域网ip
有点时候,比如像我们单位,没事干就停一次网,结果ip变了,还得重新看ip,重新配置,很麻烦,所以干脆把自己ip固定,以不变应万变!!! 1.首先查看自己的ip是什么: $ ifconfig eno1: ...
- Linux平台 Oracle 18c RAC安装Part3:DB配置
四.DB(Database)配置 4.1 解压DB的安装包 4.2 DB软件配置 4.3 ASMCA创建磁盘组 4.4 DBCA建库 4.5 验证crsctl的状态 Linux平台 Oracle 18 ...
- QT https 程序运行异常
[1]问题现象描述 利用QT的https方式访问服务器,添加了libeay32.dll 和 ssleay32.dll, 且一直都使用正常. 正常现象:返回200,且该获取的值都正常返回(即replyB ...
- Apache Zeppelin 初识
今天得知了一个Apache的孵化项目zeppelin,特了解一下. Zeppelin是一个Apache的孵化项目.一个基于web的笔记本,支持交互式数据分析.你可以用SQL.Scala等做出数据驱动的 ...
- guest project <web接口开发与自动化测试>
一次写接口,简单记录一下... 参照虫师大大的书写的,有做小的修改... github上guest项目地址:git@github.com:lixiaofeng1993/guest.git web ap ...
- Linux基础命令---lpstat查看打印任务
lpstat lpstat指令用来显示当前任务.打印机的状态.如果没有参数,那么就显示打印队列. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.openSUSE. ...
- Shellcode入门
Shellcode入门 一.shellcode基础知识 Shellcode实际是一段代码(也可以是填充数据),是用来发送到服务器利用特定漏洞的代码,一般可以获取权限.另外,Shellcode一般是作为 ...
- too many open files问题
linux环境下,程序运行时,出现了too many open files的错误. 通过名字就能看出来,是打开了太多的文件,超过了系统限制. ulimit -a 通过这个命令可以查看当前系统设置的最大 ...
- Html table、thead、tr、th、td 标签
Html table.thead.tr.th.td 标签 案例一 <!-- table 表格标签,配置表格使用.border="1" 添加表格框架 --> <ta ...