CSS布局

常用布局方法

　　table

　　float+margin 

　　inline-block

　　flexbox

table 

　　非常方便的布局方案，属于传统布局方案， 

　　display   table  table-row  table-cell 跟表格布局相似

<div class="table">
<div class="table-row">
<div class="left table-cell">左</div>
<div class="right table-cell">右</div>
</div>
</div>
<style>
　　　　.left{
            background:red;
        }
        .right{
            background:blue;
        }
     .table{
            display: table;
            width:800px;
            height:100px;
        }
        .table-row{
            display: table-row;
        }
        .table-cell{
            vertical-align: center;
            display: table-cell;
        }
</style>

左

右

 

 

 

 

 

 

 

盒子模型

　　content/width/height/padding/border/margin

display/position

　　display  block/inline-block/inine

　　position static/relative/absolue/fixed

　　　　absolute/fixed 脱离文档流

　　　　　　区别

　　　　　　　　absolute是相对于上一个relative/absolute

　　　　　　　　fixed是相对于屏幕

　　　　z-index  层叠

flexbox

　　弹性盒子

　　盒子是并列的

　　可以指定宽度

<div class="container">
　　<div class="flex red">1</div>
　　<div class="flex blue">2</div>
　　<div class="flex red">3</div>
</div>
<style><!--
.red{
　　background:red;}
.blue{
　　background:blue;
}
.container{
　　display:flex;
　　height:100px;
　　width:800px;
}
.flex{
　　flex:1
}
</style>

1

2

3

　　flexbox在低版本浏览器不兼容 但是可以在移动端使用

foat

　　元素"浮动"

　　脱离文档流

　　但是不脱离文本流

<style> 　　
    .container{ 　　　　
        background:blue; 　　　
        width:300px; 　　　　
        margin:20px; 　　
    } 　　
    .p1{ 　　　　
        background:red; 　　　　
        float:left; 　　　　
        width:100px; 　　　　
        height:50px; 　　
    } 
</style> 
<div class="container">
　　<span class="p1">float </span> 　　       
      <div class="p2">学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float</div> 
</div>                

float

学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float

　　看出float脱离了文档流，但是不能脱离文本流。p1不占据空间，但时把文字排挤出去了

　　对自身的影响

　　　　形成“快” BFC

　　　　　　可以设置宽高

　　　　位置尽量靠上

　　　　位置尽量靠左（右）

<style>
    .container{
        background:red;
        width:300px;
    }
    .p1{
        background:blue;
        float:left;
        width:150px;
        height:50px;
    }
</style>
<div class="container container2">
    <span>学习float</span>
    <span class="p1">
        float
    </span>
    <span class="p1">
        float
    </span>
</div>

学习float float float

 

 

可以看出float位置尽量靠上、尽量靠左（右）我们可以设置宽度过大或者宽度过小会发生什么？

　　对兄弟元素的影响

　　　　上面可能贴非float元素

　　　　旁边贴float元素

　　　　不影响其他块级元素位置

　　　　但是不影响其他块级元素的文本流

　　对父级元素的影响

　　　　从布局上“消失”

　　　　高度塌陷

上一个代码案例可以看出父级元素高度是span的高度

　　解决

　　　　父级元素 overflow

　　　　::after{}伪元素

.clear::after{
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

学习float float float

如何使用float实现两栏和三栏布局

<style type="text/css">
  .container{
    width: 400px;
    height:50px;
  }
  .left,.right{
    height:100%;
  }
  .left{
    width: 150px;
    background: red;
    float: left;
  }
  .right{
    width: 250px;
    background: blue;
    float: right;
  }
</style>
<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

left

right

<style type="text/css">
  .container{
    width: 400px;
    height:50px;
  }
  .left,.right,.middle{
    height:100%;
  }
  .left{
    width: 50px;
    background: red;
    float: left;
  }
  .middle{
    width: 100px;
    background: green;
    margin-left: 50px;
    margin-right: 250px;
  }
  .right{
    width: 250px;
    background: blue;
    float: right;
  }
</style>
<div class="container">
  <div class="left">left</div>
  <div class="middle">middle</div>
  <div class="right">right</div>
</div>

left

middle

right

 

 

我们根据代码可以看出right掉下来了，也就是说浮动的元素尽量靠上靠右，但是right绕不开middle元素

因为float不影响其他元素的位置，此刻middle元素是块级元素

解决

　　设置middle为inline-block

　　还有middle和right位置对换可以解决

inline-block

　　像文本一样排block元素

　　没用清除浮动等问题

　　但是需要处理间隙

<style type="text/css">
  .container{
    width: 400px;
    height:50px;
  }
  .left,.right{
    height:100%;
  }
  .left{
    width: 150px;
    background: red;
    display: inline-block;
  }
  .right{
    width: 250px;
    background: blue;
    display: inline-block;
  }
</style>
<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

left

right

 

 

我们看出left和right不在一起，我们修改right宽度设置为240px

left

right

我们发现left和right之间有空隙

造成这个间隙是left和right之间的空白

解决

　　left和right元素在html同一行

　　left和right之间的空白使用注释

　　container 设置font-size:0 

响应式布局和设计

　　在不同设备上正常使用

　　主要处理屏幕大小问题

　　主要方法: 隐藏+折行+自适应空间

　　rem/viewport/media query