Python（三十六）CSS提升

前端第三課CSS提升來啦屡限！涉及的內(nèi)容有box model：盒子模型钝鸽；CSS floating：CSS浮動矛纹；CSS positioning and hierarchy：CSS定位和層級话原；reset styles：重置樣式蕾管。

1. 盒子模型

1.1. 盒子模型（Box Model）

所有的HTML元素可以看做是一個div盒子，在CSS中啡氢，“box model”這一術(shù)語是用來設(shè)計和布局時使用。

1.2. 盒子模型的包含內(nèi)容

CSS盒模型本質(zhì)上是一個盒子术裸，封裝周圍的HTML元素倘是，它包括邊距袭艺，邊框搀崭，填充和實際的內(nèi)容猾编。

1.3.盒子 各部分解釋

Margin（外邊距）：清除邊框外的區(qū)域，外邊距是透明的答倡。
Border（邊框）：圍繞在內(nèi)邊框和內(nèi)容外的邊框轰传。
Padding（內(nèi)邊距）：清除內(nèi)容周圍的區(qū)域瘪撇，內(nèi)邊距是透明的。
Content（內(nèi)容）：盒子的內(nèi)容倔既，顯示文本和圖像恕曲。

border-top: pink 2px solid;：給盒子頂部加2px的標準線粉色邊框。
double：雙線渤涌；dashed：虛線佩谣；dotted：點線茸俭。
display: inline-block;：設(shè)置成行塊元素瞳秽，既可以在同一行，也可以設(shè)置寬高练俐。
display: inline;：設(shè)置成行內(nèi)元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            /*!*solid標準線*!*/
            /*border-top: pink 2px solid;*/

            /*!*double雙線*!*/
            /*border-right: orange 5px double;*/

            /*!*dashed虛線*!*/
            /*border-bottom: blue 3px dashed;*/

            /*!*dotted點線*!*/
            /*border-left: darkblue 8px dotted ;*/

            /*border-color: crimson;*/
            /*border-style: solid;*/
            /*border-width: 5px;*/

            /*四邊一起設(shè)置*/
            border: green 2px solid;

            /*!*內(nèi)邊距會把盒子撐大，不能設(shè)置成負數(shù)*!*/
            /*padding: 20px;*/
            /*padding-top: 20px;*/
            /*padding-left: 20px;*/

            /*!*上下 左右*!*/
            /*padding: 50px 100px;*/

            /*!*上 左右 下*!*/
            /*padding: 50px 100px 60px;*/

            /*上 右 下 左*/
            padding: 40px 50px 60px 70px;

            /*外邊距*/
            margin-top: 0px;
            margin-left: 0px;
            margin-bottom: 80px;
        }
        .box3{
            width: 50px;
            height: 50px;
            border: blue 2px solid;
            background-color: blue;
            /*!*左右的外邊距不重合直接相加辜贵，上下的外邊距重合是取大值*!*/
            
            /*margin-left: 45px;*/
            /*margin-top: 50px;*/

            /*margin外邊距可以設(shè)置負值归形，外邊距不影響盒子大小*/
            /*!*上下左右*!*/
            /*margin: 50px;*/
            /*!*上下 左右*!*/
            /*margin: 50px 100px;*/

            /*小外邊距（左）與大盒子（右）的左外邊距相差50px*/
            margin-left: -50px;
            margin-right: -50px;
        }
        .box2{
            width: 500px;
            height: 500px;
            background-color: crimson;
            border: yellow 1px solid;
        }
        .box1,.box3{
            /*!*行塊元素，既可以在同一行厚棵，也可以設(shè)置寬高*!*/
            /*display: inline-block;*/

            /*!*設(shè)置成行內(nèi)元素*!*/
            /*display: inline;*/
        }

    </style>
</head>
<body>

<div class="box2">
    <div class="box1">
        Then
    </div>
    <div class="box3">
        Then
    </div>
</div>

</body>
</html>

2. CSS浮動

2.1. 文檔流

文檔流流動的是元素蔼紧，可以將屏幕中顯示的內(nèi)容一一對應為文檔中的一個元素。

2.2. CSS浮動

浮動彬犯，其實就是讓元素脫離正常的文檔流查吊。當正常文檔布局不能解決的時候，則需要脫離正常文檔流宋列。

