CSS 布局

一、Display。元素显示模式。

　　1.none。隐藏元素，并且不保留元素原有的空间。

鼠标移入隐藏下方的div

 1 <style type="text/css">
 2         .none, .none-show {
 3             width: 300px;
 4             height: 32px;
 5             background-color: #569968;
 6         }
 7 
 8         .none:hover + .none-show {
 9             display: none;
10         }
11 </style>

　　2.inline。行内元素。特点：不自动换行，不可调整大小。

这是div元素。

1 <div style="display: inline;background-color: #bfff00">这是div元素。</div>
2 <div style="display: inline;background-color: #bfff00">这是div元素。</div>

　　3.block。块元素。特点：自动换行，可调整大小。

这是a标签这是a标签

1 <a href="" style="display: block; 180px;height: 28px;background-color: #ff6348;">这是a标签</a>
2 <a href="" style="display: block; 180px;height: 28px;background-color: #ff6348;">这是a标签</a>

　　4.inline-block。行内块元素。特点：不自动换行，可调整大小。

这是p标签

1 <p style="display: inline-block; 180px;height: 28px;background-color: #1190ff">这是p标签</p>
2 <p style="display: inline-block; 180px;height: 28px;background-color: #1190ff">这是p标签</p>

二、float，元素浮动。特点，脱离标志文档流。

 1 <style>
 2         .box {
 3             width: 500px;
 4             height: 200px;
 5             border: 1px solid #000;
 6         }
 7 
 8         .left, .right {
 9             width: 100px;
10             height: 200px;
11             text-align: center;
12             font-size: 32px;
13             line-height: 200px;
14         }
15 
16         .left {
17             float: left;
18             background-color: #ff6348;
19         }
20 
21         .right {
22             float: right;
23             background-color: #ff6568;
24         }
25 </style>
26 
27 <div class="box">
28     <div class="left">left</div>
29     <div class="right">right</div>
30 </div>

left

right

/* 清除浮动：clear */

1 clear：left | right | both ；

三、position，定位。

　　1.static，静态。不发生位移。

　　2.relative，相对定位。以自身为参考点，进行位移。

　　3.absolute，绝对定位。以最接近的父类定位为参考点，进行位移。

　　4.fixed，固定定位。以浏览器窗口为参考点。

 1 <style>
 2         .position {
 3             position: relative;
 4         }
 5 
 6         .static, .relative, .absolute, .fixed {
 7             width: 100px;
 8             height: 100px;
 9             margin: 20px 0;
10             background-color: #ffae13;
11             font-size: 26px;
12             text-align: center;
13         }
14 
15         .relative {
16             position: relative;
17             top: 50px;
18             left: 30px;
19             background-color: #ff6568;
20         }
21 
22         .absolute {
23             position: absolute;
24             top: -50px;
25             left: 60px;
26             background-color: #4199ff;
27         }
28 
29         .fixed {
30             position: fixed;
31             left: 100px;
32             background-color: #00ff89;
33         }
34 </style>
35 
36 <div class="position">
37     <div class="static">static</div>
38     <div class="relative">relative</div>
39     <div class="absolute">absolute</div>
40     <div class="fixed">fixed</div>
41 </div>

static

relative

absolute

fixed

　　5.z-index。非静态元素的层次等级。数值越大，越浮于顶层。

　　默认值：0。

相关阅读:
uva10129 PlayOnWords(并查集，欧拉回路)
UVA439 knightMoves (A*启发搜索)
uva297 Quadtrees (线段树思想，区间操作)
[uva]AncientMessages象形文字识别 (dfs求连通块)
[uva816]AbbottsRevenge Abbott的复仇(经典迷宫BFS)
[dp][uestc]L
[dp][uestc oj]J
[uestc oj]H
[dp uestc oj] G
[dp]uestc oj 邱老师看电影
原文地址：https://www.cnblogs.com/darcrand-blog/p/5777743.html