css常用布局

2019-03-27  本文已影响0人  Sur_lee

css简单布局

1.左右布局

常用左边固定，右边自适应

实现这样的布局，我们可能会有如下方法：

新建一个HTML页面，结构如下：

<div class="wrapper">
    <div class="list">
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
    </div>
    <div class="context">
        内容内容
    </div>
</div>

浮动布局

.list {
    float: left;
    width: 200px;
}

.context {
    border-left: 200px solid #999;
    height: 500px;
}

flex布局

.wrapper {
    display: flex;
}

.list {
    width: 200px;
    background: #999;
}

.context {
    flex: 1;
    height: 500px;
}

grid布局

.wrapper {
    display: grid;
    grid-template-columns: 200px auto;
}

.list {
    background: #999;
}

.context {
    height: 500px;
}

::子元素添加float: left; 父元素添加class=“clearfix”::

2.左中右三列布局

1、浮动法（float与absolute区别在第二点）

浮动法的原理：
对### 左右块使用分别使用### float:left和float:right，float使左右两个元素脱离文档流，中间元素在正常文档流中。
注意：
middle位置要求：middle块一定要放在left和right之后，因为它占据文档流位置，所以一定要放在最后

新建一个html 页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三列自适应布局 浮动</title>
</head>
<body>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="middle">middle</div>  <!--注意middle块的位置，虽然写在right后面，但是在布局效果中出现在中间 -->
    </div>
</body>
</html>

css样式

#left,#right{ width: 200px;height: 200px; background-color: #ffe6b8 }
#left {float: left;}  //左边块左浮动
#right{float: right;}  //右边块右浮动
#middle{height: 200px; background-color: #a0b3d6;}

[image:2A3B18BC-1D0D-49EB-B3E6-1F8D08298535-53541-000141F27CBFB569/20181002174820212.png]

2、绝对定位

这种方法就是利用了绝对定位absolute，让左右两块脱离文档流，此时left和right与文档流无关，不占据空间。定位的元素和其他元素重叠。此处的left是叠在middle上的。
方法1和2的区别：
在CSS中也可以通过float或者position:absolute两种方法让元素脱离文档流。而这两者的表现实际上非常相似。简单的可以理解为部分无视和完全无视的区别：::使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置（即在文档流中占位置），环绕在周围(可以说是部分无视)。而对于使用position:absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它(不占位置)。::

css样式

#left{
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute; 
    top: 0;
    left: 0;   //注意这里
}
#middle{
    height: 200px;
    background: red;
    text-align: center; 
}
#right{
    width: 200px;
    height: 200px;
    background: blue;
    position: absolute;
    top: 0;
    right: 0;   //注意这里    
}

[image:EC539438-4181-4FF6-90E4-51965E50B6FE-53541-0001422AA09F664E/20181002181128307.png]

3、marign负值法

该方法在网站布局中非常常见，也是面试常考点，优点是三栏相互关联，有一定的抗性。
要求：在middle外部再加一个div。此div需要设置float属性使其形成一个BFC（请自行百度 点击跳转 ），并设置宽度，并且这个宽度要和left块的margin负值进行配合。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三列自适应布局 marign负值法</title>
</head>
<body>
<div id="div">
    <div id="middle">middle</div> <!-- middle必须放在最前面 -->
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>

相应css

#div{
    width: 100%;
    height: 200px;
    background: green;
    float: left;   /*记得是包含middle外层的div写啊*/
}
#middle{
    height: 100%;
    background: red;
}
#right,#left{
    width: 200px;
    height: 200px;
    float: left;     /*左右块浮动*/
}
#left{
    background: yellow;
    margin-left: -100%;     /*-100%是因为相对来说它偏移到下一行去了*/
}
#right{
    background: blue;
    margin-left: -200px;  /*这里的宽度一定要设置成等于负的包含middle的那个块的宽度*/
}

[image:84778F59-8F70-481A-9427-B5C6173637AD-53541-0001425CBF7857E3/2018100218223856.png]

4. css3新属性flex方法

flex相关的请移步 flex属性简介
写一个<div>，在flex中类似于容器，
将left、right、middle全部包进去
并设div的display：flex。
middle块的样式中加上flex：1（或者auto）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三列自适应布局 css3新属性flex方法</title>
</head>
<body>
<!-- 写一个的div包含left、right、middle，设置为display：flex；并将middle设置flex：1； -->
<div id="box">
<div id="left">left</div>
<div id="middle">middle </div>
<div id="right">right</div>
</div>
</body>
</html>

#box{
    width: 100%;
    height: 200px;
    display: flex;
  }
  #left,#right{
    width: 200px;
    height: 200px;
    background: pink;
  }
  #middle{
    flex: auto;  /* flex属性是flex-grow（项目放大比例）, flex-shrink（缩小比例） 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选*/
    background: skyblue;
  }

[image:C6E1DF0D-F7BC-478D-994F-38E8754DA645-53541-0001427854259E08/20181002183109178.png]

3.水平居中

text-align: center.
只要父级的div设置了这个属性，里面的文字就会居中（包括图片）,这个属性只对行内元素起作用。如果想要居中的是块级元素，它就无能为力了，要么把这个块级元素display: inline-block;要么换另一种方法。

.box-wrap {
  text-align: center;
}
.box {
  display:inline-block;
}

4.垂直居中

1、absolute，margin: auto

.container {
    position: relative;
}
.content {
    position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
}

注意: 当没有指定内容块的具体的高度和宽度时，内容块会填满剩余空间。可以通过使用max-height来限制高度，也可以通过 display:table 来使高度由内容来决定，但是浏览器支持不是很好。

2、relative，left top 50%，负margin-left margin-top

.isNegative {
    position: relative;
    width: 200px;
    height: 300px;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -150px;
}

缺点:需要知道具体的高度和宽度

3、relative，left top 50%，transform: translate(-50%,-50%)

  .content {
      position: relative;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
  }

这里translate的百分比是相对于自身的，所以高度是可变的

4、Table-Cell

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
    <!-- CONTENT -->
    </div>
  </div>
</div>
 
 
.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

注意: 需要添加最内层的div，并且给div指定宽度和margin:0 auto;来使div居中。

5、Inline-Block

html

<div class="Center-Container is-Inline">
  <div class="Center-Block">
    <!-- CONTENT -->
  </div>
</div>

css

 .Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}
 
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}
 
.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}
 
.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}

6、Flex

html

 <div class="contain">
   <div class="content">
      // content
   </div>
 </div>

css

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

最方便最简单的方式，但是要注意浏览器的支持

7、display:flex和margin:auto

.box8{
    display: flex;
    text-align: center;
}
    .box8 span{
    margin: auto;
}

8、display:-webkit-box

.box9{
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-box-orient: vertical;
    text-align: center；
}

9、display:-webkit-box

这种方法，在 content 元素外插入一个 div。设置此 divheight:50%; margin-bottom:-contentheight;。
content 清除浮动，并显示在中间。

.floater {
    float:left;
    height:50%;
    margin-bottom:-120px;
}
    .content {
    clear:both;
    height:240px;
    position:relative;
}
上一篇下一篇

猜你喜欢

热点阅读