常见的CSS布局小技巧

常见的CSS布局小技巧

左右布局

1. 给父盒子添加清除浮动clearfix样式
2. 给子盒子添加左右浮动float: left;、float: right;

案例：

CSS部分：

/* clearfix的写法无需理解 */
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

/*父盒子*/
.main { 
    width: 800px;
    padding: 20px; /* 为了显示效果，可以不加 */
    border: 2px solid #3291ff;
}
.left,
.right {
    width: 300px;
    height: 400px;
    
}
.left {
    float: left;
    background-color: #f9c859; /*浅黄色*/
}
.right {
    float: right;
    background-color: #282c34; /*深灰色*/
}

html部分：

<div class="main clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>

效果图：

cssxjq03.jpg

左中右布局

1. 给父盒子添加清除浮动clearfix样式
2. 给每个子盒子添加浮动float: left;、margin-right: 自定义间隙宽度;
3. 利用:nth-child()CSS伪类选择器去掉第子三个盒子的margin-right

案例：

CSS部分：

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

/*父盒子*/
.main { 
    display: inline-block;
    margin: 50px auto 0;
    padding: 10px; /* 为了显示效果，可以不加 */
    border: 2px solid #3291ff;
}
.main .demo {
    width: 300px;
    height: 400px;
    float: left;
    background-color: #f9c859; /*浅黄色*/
    margin-right: 50px;
}
/* CSS伪类选择器，当前表示第三个class样式为demo的样式 */
.main .demo:nth-child(3){
    margin-right: 0;
}

:nth-child()为CSS伪类选择器，详细可查看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child

HTML部分：

<div class="main clearfix">

    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>

</div>

效果图：

cssxjq12.jpg

水平居中

内联元素水平居中：

• 方法：给元素的父元素一个text-align: center，其中的字元素即可水平居中

• 案例：

  CSS部分：

  .demo1 {
      width: 500px;
      height: 50px;
      background-color: #e8eaed;
      text-align: center;
  }
  

  HTML部分：

  <div class="demo1">
    <a href="#">嘤嘤嘤</a><a href="#">嘤嘤嘤</a><a href="#">嘤嘤嘤</a>
  </div>
  

  效果：

cssxjqyyy.jpg

块级元素水平居中：

• 方法：给当前元素添加一个 margin-left: auto; 和 margin-left: auto;、或直接简写为：margin: 0 auto;(距离上下为0，左右auto)

• 案例：

  CSS部分：

  .demo2 {
    width: 500px;
    height: 200px;
    background-color: #e8eaed;
  }
  .block {
    width: 100px;
    height: 100px;
    background-color: #ff0000;
    margin: 0 auto;
  }
  

  HTML部分：

  <div class="demo2">
    <div class="block"></div>
  </div>
  

  效果图：

  cssxjqxxx.jpg

垂直居中

块级元素垂直居中

• 方法：

  1. 给当前元素添加一个相同的 margin-top margin-bottom值(简写：margin: 距离上下高度 0)
  2. 给父级元素添加一个相同的 padding-top padding-bottom值(简写：padding: 距离上下的高度 0)

• 案例：

  1. 给当前元素添加一个相同的 margin-top margin-bottom值

     CSS部分

     main.demo2 {
         width: 500px;
         border: 2px solid #f9c859;
         font-size: 30px;
     }
     .demo2 .block {
         height: 100px;
         margin: 100px 0;
         background-color: #2d84ff;
         
     }
     
     

     HTML部分

     <main class="demo2">
        <div class="block"></div>
     </main>
     

     效果图：

     cssxjq31.jpg

2. 给父级元素添加一个相同的 padding-top padding-bottom值

   CSS部分

   main.demo2 {
       width: 500px;
       border: 2px solid #f9c859;
       font-size: 30px;
       padding: 100px 0;
   }
   .demo2 .block {
       height: 100px;
       background-color: #2d84ff;
   }
   
   

   HTML部分

   <main class="demo2">
      <div class="block"></div>
   </main>
   

   效果图：

   cssxjq31.jpg

内联元素垂直居中

• 方法：给父元素指定一个特定行高line-height使得子元素居中

• 案例：

  CSS部分：

  main.demo1 {
      width: 500px;
      height: 300px;
      line-height: 300px;
      border: 2px solid #f9c859;
      font-size: 30px;
  }
  

  html部分：

  <main class="demo1">
    <span>嘤嘤嘤</span>
  </main>
  

  效果图：

  cssxjq21.jpg

拓展小技巧

在以上的布局技巧中，可以通过css样式将块级元素转换为内联元素，即可使用内联元素的方法布局

例如div的水平居中：

CSS部分：

.demo2 {
    width: 500px;
    height: 200px;
    background-color: #e8eaed;
    text-align: center;
}
.block {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: #ff0000;
}

html部分：

<div class="demo2">
    <div class="block"></div>
</div>

效果图：

cssxjqxxx.jpg