CSS布局

布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML结构 。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

左右布局

可以通过float实现左右布局

float属性是css中关于布局的一个关键属性，通过设置浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置，其基本语法格式如下：

选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

示例代码

--HTML----------------------------

  

  


--CSS-----------------------------
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.parent div.box1,
.parent div.box2 {
  float: left;
  width: 50%;
  height: 200px;
  border: 1px solid #000;
  box-sizing: border-box;
  float: left;
}

给浮动的元素的父元素设置清除浮动，不会影响后面的布局。

左中右布局

也可以通过float实现左中右布局

示例代码

--HTML----------------------------

  

  

  


--CSS-----------------------------
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.parent div.box1,
.parent div.box2,
.parent div.box3 {
  float: left;
  width: 33%;
  height: 200px;
  border: 1px solid #000;
  box-sizing: border-box;
  float: left;
}

水平居中

• 行内元素

  text-align: center;
  

• 确定宽度的块级元素

  • 用margin实现水平居中

    .content {
        width: 300px;
        margin: 0 auto;
    }
    

  • 通过绝对定位和margin-left实现水平居中

    .content {
        width: 300px;
        position: absolute;
        left: 50%;
        margin-left: -150px;
    }
    

• 不确定宽度的块级元素

  • 通过转换inline-block实现水平居中

    .content {
        display: inline-block;
        text-align: center;
        vertical-align: top; /*解决inline-block下面的空隙*/
    }
    

  • 通过绝对定位和transform实现水平居中

    .content {
        position: absolute;
        left: 50%:
        transform: translateX(-50%);
    }
    

垂直居中

• 单行文本

  通过设置行高实现垂直居中

  .text {
      line-height: 50px;
  }
  

• 图片垂直居中

  通过设置父元素的行高来代替高度，且设置父元素的font-size为0

  .parent {
      line-height: 200px;
      font-size: 0;
  }
  .child {
      vertical-align: middle;
  }
  

• 确定高度的块级元素

  通过绝对定位和margin实现垂直居中

  .content {
      height: 300px;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
  }
  
  

• 不确定高度的块级元素

  通过绝对定位和transform实现垂直居中

  .content {
      position: absolute;
      top: 50%:
      transform: translateY(-50%);
  }
  

圣杯布局

示例代码

--HTML----------------------------

    
中间栏
    
左边栏
    
右边栏

--CSS-----------------------------
div{
            padding:0px;
            margin:0px;
        }
        .container{
            min-width: 400px;
            background: #eee;
            height: 200px;
            padding: 0px 200px;
        }
        .left,.right{
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .main{
            width:100%;
            height: 200px;
            background: blue;
            float: left;
        }
        .left{
            margin-left:-100%;
            position: relative;
            left: -200px;
        }
        .right{
            margin-left:-200px;
            position: relative;
            right: -200px;
        }

双飞翼布局

示例代码

--HTML----------------------------

    

        
中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间1栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中1间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏
    
    
左边栏
    
右边栏

--CSS-----------------------------
div{
    padding:0px;
    margin:0px;
    }
.container{
    min-width: 400px;
    background: #eee;
    height: 200px;
    }
.left,.right{
    width: 200px;
    height: 200px;
    background: red;
    float: left;
    }
.main{
    width:100%;
    height: 200px;
    background: blue;
    float: left;
    }
.left{
    margin-left:-100%;
    }
.right{
    margin-left:-200px;
    }
.main_w{
    margin:0px 200px;
    }