前端：CSS/12/display属性，overflow属性，cursor光标类型，CSS定位，综合案例：今日闪价

本文深入解析CSS中的display属性及各种定位方式，包括block、inline、none等，以及position属性的static、relative、absolute、fixed取值，阐述了如何通过top、right、bottom、left属性实现精确布局。

display属性

功能：规定网页元素如何显示；
取值：none(隐藏)，block(以块元素显示)，inline(以行内元素显示)；
block:可以实现将行内元素转换为块元素；
inline:可以实现将块元素转成行内元素；

overflow属性：当内容溢出时如何显示

overflow取值：当内容溢出时，溢出的内容该如何显示，取值：visible(可见)，hidden(隐藏),scroll(出现滚动条)，auto(自动)；

cursor光标类型

cursor:网页中光标的类型
取值：text（文本型）,help（帮助型）,wait(加载型),hand（IE浏览器支持的手形光标）,pointer(通用的手形光标)，等等

CSS定位

position:元素定位方式，取值static,fixed,relative,absolute;
static:静态定位（默认状态，不定位）
fixed:固定定位；
relative:相对定位；
absolute:绝对定位；
定位方式，要与定位属性配合使用；
定位坐标：指定定位的元素，偏移目标元素多元的距离；
top:定位元素，距离目标元素顶部边的距离；
right:定位元素，距离目标元素右边的距离；
bottom:定位元素，距离目标元素底部边的距离；
left:定位元素，距离目标元素左边的距离；

1，固定定位：position:fixed
固定定位：是相对于浏览器窗口定位的；
固定定位不占空间，层级高于普通元素，它不会随网页滚动而滚动；
如果不指定定位坐标的话，固定定位元素的位置在原地不动；
固定定位元素一定是“块元素”了，不管原来是什么元素；
2，相对定位：position:relative（相对）;
相对定位，是相对于“原来的自己”进行定位；
相对定位，依然占空间，层级高于普通元素；
如果不指定定位坐标的话，相对定位元素的位置原地不动；
提示：相对定位和绝对定位，一般情况下是配合使用的；
3，绝对定位：position:absolute
相对于祖先定位元素（相对定位，绝对定位），来进行的定位；
如果它的父元素没有进行任何的定位的话，再往上找定位元素；
如果一直找到了<body>都没有找到定位元素的话，那就相对于<body>来进行定位，
绝对定位元素，不占空间，层级要高于普通元素。
如果不指定定位坐标的话，绝对定位元素的位置在原地不动。
绝对定位元素一定是“块元素”了，不管原来是什么元素；

综合案例：今日闪价

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS限时抢购</title>
    <style type="text/css">
        /* 全局CSS样式设置 */
        body,
        ul,
        li,
        img,
        p {
            margin: 0px;
            padding: 0px;
        }

        ul,
        li {
            list-style: none;
        }

        body {
            font-size: 12px;
            font-family: 宋体;
            color: #444;
        }

        /* 今日闪价模块 */
        .shopping {
            width: 800px;
            margin: 20px auto;
            background-color: white;
        }

        .shopping .title {
            height: 60px;
            line-height: 40px;
            border-bottom: 2px solid orange;
            /* 底部边框 */
            font-size: 24px;
            font-family: 微软雅黑;
            font-weight: bold;
            color: orange;
        }

        .shopping img {
            width: 100px;
            height: 150px;
        }

        .shopping .imgauto {
            /* 选择小图标 */
            width: 50px;
            height: 50px;
            position: absolute;
            top: -15px;
            right: -15px;
        }

        .shopping .content p {
            line-height: 150%;
            /* 图片描述的文本行高 */
        }

        .shopping .content li {
            float: left;
            /* 八个单元格浮动 */
            padding: 10px 20px;
            /* 内边距 */
            position: relative;
            /* 定位类型为相对定位，（此处相对的body） */
        }

        .clear {
            clear: both;
            /* 清除浮动 */
        }

        .orange {
            color: orange;
            /* 特殊文本的颜色 */
        }

        .red {
            color: red;
            /* 特殊文本的颜色 */
        }

        .gray {
            color: gray;
            /* 特殊文本的颜色 */
            padding-left: 20px;
            /* 设置左内边距 */
            text-decoration: line-through;
            /* 文本修饰：删除线 */
        }
    </style>
</head>

<body>
    <div class="shopping">
        <div class="title">今日闪价</div>
        <ul class="content">

            <li>
                <img class="img" src="images\td.jpg" /><br />
                <p>
                    [特价款]雷朋板材光学镜架<br />
                    <span class="orange">年终盛典 满128减30元</span><br />
                    <span class="red">&yen:476.00</span><span class="gray">&yen:1360</span>
                </p>
                <img class="imgauto" src="images\th.jpg" />
            </li>
            <li>
                <img src="images\td1.jpg" /><br />
                <p>
                    [特价款]雷朋板材光学镜架<br />
                    <span class="orange">年终盛典 满128减30元</span><br />
                    <span class="red">&yen:476.00</span><span class="gray">&yen:1360</span>
                </p>
                <img class="imgauto" src="images\th.jpg" />
            </li>
            <li>
                <img src="images\td2.jpg" /><br />
                <p>
                    [特价款]雷朋板材光学镜架<br />
                    <span class="orange">年终盛典 满128减30元</span><br />
                    <span class="red">&yen:476.00</span><span class="gray">&yen:1360</span>
                </p>
                <img class="imgauto" src="images\th.jpg" />
            </li>
            <li>
                <img src="images\td3.jpg" /><br />
                <p>
                    [特价款]雷朋板材光学镜架<br />
                    <span class="orange">年终盛典 满128减30元</span><br />
                    <span class="red">&yen:476.00</span><span class="gray">&yen:1360</span>
                </p>
                <img class="imgauto" src="images\th.jpg" />
            </li>
            <li>
                <img src="images\td4.jpg" /><br />
                <p>
                    [特价款]雷朋板材光学镜架<br />
                    <span class="orange">年终盛典 满128减30元</span><br />
                    <span class="red">&yen:476.00</span><span class="gray">&yen:1360</span>
                </p>
                <img class="imgauto" src="images\th.jpg" />
            </li>
            <li>
                <img src="images\td5.jpg" /><br />
                <p>
                    [特价款]雷朋板材光学镜架<br />
                    <span class="orange">年终盛典 满128减30元</span><br />
                    <span class="red">&yen:476.00</span><span class="gray">&yen:1360</span>
                </p>
                <img class="imgauto" src="images\th.jpg" />
            </li>
            <li>
                <img src="images\td6.jpg" /><br />
                <p>
                    [特价款]雷朋板材光学镜架<br />
                    <span class="orange">年终盛典 满128减30元</span><br />
                    <span class="red">&yen:476.00</span><span class="gray">&yen:1360</span>
                </p>
                <img class="imgauto" src="images\th.jpg" />
            </li>
            <li>
                <img src="images\td7.jpg" /><br />
                <p>
                    [特价款]雷朋板材光学镜架<br />
                    <span class="orange">年终盛典 满128减30元</span><br />
                    <span class="red">&yen:476.00</span><span class="gray">&yen:1360</span>
                </p>
                <img class="imgauto" src="images\th.jpg" />
            </li>
        </ul>
        <!-- 此处清除浮动 -->
        <div class="clear"></div>
    </div>
</body>

</html>