CSS布局基礎(chǔ)

1：盒子模型
2：CSS定位與居中問題
3：CSS浮動(dòng)

盒子模型

div盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div盒子模型</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .div-box{
            width: 100px;
            height: 100px;
            background: #000;
            padding: 10px;
            border: 10px solid red;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="div-box"></div>
</body>
</html>

div-box.png

margin 外邊距的合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin外邊距的合并</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .div-box1{
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 10px solid red;
            margin: 10px;
        }
        .div-box2{
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 10px solid red;
            margin: 10px;
        }
    </style>
</head>
<body>
      <div class="div-box1">div</div>
      <div class="div-box2">div</div>
</body>
</html>

上述代碼中鄙麦，兩個(gè)div塊的上下左右外邊距margin均為10px，在外邊距合并后虱肄，div和div上下邊框之間的距離會(huì)取最大的margin值莉给，本例中margin數(shù)值相同楷怒，上下div的border間的距離則為10px而非加和的20px垛吗。效果如圖所示：

外邊距合并.png

span"盒子模型"

內(nèi)聯(lián)元素在頁面布局中并不像塊級元素一樣能夠使用盒子模型中所有的屬性，但是一些屬性也是能夠進(jìn)行的控制的叠艳。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .span1{
            border: 1px solid blue;
            margin: 10px;
        }
        .span2{
            padding: 100px;
            border: 1px solid red;
        }
        div{
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <span class="span1">span</span><span class="span2">span</span>
    <div>1111111111111111111111111</div>
</body>
</html>

上面的代碼在頁面中的展示效果如下：

span.png

width 寬度屬性以及 height 高度屬性僅在塊級元素以及替換元素中適用奶陈。通過上面的代碼可以看到，第二個(gè)span元素雖然設(shè)置了padding但是僅僅在left,right,以及bottom方向起了作用附较，并且在bottom方向上吃粒，雖然將border撐開了，但是下面的div元素仍然無視了撐開的高度拒课，在第二行排布徐勃。在span元素中適用的盒子屬性僅有左右方向上的屬性，即：margin-left,margin-right,padding-left,padding-right捕发，border-left,border-right疏旨。因?yàn)椋瑂pan就是一個(gè)內(nèi)聯(lián)元素（行內(nèi)元素）扎酷，只有行內(nèi)的屬性會(huì)起到作用檐涝。在上述元素中，通常只會(huì)使用到 margin-left 以及 margin-right。

display:inline-block

display屬性可以將塊級元素轉(zhuǎn)換為行內(nèi)元素谁榜，同樣也可以將行內(nèi)元素轉(zhuǎn)換為塊級元素幅聘。inline-block屬性值則是使一些行內(nèi)元素具有塊級元素的某些屬性。如代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .span1{
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 1px solid blue;

        }
        .span2{
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 1px solid red;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid green;
            margin: 10px;
        }
    </style>
</head>
<body>
    <span class="span1">span</span><span class="span2">span</span>
    <div>div</div>
</body>
</html>

頁面展示效果如下：

inline-block.png

可以看到span內(nèi)設(shè)置了display: inline-block;屬性后窃植，不僅盒模型的所有屬性都可以使用帝蒿，且兩個(gè)span元素在一行進(jìn)行了顯示。兩個(gè)span元素之間的margin為20px 巷怜，因?yàn)樽笥襪argin不會(huì)產(chǎn)生合并葛超，但是注意的是，span和下一行的div之間的margin同樣為20px延塑，說明在上下方向绣张，span與div的margin并沒有合并！

box-sizing: border-box;

測試代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 10px solid red;
            margin: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

上述代碼在網(wǎng)頁顯示的效果為：

image.png

CSS屬性 box-sizing: border-box; 可以將原來的content-box（width关带，height作用在content上）轉(zhuǎn)換為border-box（width ,height作用在border以內(nèi)）侥涵。簡單的來說，這個(gè)盒子模型的寬度和高度的100px宋雏，是content+padding+boder的和芜飘。

CSS定位與居中問題

居中是頁面布局最常被用到的需求，處理居中問題往往有多種解決方式磨总，本篇博客將介紹CSS定位以及常用的幾種解決居中問題的思路嗦明。

static

position: static;指定了元素使用正常的布局行為，即元素在文檔常規(guī)流中當(dāng)前的布局位置舍败。此時(shí) top, right, bottom, left 和 z-index 屬性無效招狸。什么叫文檔流呢？文檔流就是元素在頁面中的流動(dòng)方向邻薯，即：行內(nèi)元素從左到右，塊級元素自上至下乘凸。

