Background
Layout is inevitable in our front-end development. Simply recall the CSS layout scheme for your reference and your own reference.
Centered layout
The centered layout here is based on the premise of indefinite width, and the case of fixed width is also included.
Centered horizontally
i
nline-block + text-align
.parent {
text-align: center;
}
.child {
display: inline-block;
}
The compatibility of this scheme is relatively good, it can be compatible to IE8, for IE567 does not support inline-block, you need to use css hack for compatibility.
table + margin
.child {
display: table;
margin: 0 auto;
}
This solution is compatible with IE8, you can use
instead of css writing, and the compatibility is better.
absolute + transform
.parent {
position:relative;
height:1.5em;
}
.child {
position:absolute;
left:50%;
transform:translateX(-50%);
}
This solution is compatible with IE9, because of the compatibility of transform, if .child is a fixed-width element, you can use the following wording to improve compatibility.
.
parent {
position: relative;
height:1.5em;
}
.child {
position: absolute;
width:100px;
left:50%;
margin-left:-50px;
}
复制代码
flex + justify-content
.parent {
display:flex;
justify-content;
}
.child {
margin:0 auto;
}
The flex layout is very powerful, but it is limited by compatibility. It can be used boldly regardless of compatibility.
Vertically centered layout
table-cell + vertial-align
.parent {
display: table-cell;
vertical-align: middle;
}
This scheme can be
replaced by to improve compatibility.
absolute + transform
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
The compatibility of the new css3 attributes is not very good.
flex + align-items
.parent {
display: flex;
align-items: center;
}
Compatibility is not very good, do not consider low version browsers.
Center horizontally and vertically
inline-block + table-cell + text-align + vertical-align
.parent{
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child{
display: inline-block;
}
Compatible to IE8.
absolute + transform
.parent{
position: relative;
}
.child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Poor compatibility, compatible with IE10 and above
flex
.parent{
display: flex;
justify-content: center;
align-items: center;
}
Compatible difference
Multi-column layout
One column fixed width, one column adaptive
float + margin
.left{
float: left;
width: 100px;
}
.right{
margin-left: 120px;
}
This solution is better for fixed-width layouts. The following method is recommended for variable-width layouts. 2.
float + overflow
.left{
float: left;
width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
This scheme can be perfectly implemented regardless of whether it is a multi-column fixed-width or variable-width, and at the same time, it can achieve a constant-height layout.
table
.parent{
display: table; width: 100%;
table-layout: fixed;
}
.left,.right{
display: table-cell;
}
.left{
width: 100px;
padding-right: 20px;
}
flex
.parent{
display: flex;
}
.left{
width: 100px;
padding-right: 20px;
}
.right{
flex: 1;
}
Multiple columns with fixed width, one column is adaptive
float + overflow
.left,.center{
float: left;
width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
table
.parent{
display: table; width: 100%;
table-layout: fixed;
}
.left,.center,.right{
display: table-cell;
}
.right{
width: 100px;
padding-right: 20px;
}
flex
.parent{
display: flex;
}
.left,.center{
width: 100px;
padding-right: 20px;
}
.right{
flex: 1;
}
One column is variable width, one column is adaptive
float + overflow
.left{
float: left;
margin-right: 20px;
}
.right{
overflow: hidden;
}
.left p{
width: 200px;}
table
.parent{
display: table; width: 100%;
}
.left,.right{
display: table-cell;
}
.left{
width: 0.1%;
padding-right: 20px;
}
.left p{
width:200px;}
flex
.parent{
display: flex;
}
.left{
margin-right: 20px;
}
.right{
flex: 1;
}
.left p{
width: 200px;}
Multiple columns with variable width, one column is adaptive
float + overflow
.left,.center{
float: left;
margin-right: 20px;
}
.right{
overflow: hidden;
}
.left p,.center p{
width: 100px;
}
Equally divide
float + margin
.parent{
margin-left: -20px;
}
.column{
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
table + margin
.parent-fix{
margin-left: -20px;
}
.parent{
display: table;
width:100%;
table-layout: fixed;
}
.column{
display: table-cell;
padding-left: 20px;
}
flex
.parent{
display: flex;
}
.column{
flex: 1;
}
.column+.column{
margin-left:20px;
}
Contour
float + overflow
.parent{
overflow: hidden;
}
.left,.right{
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left{
float: left; width: 100px;
}
.right{
overflow: hidden;
}
table
.parent{
display: table;
width: 100%;
}
.left{
display:table-cell;
width: 100px;
margin-right: 20px;
}
.right{
display:table-cell;
}
flex
.parent{
display:flex;
width: 100%;
}
.left{
width: 100px;
}
.right{
flex:1;
}
Side by side and equally divided, single row aligned to the left layout
flex
.main {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.item {
display: inline-block;
}
.empty{
height: 0;
visibility: hidden;
}
Holy Grail Layout & Double Flying Wing Layout
Holy Grail Layout
<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;}
Double flying wing layout
<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;}
Positioning layout
<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;}
Many people say that learning programming is difficult, but it is not difficult. The difficulty is that there are so many tutorials now. There is no systematic tutorial and there is no answer to the problem when learning. This kind of problem is easy to solve. I recommend a front-end answer skirt , You can ask in it when you encounter something you don’t know when studying. The seniors inside are very good, and they can answer it for free.
