css的盒模型

• HTML对元素进行分类：块级元素、内联元素（行内元素）、内联状块级元素

块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、 <table>、<address>、<blockquote> 、<form>
内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联块级元素：<img>、<input>

• 块级元素的特点

（1）每一个块级元素都是新的一行，其后的元素也要重新另起一行
（2）元素的高度、宽度、行高、以及顶和底边距都可以设置
（3）元素在高度不设置的情况下。是他本身元素的父容器的100%

• 内联元素的特点

（1）和其他的元素在一行上面
（2）元素的高度、宽度以及 顶部和底部边距不可设置
（3）元素的宽度就是他包含的文字或是图片的宽度，不可以更改

• 内联块级元素的特点

（1）和其他元素在一行
（2）元素的高度、宽度、行高、以及顶和底边距都可以设置

• 盒模型中的边框

border:2px solid red;
//相当于
div{ border-width:2px; border-style:solid; border-color:red;}

• 盒模型的宽度和高度之间的关系

  
  
  盒模型和宽度高度的关系

css的基本布局模型

• 分类：流动模型（Flow）、浮动模型（Float）、层模型（Layer）
• 流动模型

(1）为默认的网页布局模式
(2）特点：
a、块级元素都会值所处的包含元素里面自上向下的进行延展分布、实际上块级元素都会以行的模式占据该位置
b、内联元素的分布一般是从左到右的水平分布显示

• 浮动模型
  2个块级元素可以并排显示。首先对样式进行设置、然后将两个div进行并行的安放

div{
                    width: 200px;
                    height: 200px;
                    border:2px red solid;
                    float: left;
            }
            <div id="div1"></div>
            <div id="div2"></div>

浮动模型效果图

• 层模型
  层模型有三种 :
  （1）绝对定位（position：absolute）
  （2）相对定位（position：realtive）
  （3）固定定位（position：fixed）
  绝对定位：
  针对于父类进行绝对定位，如果没有指定父类的话，就针对于body进行绝对定位

div{
       width: 200px;
        height: 200px;
        border:2px red solid;
        position: absolute;
        left: 100px;
        top:50px;
     }

绝对定位的效果图

div{
       width: 200px;
        height: 200px;
        border:2px red solid;
        position: position;
        left: 100px;
        top:50px;
     }

相对定位的效果图