relative

relative最大的作用就是使元素成為可定位的祖先元素厕诡。被設(shè)置為relative定位屬性值的元素可以使用top,right,bottom,left,z-index等屬性值進(jìn)行相對定位，且相對定位的元素不會(huì)離開常規(guī)流营勤。那么relative相對定位灵嫌，到底是相對哪個(gè)元素進(jìn)行定位的呢？實(shí)際上葛作，就是相對于自己原本常規(guī)流中的位置進(jìn)行相對定位的寿羞。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>relative相對定位</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
            color: white;
        }
        #two {
            position: relative;
            top: 20px;
            left: 20px;
            background: blue;
            z-index: -1;
        }
    </style>
</head>
<body>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
</body>
</html>

示例在頁面的效果為：

relative.png

四個(gè)div均設(shè)置了display: inline-block;屬性，可以看到藍(lán)色的div塊相對于自己常規(guī)流中的位置偏移了top: 20px;left: 20px;赂蠢，但是Two塊并沒有脫離常規(guī)流绪穆，而是在常規(guī)流中占據(jù)了自己原來的"一畝三分地"。這里設(shè)置了z-index: -1;，z-index可以控制元素堆疊的順序玖院，通常來說 z-index 較大的元素會(huì)覆蓋較小的一個(gè)菠红。所以Two塊會(huì)被 Three塊壓在下面。

absolute

絕對定位元素相對于最近的 非 static 祖先元素定位难菌。通常這個(gè)祖先元素設(shè)置為relative试溯，被設(shè)置了absolute的元素會(huì)相對于設(shè)置了relative的祖先元素進(jìn)行定位，倘若沒有這樣一個(gè)祖先元素郊酒，那么它就會(huì)相對于body定位遇绞。被設(shè)置position: absolute; 的元素會(huì)脫離文檔流，示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>absolute絕對定位</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .div1{
            color: #FFFFFF;
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
        }
        .div2{
            color: #FFFFFF;
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
        }
        .child{
            display: inline-block;
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 30px;
            top: 30px;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">
        div2
        <div class="child"></div>
    </div>
</body>
</html>

在頁面中的效果為：

image.png

藍(lán)色的block相對于設(shè)置了相對定位的父元素div2 發(fā)生了偏移燎窘。示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>absolute絕對定位</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box {
            display: inline-block;
            border: 1px solid #000000;
            background: red;
            width: 100px;
            height: 100px;
            float: left;
            color: white;
        }

        #three {
            background: blue;
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
</body>
</html>

示例效果：

image.png

由上面的例子可以看到试读，絕對定位元素脫離了文檔流，并且當(dāng)設(shè)置了絕對定位的元素如果沒有非static的祖先元素荠耽，就會(huì)相對于body進(jìn)行定位钩骇。設(shè)置了absolute,fixed的元素會(huì)自動(dòng)轉(zhuǎn)換為inline-block,也就是說即使在代碼中沒有添加display: inline-block;，只要有position: absolute;,那么這個(gè)元素就會(huì)變?yōu)橐粋€(gè)inline-block铝量。使用絕對定位在處理頁面元素居中問題上除了可以設(shè)置top,left,right,bottom屬性的具體值來達(dá)到水平居中倘屹，垂直居中，還可以將屬性設(shè)置為top:0;bottom:0;left:0;right:0;margin:auto;來達(dá)到居中的效果慢叨。示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>absolute居中妙招</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .outer {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            position: relative;
        }
        .inner{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="outer">
        <span class="inner"></span>
    </div>
</body>
</html>

頁面顯示效果為：

absolute居中妙招

通過示例可以看到纽匙，即使div內(nèi)層為span元素，但是設(shè)置了絕對定位后拍谐，可以添加width和height屬性烛缔，在代碼中，我們雖然沒有添加 display: inline-block;轩拨，但是践瓷，默認(rèn)地 span這個(gè)行內(nèi)元素變成了一個(gè) inline-block。并且看到span元素相對于父元素水平居中且垂直居中亡蓉。

用 absolute定位畫一個(gè)旋轉(zhuǎn)的太極

在線效果預(yù)覽：點(diǎn)擊預(yù)覽
使用在線工具：colorzilla
參考：keyframes
參考：animation-iteration-count
參考: animation-timing-function
使用absolute定位畫一個(gè)勻速旋轉(zhuǎn)的太極,代碼如下（非在線預(yù)覽的代碼）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>line-height</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background: #666;
        }
        @keyframes spin {
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
        .yinyang{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#000000 51%,#000000 100%);
            position: relative;
            animation-duration: 3s;
            animation-name: spin;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            margin: 0 auto;
            top: 200px;
        }
        .yinyang::before{
            content: '';
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #FFFFFF;
            box-sizing: border-box;
            border: 40px solid black;
            left: 0;
            top: 25%;
        }
        .yinyang::after{
            content: '';
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #000;
            box-sizing: border-box;
            border: 40px solid #FFFFFF;
            left: 50%;
            top: 25%;
        }
    </style>
</head>
<body>
    <div class="yinyang"></div>
</body>
</html>

fixed

fixed和absolute可謂是"本是同根生"晕翠，因?yàn)樗蚢bsolute一樣，固定定位元素會(huì)脫離文檔流砍濒，但fixed和 absolute的參照物不同淋肾，fixed 會(huì)參照 viewport 視口做絕對定位。例如在網(wǎng)頁中爸邢，我們滾動(dòng)頁面樊卓，但一直固定在視口的廣告，這些懸浮的廣告就是使用fixed固定定位來實(shí)現(xiàn)的杠河。

