网页布局技巧-优快云博客

提起布局，盒模型是最重要的概念。

盒模型：包括宽、高、外边距、内边距、边框，

注意：当两个垂直盒子算margin时，只会计算比较大的那个元素。盒子的大小，最好是打开开发者模式去看看真实的是多少，有时因为一些原因自己写的可能是样式并没有用上。

css3 box-sizing:border-box; 给这个块级元素设置这个，不会计算margin值，这样只要量出盒子大小（指边框以内的）只要写padding ，border ，content 内容大小会自己计算。

1. 3种定位机制：普通流、浮动、绝对定位

一般都是普通流

但是有时，我们需要在一行显示块级元素，用浮动或者定位都行，但是现在提倡响应式布局，浮动也可以解决，但是文件脱离文档流，需要清除浮动。一个好的方式是 display:inline-block;一行显示块级元素，但是会产生间隔，解决方案是给父级元素 font-size:0; 自己元素再设置font-size:大小;即可。

浮动：float:left right ;

定位：relative absolute fixed

2.整体页面居中

随着现在设备的屏幕越来越大，最好是设计好整体页面的宽高和，然后用

margin:0 auto居中。

3.两列布局

3.1 浮动

左浮动，又浮动解决

3.2 定位

相对于父级元素绝对定位解决

4.三列布局

现在是响应式布局，不推荐使用浮动，因为会出现很多问题，要想完美解决，推荐一种双飞翼的布局。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .wrapper{
                position: relative;
            }
            .middle{
                margin: 0 100px;
                text-align: center;
            }
            .left{
                width: 100px;
                position: absolute;
                left: 0;
                top: 0;
            }
            .right{
                width: 100px;
                position: absolute;
                right: 0;
                top: 0;
            }

        </style>
    </head>
    <body>

      <div class="wrapper">
        <div class="middle">
            <span>中间</span>
        </div>
          <div class="left">左盒子</div>
          <div class="right">又盒子</div>
      </div>
    </body>
</html>