2.3. CSS浮動優(yōu)缺點

優(yōu)點：使元素脫離文檔流箭阶，按照指定的（左右）方向移動，遇到父級邊界或者相鄰元素停下來嘹叫。
缺點：浮動會帶來高度塌陷的問題诈乒。

高度塌陷解決方式如下：
①給父級盒子設(shè)置高度，因為要隨時調(diào)整怕磨，所以不推薦使用這種方法；
②新建一個空的div员帮，給它設(shè)置高度导饲，不過不推薦使用這種方法氯材；
③給父級盒子設(shè)置overflow硝岗，不過會隱藏下拉框型檀，所以不推薦；
④解決方法四：清除浮動胀溺，只有塊狀元素可以使用月幌，推薦使用這種方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS floating</title>
    <style>
        /*div{*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    !*!*!*浮動主要起從上往下變成從左往右或從右往左的作用*!*!*!*/
        /*    !*!*從左往右浮動*!*!*/
        /*    !*float: left;*!*/
        /*}*/
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            /*!*藍色將橘色覆蓋了*!*/
            /*float: left;*/
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        /*這樣以后大盒子會產(chǎn)生高度坍塌，變?yōu)?*/
        .box1,.box2,.box3{
            float: left;
        }

        /*!*解決方法一：給父級盒子設(shè)置高度蝎困，因為要隨時調(diào)整，所以不推薦使用這種方法*!*/
        /*.box{*/
        /*    height: 100px;*/
        /*}*/

        /*!*解決方法二：新建一個空的div禾乘，給它設(shè)置高度，不過不推薦使用這種方法*!*/
        /*.box4{*/
        /*    height: 100px;*/
        /*}*/

        /*!*解決方法三：給父級盒子設(shè)置overflow蒲稳，不過會隱藏下拉框伍派，所以不推薦*!*/
        /*.box{*/
        /*    overflow: hidden;*/
        /*}*/

        /*!*解決方法四：清除浮動，只有塊狀元素可以使用祥国，推薦使用這種方法*!*/
        /*.box:after{*/
        /*    display: block;*/
        /*    content: "";*/
        /*    clear:both;*/
        /*}*/
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>
</html>

3. CSS定位

定位就是將元素定在網(wǎng)頁中的任意位置舌稀。

3.1. 靜態(tài)定位

static靜態(tài)定位（沒有定位）灼擂，默認。

3.2. 相對定位

relative相對定位剔应，相對于正常位置（原來沒定位之前的位置）進行定位，還要占據(jù)位置嫉到。

3.3. 絕對定位

absolute絕對定位，沒有占據(jù)位置孽锥，使元素完全脫離文檔流细层；沒有定位父級，則相對整個文檔發(fā)生偏移;參考最近非static定位的父級進行定位盛撑。

3.4. 固定定位