sticky

sticky即粘性定位碌尔，粘性定位可以被認(rèn)為是相對定位和固定定位的混合浇辜。粘性定位的元素如果產(chǎn)生了偏移，原位置仍然會(huì)在常規(guī)流中七扰。它的偏移標(biāo)尺是最近的有滾動(dòng)的祖先元素（設(shè)有overflow: scroll;）,如果沒有奢赂，那么它的標(biāo)尺就是viewport即：視口。示例如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            height: 100px;
            border: 1px solid red;
            position: sticky;
            top: 50px;
        }
    </style>
</head>
<body>
    <p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
    <p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
    <p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
    <p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
    <p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
    <div>div</div>
    <p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
    <p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
    <p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
    <p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
    <p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
</body>
</html>

本例中颈走，div元素相對于viewport粘性定位膳灶，在視口top:50px處，可以想象生成了一個(gè)高度為100px的"矩形"立由。在div沒有和"矩形"重合前轧钓，div元素處在文檔流，隨著頁面滾輪向下滾動(dòng)锐膜，div與"矩形"完成了"重合"毕箍。這時(shí)，div則出現(xiàn)了固定定位的效果道盏，即以視口為參照而柑，固定在相對于視口top:50px處，但是div文檔流的位置仍然保留荷逞。

處理元素居中的問題

頁面布局中媒咳，最頻繁需要處理的問題就是元素居中的問題。無論是水平居中种远，還是垂直居中涩澡，常規(guī)的解決思路為：

搞清楚，誰相對于誰居中
將問題轉(zhuǎn)換為一個(gè)塊級元素相對于另一個(gè)塊級元素居中的問題

