css三大模块：盒子模型、浮动、定位

一、盒子模型

把HTML页面中的元素看作是一个矩形的盒子（装内容的容器），每个矩形都由元素的内容、内边距padding、边框border和外边距margin组成。

看下面的代码：

<style> 
        .box{
            width: 200px;
            height: 200px;
            float: left;
            padding: 100px;
            margin: 100px; 
            border: 50px solid orangered;
            background-color: bisque;
        }
style>
<div class="box">div> 

代码效果如下：

浏览器下的效果	在Chrome的开发者工具中 box的二维分析图

 盒子模型一般分为两种：IE盒模型（又称怪异盒模型）和标准盒模型

css3中可以通过box-sizing来指定盒模型，如下：

标准盒模型：

box-sizing: content-box;   /*盒子大小为：width+padding+border*/

IE盒模型：

box-sizing: border-box;   /*盒子大小为：width  即padding和border是包含到width里面的*/

代码如下：

        <style> 
        div{
            width: 200px;
            height: 200px;
            float: left;
            padding: 100px;
            margin: 100px; 
            border: 50px solid orangered;
            background-color: bisque; 
        }
        .box1{            
            box-sizing: content-box;   /*盒子大小为：width+padding+border*/
        }
        .box2{            
            box-sizing: border-box;   /*盒子大小为：width  即padding和border是包含到width里面的*/
        }
    style>
    <div class="box1">box1div> 
    <div class="box2">box2div> 

两种盒模型效果图如下（box1为标准盒模型、box2为IE盒模型）：

浏览器下的效果	在Chrome的开发者工具中 两个盒子的二维分析图

网页布局的本质：把网页元素（文字、图片等），放入到盒子里面，然后利用css摆放盒子的过程。

css的定位机制有3种：普通流（亦称 标准流或文档流）、浮动和定位。

所谓文档流，实际上就是一个网页内标签元素从上到下，从左到右的排列顺序。比如块级元素会独占一行，行内元素会按顺序依次前后排列，按照这种大前提的布局排列之下 不会出现例外的情况 叫做标准流布局。

二、浮动

浮动最开始是用来做文字环绕效果的。代码如下：

    <style>
        div{
            width: 250px;
            height: 250px;
            padding: 10px;
            color: #fff;
            border: 1px solid orange;
            background-color:orangered;
            line-height: 22px;
        }
        img{
            width: 100px;
            padding: 10px;
        }
    style>
    <div>
        山一程,水一bai程,身向榆关那畔行,夜深du千帐灯.风一更,雪一更,聒碎乡心梦不成,故园无此声.<br/>
        
        <img src="https://ae01.alicdn.com/kf/Hbf6c93e6d94f4bc8aef35d23034b941aN.jpg" alt="">        
        人生若只如初见,何事秋风悲画扇.等闲变却故人心,却道故人心易变.骊山语罢清宵半,泪雨零铃终不怨.何如薄幸锦衣郎,比翼连枝当日愿.
    div>

     修改img样式如下：

     img{
            width: 100px;
            padding: 10px;
            float: right; /*给图片添加浮动*/
    }

效果对比图：

标准流（从上而下按顺序依次排列）	图片添加浮动（文字环绕效果）

元素的浮动是指 设置了浮动属性的元素会脱离标准流的控制，移动到父元素指定位置的过程。

在css中，可以通过float属性来定义浮动，其基本语法格式如下：

选择器{float：属性值;}

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

 

 

 

 

 

浮动的特性：会脱离标准流，不占位置，会影响标准流，浮动元素漂浮在其它标准流盒子上面。浮动只有左右浮动。

代码如下：

    <style>
        div{
            width: 200px;
        }
        div:first-child{
            background-color: green;
            height: 200px;
            float: left; /*设置为浮动*/
        }
        div:last-child{
            height: 300px;
            background-color:orangered;
        }
    style>
    <div>div>
    <div>div>

效果图如下：

标准流（未设置浮动）	浮动（第一个div设为浮动后，不占位，并漂浮在标准流的上方，因此会盖住了一部分第二个div的内容）

如果要让多个div在同一行显示，必须每个元素都添加浮动

代码如下：

<style>
        div{
            width: 200px;
            height: 200px;
            float: left;
        }
        div:first-child{
            background-color: orangered;
        }
        div:nth-child(2){
            background-color: yellowgreen;
        }
        div:last-child{
            background-color: skyblue;
        }
    style>
    <div>div>
    <div>div>
    <div>div>

效果图：

总结：浮动的目的就是为了让多个块级元素在同一行上显示。

注：块级/行内元素，添加浮动后，都具有行内块的特性 （行内块没有指定宽度时，宽度为内容的宽度）。

常用布局设计：利用浮动实现 两列左窄右宽布局（左边固定，右边自适应）

代码如下：

<style>  
    *{
        margin: 0;
        padding: 0;
    }
    .main{
        width: 100%; 
        height: 500px;
        background-color: #eee;
    }
    .main div:first-child{ 
        width: 200px;
        height: 500px;
        float: left;
        color: #fff;
        background-color: orangered; 
    }
    .main div:last-child{ 
        margin-left: 210px; 
    }
style>

    <div class="main">
       <div>我是左边div>
       <div>
           我是右边 
       div>
    div>

效果图如下：

 

另外，浮动的使用可能会导致父元素因为子级浮动而引起内部高度为0

