CSS布局

作者: WebsnowDrop | 来源:发表于2020-07-09 10:58 被阅读0次

左右布局

方法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>

CSS布局

左右布局

左中右布局

水平居中

垂直居中

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读