例如使用屬性 margin: 0 auto水平居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中問題</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .out{
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        .inner{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="inner"></div>
    </div>
</body>
</html>

除了利用margin進(jìn)行居中坠敷，還可以使用相對定位和絕對定位妙同，只要計(jì)算出偏移量就可以讓內(nèi)部的div相對于外部的div塊水平居中。偏移量left=父級塊的width×50%-內(nèi)部塊的width×50%膝迎，本例中為left:100px粥帚；偏移量top=父級塊的height×50%-內(nèi)部塊的height×50%,本例為：top:100px。本例使用CSS定位水平居中及垂直居中弄抬，代碼為：

      *{
            padding: 0;
            margin: 0;
        }
        .out{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
        }
        .inner{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: absolute;
            top: 100px;
            left: 100px;
        }

除了上面計(jì)算具體的偏移量茎辐，還可以使用這樣的寫法：

       *{
            padding: 0;
            margin: 0;
        }
        .out{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
        }
        .inner{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

當(dāng)然，這只是一般的解決思路掂恕，并不能處理所有的問題,或者說，有些屬性和方法在使用上弛槐，更加便捷懊亡。例如：text-align屬性。text-align:center; text-align 屬性只有在塊級元素內(nèi)使用才能生效,CSS屬性定義行內(nèi)文本如何相對它的塊父元素對齊乎串，它并不能控制塊元素自己的對齊店枣，只能控制它的行內(nèi)內(nèi)容的對齊。如：<div><span>span</span></div> 如果希望行內(nèi)的文本"span" 在行內(nèi)水平居中,在塊級標(biāo)簽內(nèi)使用text-align即：div{text-align: center;}即可。如果一個(gè)div塊包裹著一個(gè)img圖片鸯两，也可以用text-align來設(shè)置圖片水平居中闷旧，但是一般情況下不會(huì)這么做。因?yàn)閠ext-align 屬性顧名思義钧唐，是用來設(shè)置文本的一個(gè)屬性(text)忙灼。設(shè)置圖片水平居中的方法往往是在img標(biāo)簽外部再嵌套一個(gè)div標(biāo)簽。解決居中問題钝侠，更多的還需要不斷摸索和嘗試该园。

CSS浮動(dòng)

案例一：使用浮動(dòng)完成如下左右布局的效果：

image.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例一</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background: #EFEFEF;
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
        .skills{
            width: 940px;
            margin: 0 auto;
        }
        .skills h2{
            font-size: 30px;
            color: #3D4451;
            text-align: center;
            margin-top: 60px;
            margin-bottom: 30px;
        }
        .skills ol{
            list-style: none;
            background-color: #FFFFFF;
            padding: 50px;
            box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.75);
        }
        .skills ol>li{
            width: 47%;
            color: #3D4451;
            box-sizing: border-box;
            float: left;
            margin-bottom: 30px;
        }
        .skills ol>li:nth-child(even){
            float: right;
        }
        .skills ol>li:nth-child(5),
        .skills ol>li:nth-child(6){
            margin-bottom: 0;
        }
        .skills ol li .progressBar{
            height: 5px;
            background-color: #FAEAEA;
            border-radius: 3px;
            margin-top: 5px;
        }
        .skills ol li .progressBar>.progress{
            width: 70%;
            height: 100%;
            background-color: #E6686A;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <section class="skills">
        <h2>技能</h2>
        <ol class="clearfix">
            <li>
                HTML5 &amp; CSS3
                <div class="progressBar">
                    <div class="progress"></div>
                </div>
            </li>
            <li>
                JavaScript
                <div class="progressBar">
                    <div class="progress"></div>
                </div>
            </li>
            <li>
                jQuery
                <div class="progressBar">
                    <div class="progress"></div>
                </div>
            </li>
            <li>
                Vue
                <div class="progressBar">
                    <div class="progress"></div>
                </div>
            </li>
            <li>
                React
                <div class="progressBar">
                    <div class="progress"></div>
                </div>
            </li>
            <li>
                HTTP
                <div class="progressBar">
                    <div class="progress"></div>
                </div>
            </li>
        </ol>
    </section>
</body>
</html>

本案例使用在線shadow生成器：cssmatic。

本案例中使用了浮動(dòng)帅韧，完成了示例的左右排布的效果里初，使用浮動(dòng)后，元素會(huì)脫離文檔流忽舟，出現(xiàn)"浮動(dòng)溢出"双妨，也叫"高度塌陷"，需要在元素浮動(dòng)后"清除浮動(dòng)"叮阅。清除浮動(dòng)有以下幾種常用方法：

方法一
在浮動(dòng)元素后刁品，使用一個(gè)空元素例如：<div class="clear"></div>
方法二
給浮動(dòng)元素添加overflow: hidden;
方法三
使用CSS3的:after偽元素 這也是現(xiàn)在清除浮動(dòng)最常用的方法。具體為在浮動(dòng)的元素的父級元素添加class="clearfix" 屬性帘饶，然后添加CSS清除浮動(dòng)代碼：

.clearfix:after{
      content: '';
      display: block;
      clear:both;
}

案例二：使用浮動(dòng)完成如下布局：

image.png

案例效果為：點(diǎn)擊"所有"哑诊，"原生JS&CSS"，"框架"及刻，底部的滾動(dòng)條發(fā)生滾動(dòng)镀裤。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>absolute絕對定位</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #EFEFEF;
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
        .portfolio{
            width: 940px;
            margin: 60px auto 0;
            text-align: center;
        }
        .portfolio h2{
            color: #3D4451;
            font-size: 30px;
            margin-bottom: 30px;
        }
        .portfolio nav{
            text-align: center;
            display: inline-block;
            cursor: pointer;

        }
        .portfolio ol{
            list-style-type: none;
            margin-bottom: 5px;
        }
        .portfolio ol>li{
            font-size: 17px;
            float: left;
            margin-right: 40px;
        }
        .portfolio ol>li:nth-child(3){
            margin-right: 0;
        }
        .progressBar{
            height: 5px;
            background: #FFFFFF;
            border-radius: 3px;
        }
        .progressBar .progress{
            width: 15%;
            height: 100%;
            background-color: #E6686A;
            border-radius: 3px;
            transition: all 0.5s;
        }
        .progressBar.state-1 .progress{
            margin-left: 0;
            width: 15%;
        }
        .progressBar.state-2 .progress{
            margin-left: 74px;
            width: 39%;
        }
        .progressBar.state-3 .progress{
            margin-left: 209px;
            width: 18%;
        }
    </style>
</head>
<body>
    <section class="portfolio">
        <h2>作品集</h2>
        <nav>
            <ol class="clearfix">
                <li id="li1">所有</li>
                <li id="li2">原生JS &amp; CSS</li>
                <li id="li3">框架</li>
            </ol>
            <div id="progressBar" class="progressBar state-1">
                <div class="progress"></div>
            </div>
        </nav>
        <script>
            li1.onclick = function () {
                progressBar.className = 'progressBar state-1'
            }
            li2.onclick = function () {
                progressBar.className = 'progressBar state-2'
            }
            li3.onclick = function () {
                progressBar.className = 'progressBar state-3'
            }
    </script>
    </section>
</body>
</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市缴饭，隨后出現(xiàn)的幾起案子暑劝，更是在濱河造成了極大的恐慌，老刑警劉巖颗搂，帶你破解...
沈念sama閱讀 216,470評論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件担猛，死亡現(xiàn)場離奇詭異，居然都是意外死亡丢氢，警方通過查閱死者的電腦和手機(jī)傅联，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,393評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來疚察，“玉大人蒸走，你說我怎么就攤上這事∶驳眨” “怎么了比驻？”我有些...
開封第一講書人閱讀 162,577評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵该溯，是天一觀的道長。經(jīng)常有香客問我别惦，道長狈茉，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,176評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任掸掸，我火速辦了婚禮氯庆，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘猾漫。我一直安慰自己点晴，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,189評論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布悯周。她就那樣靜靜地躺著粒督，像睡著了一般。火紅的嫁衣襯著肌膚如雪禽翼。梳的紋絲不亂的頭發(fā)上屠橄，一...
開封第一講書人閱讀 51,155評論 1贊 299
城市分裂傳說
那天，我揣著相機(jī)與錄音闰挡，去河邊找鬼锐墙。笑死，一個(gè)胖子當(dāng)著我的面吹牛长酗，可吹牛的內(nèi)容都是我干的溪北。我是一名探鬼主播，決...
沈念sama閱讀 40,041評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼夺脾，長吁一口氣：“原來是場噩夢啊……” “哼之拨！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起咧叭，我...
開封第一講書人閱讀 38,903評論 0贊 274
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤蚀乔，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后菲茬，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吉挣，經(jīng)...
沈念sama閱讀 45,319評論 1贊 310
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,539評論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年婉弹，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了睬魂。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,703評論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡镀赌，死狀恐怖汉买，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情佩脊，我是刑警寧澤蛙粘，帶...
沈念sama閱讀 35,417評論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站威彰，受9級特大地震影響出牧，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜歇盼，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,013評論 3贊 325
男人毒藥：我在死后第九天來索命
文/蒙蒙一舔痕、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧豹缀，春花似錦伯复、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,664評論 0贊 22
一樁弒父案啸如，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至氮惯，卻和暖如春叮雳，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背妇汗。一陣腳步聲響...
開封第一講書人閱讀 32,818評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工帘不，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人杨箭。一個(gè)月前我還...
沈念sama閱讀 47,711評論 2贊 368
代替公主和親
正文我出身青樓寞焙，卻偏偏與公主長得像，于是被迫代替她去往敵國和親互婿。傳聞我的和親對象是個(gè)殘疾皇子捣郊，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,601評論 2贊 353

CSS布局基礎(chǔ)

盒子模型

div盒子模型

margin 外邊距的合并

span"盒子模型"

display:inline-block

box-sizing: border-box;

CSS定位與居中問題

static

relative

absolute

用 absolute定位畫一個(gè)旋轉(zhuǎn)的太極

fixed

sticky

處理元素居中的問題

CSS浮動(dòng)

推薦閱讀更多精彩內(nèi)容