fixed固定定位捧搞，相對于瀏覽器窗口進行定位方形詞;left 、 right介粘、top晚树、bottom。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS positioning and hierarchy</title>
    <style>
        *{
            /*將網(wǎng)頁自帶的樣式慨亲，外邊距和內(nèi)邊距給去除宝鼓，方便絕對定位使用*/
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 300px;
            background-color: orange;
            /*父級盒子最好用相對定位*/
            position: relative;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: crimson;
            /*!*靜態(tài)定位*!*/
            /*position: static;*/
            /*top: 50px;*/

            /*!*相對定位，距離上邊铐望，往下移了50px茂附，相對于外部的盒子*!*/
            /*position: relative;*/
            /*top: 50px;*/

            /*!*絕對定位，是相對于網(wǎng)頁乒验，不過也相對設(shè)置了定位父級盒子的位置進行改變*!*/
            /*!*子級盒子最好用絕對定位*!*/
            /*position: absolute;*/
            /*top: 200px;*/

            /*!*固定定位蒂阱，相對瀏覽器改變位置狂塘，如下方顯示則在右下角*!*/
            /*position: fixed;*/
            /*right: 0;*/
            /*bottom: 0;*/
        }
        .box2,.box3{
            width: 100px;
            height: 100px;
        }
        .box2{
            background-color: yellow;
            position: absolute;
            top: 200px;
            /*層級默認是0*/
            z-index: 2;
        }
        .box3{
            background-color: blue;
            position: absolute;
            top: 200px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">

    </div>
    <div class="box2">

    </div>
    <div class="box3">

    </div>
</div>
</body>
</html>

4. 重置樣式

瀏覽器在解析某些標簽的時候,本身就自帶了一些樣式,導致我們寫樣式的時候就會效果不—致荞胡。在這里我們可以使用別人提供的 ResetCSS來去掉瀏覽器的樣式了嚎，重新開始寫自己的樣式。

4.1. CSS文件代碼（文件名稱為04萝勤、reset styles.css）

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

4.2. HTML文件代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reset styles</title>
    <link rel="stylesheet" href="04敌卓、reset%20styles.css">
    <style>
                .box{
            width: 200px;
            height: 300px;
            background-color: orange;
            /*父級盒子最好用相對定位*/
            position: relative;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: crimson;
        }
        .box2,.box3{
            width: 100px;
            height: 100px;
        }
        .box2{
            background-color: yellow;
            position: absolute;
            top: 200px;
            /*層級默認是0*/
            z-index: 2;
        }
        .box3{
            background-color: blue;
            position: absolute;
            top: 200px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">

    </div>
    <div class="box2">

    </div>
    <div class="box3">

    </div>
</div>
</body>
</html>

文章到這里就結(jié)束了伶氢！希望大家能多多支持Python（系列）！六個月帶大家學會Python舵抹，私聊我劣砍，可以問關(guān)于本文章的問題扇救！以后每天都會發(fā)布新的文章，喜歡的點點關(guān)注装畅！一個陪伴你學習Python的新青年沧烈！不管多忙都會更新下去，一起加油蚂夕！

Editor：Lonelyroots

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
禁止轉(zhuǎn)載腋逆，如需轉(zhuǎn)載請通過簡信或評論聯(lián)系作者。
  • 人面猴
    序言：七十年代末等脂，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子搏屑，更是在濱河造成了極大的恐慌粉楚，老刑警劉巖，帶你破解...
    沈念sama閱讀 219,039評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件抑党，死亡現(xiàn)場離奇詭異撵摆，居然都是意外死亡，警方通過查閱死者的電腦和手機暑中，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門鲫剿，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人雕凹，你說我怎么就攤上這事政冻。” “怎么了汽摹？”我有些...
    開封第一講書人閱讀 165,417評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵苦锨，是天一觀的道長。 經(jīng)常有香客問我拉庶，道長魏蔗，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,868評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任廓鞠，我火速辦了婚禮，結(jié)果婚禮上床佳，老公的妹妹穿的比我還像新娘。我一直安慰自己杆麸，他們只是感情好浪感，可當我...
    茶點故事閱讀 67,892評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著揭斧，像睡著了一般峻堰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上旦万，一...
    開封第一講書人閱讀 51,692評論 1贊 305
  • 城市分裂傳說
    那天镶蹋，我揣著相機與錄音，去河邊找鬼狰腌。 笑死牧氮，一個胖子當著我的面吹牛瑰枫，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播尸诽，決...
    沈念sama閱讀 40,416評論 3贊 419
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼盯另，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了商蕴？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,326評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤苛谷，失蹤者是張志新（化名）和其女友劉穎格郁，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體锣尉，經(jīng)...
    沈念sama閱讀 45,782評論 1贊 316
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡决采，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,957評論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年织狐，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片旺嬉。...
    茶點故事閱讀 40,102評論 1贊 350
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡厨埋，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出雨效，到底是詐尸還是另有隱情废赞，我是刑警寧澤，帶...
    沈念sama閱讀 35,790評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布据悔，位于F島的核電站耘沼，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏群嗤。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,442評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一骇径、第九天 我趴在偏房一處隱蔽的房頂上張望既峡。 院中可真熱鬧，春花似錦运敢、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0贊 22
  • 一樁弒父案卦方，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至尘吗，卻和暖如春浇坐，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背近刘。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工觉渴， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人案淋。 一個月前我還...
    沈念sama閱讀 48,332評論 3贊 373
  • 代替公主和親
    正文 我出身青樓踢京，卻偏偏與公主長得像，于是被迫代替她去往敵國和親漱挚。 傳聞我的和親對象是個殘疾皇子渺氧，可洞房花燭夜當晚...
    茶點故事閱讀 45,044評論 2贊 355