CSS布局
2020-07-09 本文已影响0人
WebsnowDrop
左右布局
- 方法1：float+overflow:hidden
如果是普通的两列布局，浮动+普通元素的 margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6-浏览器
<div class="parent" style="">
<div class="left" style="">
<p>left</p>
</div>
<div class="right" style="">
<p>right</p>
<p>right</p>
</div>
</div>
.parent {
overflow: hidden;
zoom: 1;
}
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
zoom: 1;
}
2.方法2：Flexbox 布局
//html部分同上
.parent {
display:flex;
}
.right {
margin-left:20px;
flex:1;
}
3.方法3：Grid 布局
//html部分同上
.parent {
display:grid;
grid-template-columns:auto 1fr;
grid-gap:20px
}
左中右布局
1.浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="screen">
html * {
padding: 0;
margin: 0;
}
.layout article div {
min-height: 150px;
}
</style>
</head>
<body>
<!--浮动布局 -->
<section class="layout float">
<style media="screen">
.layout.float .left {
float: left;
width: 300px;
background: red;
}
.layout.float .center {
background: yellow;
}
.layout.float .right {
float: right;
width: 300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div> // 右栏部分要写在中间内容之前
<div class="center">
<h2>浮动解决方案</h2>
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
</div>
</article>
</section>
</body>
</html>
这种布局方式，dom 结构必须是先写浮动部分，然后再中间块，否则右浮动块会掉到下一行。 浮动布局的优点就是比较简单，兼容性也比较好。但浮动布局是有局限性的，浮动元素脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。
2.flexbox 布局
<!--flexbox布局-->
<section class="layout flexbox">
<style>
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left {
width: 300px;
background: red;
}
.layout.flexbox .center {
background: yellow;
flex: 1;
}
.layout.flexbox .right {
width: 300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox解决方案</h2>
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
</div>
<div class="right"></div>
</article>
</section>
flexbox 布局是 css3 里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用 flexbox。 flexbox 的缺点就是 IE10 开始支持，但是 IE10 的是-ms 形式的
水平居中
1.行内元素水(display: inline)平居中（文本、图片等）是通过给父元素设置 text-align：center；来实现的。
<p style="text-align: center;">行内元素水平居中</p>
2.定宽块状元素(dispaly: block)水平居中（块状元素的width是一个固定值），满足块状和定宽两个条件时，即可通过给自己设置“左右margin为auto”来实现。
<div style="text-align: center;">
<div style="display: inline;">不定宽块状元素水平居中</div>
</div>
3.不定宽块状元素水平居中
3.1.利用flex实现水平居中
<div style="display: flex;">
<div style="margin: 20px auto;">不定宽块状元素水平居中</div>
</div>
3.2改变块状元素的 dispaly 属性为 inline， 然后给父级设置 text-aline：center 来实现水平居中， 这种方法的缺点是不能再给元素设置宽高了
<div style="text-align: center;">
<div style="display: inline;">不定宽块状元素水平居中</div>
</div>
垂直居中
1.上下padding相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.ct{
padding: 40px 0;
text-align: center;
background: #eee;
}
</style>
</head>
<body>
<div class="ct">
<div>设置</div>
<p>上下padding一致</p>
<p>即可</p>
<span>单行文本居中</span>
</div>
</body>
</html>
2.绝对定位固定宽度垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html,body {
height: 100%;
}
.dialog {
position: absolute;
left: calc(50% - 200px);
top: calc(50% - 150px);
/* margin-left: -200px;
margin-top: -150px; */
width: 400px;
height: 300px;
box-shadow: 0px 0px 3px #000;
}
.dialog .header{
padding: 10px;
background: #000;
color: #fff;
}
.dialog .content{
padding: 10px;
}
</style>
</head>
<body>
<div class="dialog">
<div class="header">绝对定位实现居中</div>
<div class="content">固定宽高</div>
</div>
</body>
</html>
3.绝对定位不固定宽度垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html,body {
height: 100%;
width:100%;
}
.dialog {
position: absolute;
left: 50% ;
top: 50% ;
transform:translate(-50%, -50%);
box-shadow: 0px 0px 3px #000;
}
.dialog .header{
padding: 10px;
background: #000;
color: #fff;
}
.dialog .content{
padding: 10px;
}
</style>
</head>
<body>
<div class="dialog">
<div class="header">不固定宽度居中1</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor veniam atque, quidem unde ad mollitia accusantium sit voluptatibus porro aliquam officiis, eveniet ullam placeat et adipisci doloremque eius. Aliquid, consequatur.</div>
</div>
</body>
</html>
4.首屏垂直居中display:table-cell
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
* {
margin:0;
padding:0;
}
html,body {
width:100%;
height:100%;
}
header {
width:100%;
height:100%;
background:#000;
color:#fff;
display:table;
text-align: center;
}
header .tab {
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
}
header .tab h1 {
margin:30px;
}
header .tab p {
margin:30px;
}
main {
height:100%;
background:pink;
}
footer {
height:100%;
background:red;
}
</style>
</head>
<body>
<header>
<div class="tab">
<h1>首屏垂直居中demo</h1>
<p>父元素display:table</p>
<p>子元素display:table-cell</p>
<button>确定</button>
</div>
</header>
<main>main</main>
<footer>footer</footer>
</body>
</html>
5.首屏垂直居中:display:inline-block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
* {
margin:0;
padding:0;
}
html,body {
width:100%;
height:100%;
}
header {
width:100%;
height:100%;
background:#000;
color:#fff;
text-align: center;
}
header:before {
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}
header .tab {
display:inline-block;
vertical-align:middle;
}
header .tab h1 {
margin:30px;
}
header .tab p {
margin:30px;
}
main {
height:100%;
background:pink;
}
footer {
height:100%;
background:red;
}
</style>
</head>
<body>
<header>
<div class="tab">
<h1>首屏垂直居中demo</h1>
<p>1.伪元素 display:inline-block;
height:100%;
vertical-align:middle; </p>
<p>2. display:inline-block;
vertical-align:middle;</p>
<button>确定</button>
</div>
</header>
<main>main</main>
<footer>footer</footer>
</body>
</html>
6.vertical-align:middle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid ;
text-align: center;
}
.box:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box img{
vertical-align: middle;
background: blue;
}
</style>
</head>
<body>
<div class="box">
<img src="http://cdn.jirengu.com/public/logo-tiny.png" >
</div>
</body>
</html>
