CSS 布局

一、Display。元素显示模式。

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

鼠标移入隐藏下方的div

 

<style type="text/css">
        .none, .none-show {
            width: 300px;
            height: 32px;
            background-color: #569968;
        }

        .none:hover + .none-show {
            display: none;
        }
</style>

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

这是div元素。

这是div元素。

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

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

这是a标签 这是a标签

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

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

这是p标签

这是p标签

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

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

<style>
        .box {
            width: 500px;
            height: 200px;
            border: 1px solid #000;
        }

        .left, .right {
            width: 100px;
            height: 200px;
            text-align: center;
            font-size: 32px;
            line-height: 200px;
        }

        .left {
            float: left;
            background-color: #ff6348;
        }

        .right {
            float: right;
            background-color: #ff6568;
        }
</style>

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

left

right

/* 清除浮动：clear */

clear：left | right | both ；

三、position，定位。

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

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

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

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

<style>
        .position {
            position: relative;
        }

        .static, .relative, .absolute, .fixed {
            width: 100px;
            height: 100px;
            margin: 20px 0;
            background-color: #ffae13;
            font-size: 26px;
            text-align: center;
        }

        .relative {
            position: relative;
            top: 50px;
            left: 30px;
            background-color: #ff6568;
        }

        .absolute {
            position: absolute;
            top: -50px;
            left: 60px;
            background-color: #4199ff;
        }

        .fixed {
            position: fixed;
            left: 100px;
            background-color: #00ff89;
        }
</style>

<div class="position">
    <div class="static">static</div>
    <div class="relative">relative</div>
    <div class="absolute">absolute</div>
    <div class="fixed">fixed</div>
</div>

static

relative

absolute

fixed

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

　　默认值：0。