汇总css布局模型和常见代码缩写与长度单位

 1 DOCTYPE html>
 2 html>
 3     head>
 4         meta charset="utf-8">
 5         title>流动模型、浮动模型title>
 6         style type="text/css">
 7             #box1,#box2{
 8                 width: 100px;
 9                 height: 100px;
10                 border: 1px solid red;
11                 margin:50px 0px;
12                 float: left;/*如果现在我们想让两个块状元素并排显示，怎么办呢？*/
13             }
14         style>
15     head>
16     body>
17         
18         div class="box1" title="流动模型">
19             块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
20         div>
21         p>在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。p>
22         
23         div id="box1">栏目一div>
24         div id="box2">栏目二div>
25     body>
26 html>

 1 DOCTYPE html>
 2 html>
 3     head>
 4         meta charset="utf-8">
 5         title>层模型title>
 6         style type="text/css">
 7         .box1,.box2,.box3,.box4,.box5{
 8             width: 100px;
 9             height: 100px;
10         }
11         .box1{
12             border: 2px solid red;
13             position: absolute;/*这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。*/
14             left: 100px;
15             top: 100px;
16         }
17         .box2{
18             border: 2px solid blue;
19         }
20         .box3{
21             border: 2px solid deepskyblue;
22             position: relative;/*相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动*/
23             top: 10px;
24             left: 300px;
25         }
26         .box4{
27             border: 2px solid #008000;
28         }
29         .box5{
30             border: 2px solid #000000;
31             position: fixed;/*由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同。*/
32             right: 0;
33             bottom: 0;
34         }
35         .box6{
36             height: 1000px;
37             background-color: #00FFFF;
38             color: #fff;
39         }
40         style>
41     head>
42     body>
43         div class="box1">box1div>
44         div class="box2">box2div>
45         p>box1与box2是绝对定位对比，box3和box4相对定位对比p>
46         div class="box3">box3div>
47         div class="box4">box4div>
48         div class="box5">box5div>
49         div class="box6">我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示div>
50     body>
51 html> 

 1 DOCTYPE html>
 2 html>
 3     head>
 4         meta charset="utf-8">
 5         title>长度值title>
 6     head>
 7     body>
 8         div>目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。div>
 9         h5>1、像素h5>
10         p>像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。p>
11         h5>2、emh5>
12         p>就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：p>
13         code>p{font-size:12px;text-indent:2em;}code>
14         p>上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）p>
15         h5>下面注意一个特殊情况：h5>
16         p>但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：p>
17         p>html:p>
18         code><p>以这个<span>例子</span>为例。</p>code>
19         p>css:p>
20         code>p{font-size:14px}
21 span{font-size:0.8em;}code>
22         p>结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。p>
23         h5>3、百分比h5>
24         code>p{font-size:12px;line-height:130%}code>
25         p>设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。p>
26     body>
27 html>