即 如果子盒子1和子盒子2都设置了浮动，由于浮动元素不占有位置，而父盒子又没有设置高度，此时底下的盒子就会往上跑。

代码如下：

<style>  
    *{
        margin: 0;
        padding: 0;
    }
    .main{
        width: 500px;  
    }
    .main div{ 
        width: 200px;
        height: 300px;
        float: left; 
    }
    .main div:first-child{ 
        background-color: orangered;  
    }
    .main div:last-child{ 
        background-color: purple;  
    }
    .bottom{
        width: 500px;
        height: 100px;
        background-color: green;
    }
style>

<div class="main">
       <div>我是左边div>
       <div>
           我是右边 
       div>
div>
<div class="bottom">
        我是底部
div>

效果图：

如何解决浮动带来的这个问题呢？当然，如果浮动的子盒子的高度是固定的，直接计算出父盒子的高度并设置就能解决。

但是，浮动的子盒子高度不固定时，就需要用到清除浮动了。

清除浮动的本质：为了解决父级元素因为子级元素浮动引起内部高度为0的问题。

解决方案：

①额外标签法。在浮动盒子后加一个空盒子clearfix，css设置为
.clearfix{clear:both;}
此方法不推荐。虽然通俗易懂、书写方便，但添加了一些无意义标签，结构化较差。

②父级元素添加overflow属性（通过触发BFC的方式）
也不推荐。代码简洁，但内容多时，容易造成不会自动换行、内容被隐藏。

/* 添加 :after伪元素清除浮动。
符合闭合浮动思想，结构语义化正确。IE6-7不支持（使用zoom:1 触发haslayout）
使用方法：父级添加类clearfix
*/
.clearfix::after{
  content: "."; /*尽量不为空，否则低版本浏览器有空隙*/
  display: block; /*转为块级元素*/
  height: 0;
  visibility:hidden;/*隐藏盒子*/
  clear: both;/*清除浮动*/         
}
/* ie6-7浏览器 清除浮动的处理方式*/
.clearfix{
  *zoom:1;  /*  *代表ie6-7能识别的特殊符号*/
}

/* 使用::before和::after双伪元素清除浮动 
推荐。代码更简洁。IE6-7不支持（使用zoom:1 触发haslayout）
使用方法：父级添加类clearfix::before和clearfix::after
*/
.clearfix::before,.clearfix::after{
  content: "";
  display: table;
}
.clearfix::after{
  clear: both;
}
/* ie6-7浏览器 清除浮动的处理方式*/
.clearfix{
  *zoom: 1;
}

清除浮动后的效果图：

 

三、定位

position定位相对于float浮动更为灵活。如果用标准流或者浮动，实现会比较复杂或者难以实现的，可以通过定位的属性设置，将某个元素定位到指定的位置。

定位：position 主要包括定位模式和边偏移两部分。即定位需要和边偏移搭配使用

1.边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对其父级元素上边线的距离，单位为px。例如 top:50px;
bottom	底部偏移量，定义元素相对其父级元素下边线的距离，单位为px。例如 bottom:50px;
left	左侧偏移量，定义元素相对其父级元素左边线的距离，单位为px。例如 left:50px;
right	右侧偏移量，定义元素相对其父级元素右边线的距离，单位为px。例如 right:50px;

2.定位模式

在css中，position属性用于定义元素的定位模式，基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

属性值	描述	是否脱标占有位置
static	默认。静态定位，对偏移无效，可用来清除定位	不脱标，正常模式  （就是标准流）
relative	相对定位，相对于自身位置移动	不脱标，占有位置
absolute	绝对定位，相对于定位父级移动，如父级无定位，以body为准。 常用子绝父相（子元素绝对定位，父元素相对定位）	完全脱标，不占有位置
fixed	固定定位，相对于浏览器移动	完全脱标，不占有位置

 当对多个元素同时设置定位时，定位元素之间有可能发生重叠。

所以，需要通过css的z-index属性来调整定位元素的堆叠顺序。

z-index默认值为auto，可以设置正整数，也可以设置为负整数。数字后面不能添加单位。

z-index取值越大，定位元素在层叠元素中越居上层；当取值相同时，根据书写顺序，后来者居上。

代码如下：

<style>
        *{
            margin: 0;
            padding: 0;
            color: #fff;
        }
        .main{
            width: 400px;
            height: 300px;
            background-color: #eee;
            position: relative;/*父元素添加相对定位*/
        }
        .main div{
            width: 200px;
            height: 100px;
            text-align: right;
            position: absolute;/*子元素添加绝对定位*/
        }
        /*当未设置盒子的叠放顺序时，三个盒子会根据书写顺序依次叠放
        假如入设置第二个盒子的z-index为1时,此盒子会在最上方显示
        */
        .main div:first-child{
            background-color: green;
            top: 50px;
            left: 50px;
        }
        .main div:nth-child(2){
            background-color:tomato;
            top: 100px;
            left: 100px;
            z-index: 1;/*设置叠放顺序*/
        }
        .main div:last-child{
            background-color: blue;
            top: 150px;
            left: 150px;
        }
    style>
<div class="main">
        <div>子元素1div>
        <div>子元素2div>
        <div>子元素3div>
 div>

设置叠放次序前后对比：

 

注：元素添加了浮动、绝对与固定定位之后，元素模式会发生转换==>转为行内块模式。