CSS布局技巧

短命女 2022-04-24 03:46 410阅读 0赞

#### 两栏布局 ####

左边宽度固定，浮动。右边设置margin-left，宽度自适应。反之，亦可。

例子：

结果：  
![在这里插入图片描述][20190414200040664.png]

#### 三栏布局 ####

两侧浮动且宽度固定，左边left浮动，右边right浮动，中间设置margin-left和margin-right宽度自适应。注意，书写顺序是左右中。  
例子：

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
      <style>
        .aside{
          float:left;
          border:1px solid red;
          background:red;
          height:50px;
          width:50px;
        }
        .main{
          border:1px solid blue;
          background:blue;
          height:100px;
          margin-left:60px;
          margin-right:60px;
        }
        .aside2{
          float:right;
          width:50px;
          height:50px;
          background:green;
        }
      </style>
    </head>
    <body>
      <div>
        <div class="aside"> 
          左边
        </div>
        <div class="aside2">
          右边
        </div>
        <div class="main">
          中间
        </div>
      </div>
    </body>
    </html>

结果：  
![在这里插入图片描述][20190414201822870.png]

#### 水平居中 ####

方法有很多，我只列出常见的几种方法。

1.  行内元素：  
    父元素设置text-alignt:center;  
    padding:上下padding值一样；
2.  块级元素：
    
     *  宽度确定:  
        方法一：margin-left:auto;margin-right:auto;  
        方法二：绝对定位+margin-left，将元素右移50%，然后再左移元素自身宽度的一半就可以。  
        方法三：flex布局，具体可以参考阮一峰的教程
     *  宽度不确定:  
        第一种方法：可以将该元素转为inline或者inline-block，然后外面包裹着块级元素，对外面的块级元素设置:text-alignt:center;注意若设置inline-block,同时建议对该元素设置vertical-align:top;  
        第二种方法：绝对定位+css3 translate属性，将元素右移50%，然后再左移元素自身宽度的一半就可以。这个需要注意兼容性。  
        方法三：flex布局，具体可以参考阮一峰的教程

#### 垂直居中 ####

方法有很多，我只列出常见的几种方法。

1.  行内元素:  
    line-height  
    padding:左右padding值一样；
2.  块级元素
    
     *  高度确定:  
        绝对定位+margin-top，将元素下移50%，然后再上移元素自身宽度的一半就可以。  
        flex布局，具体可以参考阮一峰的教程
     *  高度不确定  
        absolute + CSS3 transform，将元素下移50%，然后再上移元素自身宽度的一半就可以。  
        flex布局，具体可以参考阮一峰的教程  
        lineheight

#### 其他技巧 ####

1.  不要写死宽高，尽量使用max-width，width写死容易造成显示bug,max-width意思是最大宽度，屏幕缩小宽度也会缩小。
2.  加了display:inline-block;需要加上vertcal-align:top。否则元素底下会有空隙。

[20190414200040664.png]: /images/20220220/de0ca5d3786c42768354db5a312a0a24.png
[20190414201822870.png]: /images/20220220/79e4fe18988b493a9a8a269ff3db47c2.png