(第十天)CSS樣式之盒子模型

盒子模型簡(jiǎn)介

所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用摧茴。
CSS盒模型本質(zhì)上是一個(gè)盒子哄褒，封裝周圍的HTML元素稀蟋，它包括：margin，border呐赡，padding退客，和content。
盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素链嘀。
下面的圖片說(shuō)明了盒子模型(Box Model)：

來(lái)自runoob的盒子模型圖

盒子類型的定義方式

盒子類型通過(guò)display屬性進(jìn)行定義萌狂。

常見的盒子類型

inline：內(nèi)聯(lián)型
block：塊型
inline-block：具有塊型部分屬性的內(nèi)聯(lián)型
inline-table：可以讓table具有inline的屬性，即原table上下的元素可以排列在table的左右兩側(cè)
list-item：將元素設(shè)置為列表類型怀泊，具有block型元素的屬性茫藏；該類型的元素可以使用li元素相關(guān)的屬性，如list-style霹琼。

盒子的總寬與總高的計(jì)算方式

顯式聲明的寬度與高度

元素的總寬度計(jì)算公式是這樣的：
總元素的寬度=設(shè)置的寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計(jì)算公式是這樣的：
總元素的高度=設(shè)置的高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

隱式（即沒(méi)有設(shè)置）與顯式的區(qū)別

顯式聲明的情況下务傲，元素的總寬度總高度會(huì)隨著margin、padding枣申、border變化售葡；
隱式聲明的情況下，元素的內(nèi)容寬度內(nèi)容高度會(huì)隨著margin忠藤、padding挟伙、border變化

代碼示例

<head>
    <meta charset="UTF-8">
    <title>寬度與高度的顯式與隱式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        section {
            margin: 10px auto;
            border: 1px solid;
            width: 500px;
        }

        section div {
            margin: 10px;
            padding: 10px;
            background-color: #8A2BE2;
        }

        section p {
            margin: 10px;
            padding: 10px;
            background-color: #00ffcc;
        }

        section p span {
            margin: 10px;
            padding: 10px;
            background-color: #007F0E;
        }

        #explicit div {
            /*顯式聲明之后，margin熄驼、padding像寒、border都會(huì)影響box的總寬度*/
            width: 500px;
        }

        #explicit span {
            /*inline元素，寬高無(wú)效瓜贾；*/
            width: 500px;
            /*因?yàn)閕nline元素的寬高是由內(nèi)容決定的诺祸，所以padding的多少不會(huì)影響正常的文檔流
            所以就出現(xiàn)了超出父元素高度的效果.*/
            padding: 20px;
        }

    </style>
</head>
<body>
<section id="explicit">
    <h2>顯式的寬高：section設(shè)置了width為500px</h2>
    <div>塊級(jí)元素的父元素：顯式寬度width:500px，總width=width+margin+border+padding祭芦，可超出父元素
        <p>隱式寬度筷笨，自適應(yīng)父元素；塊級(jí)元素的子元素<span>內(nèi)聯(lián)元素</span></p>
    </div>
</section>
</body>

上述代碼效果圖

box-sizing屬性規(guī)定盒子的寬高計(jì)算方法

屬性值為content-box(默認(rèn)值)：width與height的屬性值表示內(nèi)容的寬高，padding胃夏、border都會(huì)改變盒子的總寬高
屬性值為border-box：width與height的屬性值表示盒子總寬高轴或，padding、border的設(shè)置不會(huì)改變盒子的總寬高仰禀，只會(huì)影響內(nèi)容的寬高照雁。

content-box和border-box屬性值的區(qū)別就像隱式和顯式設(shè)置寬高的區(qū)別一樣，但是通過(guò)設(shè)置box-sizing:border-box答恶，即使是顯式設(shè)置height饺蚊、width，padding悬嗓、border的改變也不會(huì)影響盒子的總寬高污呼。

<head>
    <meta charset="UTF-8">
    <title>設(shè)置盒子寬高針對(duì)的對(duì)象</title>
    <style>
        div{
            height:100px;
            width:100px;
        }
        .border_box{
            /*設(shè)置box-sizing為border-box，則該元素的width包竹、height包含border,padding,content的寬度*/
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border:1em solid #ff0000;
            padding:1em;
            background-color: #ff0;
        }
        .content_box{
            /*設(shè)置box-sizing為content-box燕酷，則該元素的width、height只包含內(nèi)容區(qū)域的width周瞎、height苗缩，
            增加border、padding屬性會(huì)增加該元素的width堰氓、height*/
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            border: 1em solid #ff0000;
            padding: 1em;
            background-color: #ff0;
        }
    </style>
</head>
<body>
<h2>整個(gè)div寬高分別為100px*100px;內(nèi)容區(qū)域width=div.width-border.width-padding.width</h2>
<div class="border_box">border-box</div>
<h2>內(nèi)容區(qū)域width=div.width挤渐；若給div添加border、padding屬性双絮，則div.width會(huì)增加</h2>
<div class="content_box">content-box內(nèi)容區(qū)域?qū)捀叻謩e為100px*100px</div>
</body>

上述代碼示例的效果圖

超出盒子范圍的內(nèi)容如何顯示

通過(guò)overflow屬性，可以設(shè)置當(dāng)內(nèi)容超出盒子寬高時(shí)的顯式方式

overflow的屬性值

hidden：超出盒子范圍隱藏內(nèi)容
scroll：出現(xiàn)超出盒子范圍時(shí)得问，給盒子添加x囤攀，y軸上的滾動(dòng)條；即使某方向上沒(méi)有超出范圍宫纬，也會(huì)出現(xiàn)灰條焚挠。
auto：根據(jù)內(nèi)容x，y軸方向的超出情況漓骚，自動(dòng)添加滾動(dòng)條蝌衔；若自有x軸超出，則只添加x軸滾動(dòng)條蝌蹂；常見的情況只出現(xiàn)y軸方向滾動(dòng)條噩斟，因?yàn)闉g覽器對(duì)元素的換行處理是超出盒子范圍自動(dòng)換行，若white-space設(shè)置為nowrap孤个，那么超出盒子寬度則出現(xiàn)x軸方向的滾動(dòng)條剃允。
visible(默認(rèn))：超出盒子范圍的內(nèi)容也正常顯示

overflow的分開設(shè)置方式

overflow-x：寬度超出范圍的處理方式
overflow-y：高度超出范圍的處理方式

代碼示例

<head>
    <meta charset="UTF-8">
    <title>超出盒子范圍的內(nèi)容如何顯示？overflow</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        section{
            /*將section設(shè)置為內(nèi)聯(lián)塊元素，并于不影響block元素的作用的同時(shí)同行顯示*/
            display: inline-block;
        }
        h2{
            font-size:12px;
            margin: 5px 10px;
        }
        .box {
            height: 100px;
            width: 300px;
            background-color: red;
            margin-left: 10px;
        }
        #overflow_hidden{
            overflow: hidden;
        }
        #overflow_auto{
            /*因?yàn)闉g覽器默認(rèn)會(huì)讓超出范圍的內(nèi)容自動(dòng)換行,故只有y軸出現(xiàn)滾動(dòng)條*/
            overflow: auto;
        }
        #overflow_scroll{
            overflow: scroll;
        }
        #overflow_x{
            /*設(shè)置為不換行*/
            white-space: nowrap;
            overflow-x: scroll;
        }
        #overflow_y{
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<section>
<h2>超出內(nèi)容設(shè)置為隱藏斥废，overflow:hidden</h2>
<div class="box" id="overflow_hidden">
    這是盒子里的內(nèi)容椒楣，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容牡肉，是很長(zhǎng)一段重復(fù)的話捧灰；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話统锤；
    這是盒子里的內(nèi)容凤壁，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容跪另，是很長(zhǎng)一段重復(fù)的話拧抖；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話免绿；
    這是盒子里的內(nèi)容唧席，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容嘲驾，是很長(zhǎng)一段重復(fù)的話淌哟；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話辽故；
    這是盒子里的內(nèi)容徒仓，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容誊垢，是很長(zhǎng)一段重復(fù)的話掉弛；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話喂走；
    這是盒子里的內(nèi)容殃饿，是很長(zhǎng)一段重復(fù)的話；
</div>
</section>
<section>
<h2>根據(jù)內(nèi)容情況自動(dòng)設(shè)置scroll芋肠，overflow:auto</h2>
<div class="box" id="overflow_auto">
    這是盒子里的內(nèi)容乎芳，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容帖池，是很長(zhǎng)一段重復(fù)的話奈惑；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話睡汹；
    這是盒子里的內(nèi)容肴甸，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容帮孔，是很長(zhǎng)一段重復(fù)的話雷滋；
    這是盒子里的內(nèi)容不撑，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容晤斩，是很長(zhǎng)一段重復(fù)的話焕檬；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話澳泵；
    這是盒子里的內(nèi)容实愚，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容兔辅，是很長(zhǎng)一段重復(fù)的話腊敲；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話维苔；
    這是盒子里的內(nèi)容碰辅，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容介时，是很長(zhǎng)一段重復(fù)的話没宾；
</div>
</section>
<section>
<h2>設(shè)置水平垂直方向都有滾動(dòng)條，overflow:scroll</h2>
<div class="box" id="overflow_scroll">
    這是盒子里的內(nèi)容沸柔，是很長(zhǎng)一段重復(fù)的話循衰；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話褐澎；
    這是盒子里的內(nèi)容会钝，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容工三，是很長(zhǎng)一段重復(fù)的話迁酸；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話徒蟆；
    這是盒子里的內(nèi)容胁出，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容段审，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容闹蒜，是很長(zhǎng)一段重復(fù)的話寺枉；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話绷落；
    這是盒子里的內(nèi)容姥闪，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容砌烁，是很長(zhǎng)一段重復(fù)的話筐喳；
    這是盒子里的內(nèi)容催式，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容避归，是很長(zhǎng)一段重復(fù)的話荣月；
</div>
</section>
<section>
<h2>單獨(dú)設(shè)置水平方向?yàn)闈L動(dòng)，overflow-x:scroll</h2>
<div class="box" id="overflow_x">
    這是盒子里的內(nèi)容梳毙，是很長(zhǎng)一段重復(fù)的話哺窄；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話账锹；
    這是盒子里的內(nèi)容萌业，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容奸柬，是很長(zhǎng)一段重復(fù)的話生年；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話廓奕；
    這是盒子里的內(nèi)容抱婉，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容懂从，是很長(zhǎng)一段重復(fù)的話授段；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話番甩；
    這是盒子里的內(nèi)容侵贵，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容缘薛，是很長(zhǎng)一段重復(fù)的話窍育；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話宴胧；
    這是盒子里的內(nèi)容漱抓，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容恕齐，是很長(zhǎng)一段重復(fù)的話乞娄；
</div>
</section>
<section>
<h2>單獨(dú)設(shè)置垂直方向?yàn)闈L動(dòng)，overflow-y:scroll</h2>
<div class="box" id="overflow_y">
    這是盒子里的內(nèi)容显歧，是很長(zhǎng)一段重復(fù)的話仪或；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話士骤；
    這是盒子里的內(nèi)容范删，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容拷肌，是很長(zhǎng)一段重復(fù)的話到旦；
    這是盒子里的內(nèi)容旨巷，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容添忘，是很長(zhǎng)一段重復(fù)的話采呐；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話昔汉；
    這是盒子里的內(nèi)容懈万，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容靶病，是很長(zhǎng)一段重復(fù)的話会通；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話娄周；
    這是盒子里的內(nèi)容涕侈，是很長(zhǎng)一段重復(fù)的話；
    這是盒子里的內(nèi)容煤辨，是很長(zhǎng)一段重復(fù)的話裳涛；
    這是盒子里的內(nèi)容，是很長(zhǎng)一段重復(fù)的話众辨；
</div>
</section>
</body>

上述代碼示例的效果圖

外邊距margin

常用屬性

margin：上右下左下方屬性的簡(jiǎn)寫方式端三；省略其中一個(gè)值的情況下，省略的值對(duì)于對(duì)角的值鹃彻，如省略最后的左郊闯，那么左的值會(huì)和右相等。
margin-top：上外邊距
margin-right：右外邊距
margin-bottom：下外邊距
margin-left：左外邊距

上下外邊距的折疊

兄弟元素之間的margin合并：

現(xiàn)象：若上下兩個(gè)元素都有margin屬性蛛株，則會(huì)發(fā)生合并团赁，合并后間距等于外邊距較大的值；即上元素margin-bottom:10px; 下元素margin-top:20px; 那么上下元素之間的間距為20px谨履，并非30px欢摄。
解決：可以在不想被折疊的元素中添加display:inline-block屬性值(ie7及以下會(huì)出現(xiàn)bug，但天貓都已經(jīng)宣布放棄IE8了笋粟，那這里就不扯ie7的事了)或者float屬性值防止兄弟元素之間的margin合并現(xiàn)象怀挠。

父子元素之間的margin合并：

現(xiàn)象：若父元素的第一個(gè)子元素或最后一個(gè)子元素分別有margin-top、margin-bottom屬性害捕，那么父元素的margin-top與第一個(gè)子元素的margin-top會(huì)出現(xiàn)合并現(xiàn)象唆香，父元素的margin-bottom與最后一個(gè)子元素的margin-bottom也會(huì)出現(xiàn)合并現(xiàn)象。
解決：
1.子元素的margin-top改成padding-top吨艇，margin-bottom改成padding-bottom；
2.給父元素折疊方向上添加對(duì)應(yīng)的padding或者border屬性值腾啥，大小不能為0东涡；
3.給父元素添加overflow:auto或者overflow:hidden的屬性值同樣可以解決

代碼示例

<head>
    <meta charset="UTF-8">
    <title>margin的折疊問(wèn)題</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .parent {
            background-color: #ffff00;
        }

        .sub {
            margin: 10px;
            background-color: #00ffcc;
        }

        .none {
            /*inline-block元素設(shè)置的margin不會(huì)折疊冯吓，但元素變?yōu)閮?nèi)聯(lián)元素，
            故width默認(rèn)為實(shí)際內(nèi)容的寬度疮跑，可自行設(shè)置width值*/
            display: inline-block;
            background-color: #8A2BE2;
        }
        .two{
            background-color: #8A2BE2;
        }
        .three {
            /*父元素設(shè)置border或者padding或者overflow都可以組織子元素與父元素的折疊*/
            /*border: 1px solid; 這種方式會(huì)增加盒子的寬高*/
            /*padding:1px; 這種方式同樣會(huì)增加盒子的寬高*/
            overflow: auto; /*這種方式最理想,不會(huì)改變盒子的大小*/
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="sub">第一個(gè)子元素组贺，子元素與父元素的margin折疊; 子元素margin-top:10px 父元素margin-top:0px; 所以折疊后的上外邊距為10px;</div>
    <div class="sub">第二個(gè)子元素，第一個(gè)子元素margin-bottom:10px; 該子元素margin-top:10px; 所以折疊后兩元素的邊距為10px</div>
    <div class="sub none">第三個(gè)子元素祖娘，如果元素中使用display:inline-block或者float失尖，那么兄弟元素之間的上下margin不會(huì)折疊</div>
    <div class="sub">第四個(gè)子元素，第三個(gè)子元素設(shè)置了display:inline-block屬性值渐苏，故兩元素之間不會(huì)出現(xiàn)margin折疊掀潮；該元素的margin-bottom:10px與父元素的margin-bottom:0px折疊，故該元素與父元素之間沒(méi)有外邊距</div>
</div>
<div class="parent two">
    <div class="sub">第二個(gè)父元素的第一個(gè)子元素margin-top:10px與第一個(gè)父元素的最后一個(gè)子元素margin-bottom:10px折疊琼富，故兩個(gè)父元素之間的間距為10px</div>
</div>
<div class="parent three">
    <div class="sub">第三個(gè)父元素的第一個(gè)子元素margin-top:10px與第一個(gè)父元素的最后一個(gè)子元素margin-bottom:10px折疊仪吧，故兩個(gè)父元素之間的間距為10px</div>
</div>

內(nèi)邊距padding

常用屬性

padding：上右下左下方屬性的簡(jiǎn)寫方式；省略其中一個(gè)值的情況下鞠眉，省略的值對(duì)于對(duì)角的值薯鼠，如省略最后的左，那么左的值會(huì)和右相等械蹋。
padding-top：上內(nèi)邊距
padding-right：右內(nèi)邊距
padding-bottom：下內(nèi)邊距
padding-left：左內(nèi)邊距

利用padding與inline元素突破父元素的高度

#explicit span {
    /*inline元素出皇，寬高無(wú)效；*/
    width: 500px;
    /*因?yàn)閕nline元素的寬高是由內(nèi)容決定的哗戈，所以padding的多少不會(huì)影響正常的文檔流郊艘；
    只要內(nèi)容height+上下padding高于父元素height就出現(xiàn)了超出父元素高度的效果.*/
    padding: 20px;
}

墨綠背景的為子元素

邊框border

border的四條邊由四個(gè)倒梯形組成，若元素的總寬高由border決定時(shí)(即元素沒(méi)有內(nèi)容谱醇、沒(méi)有padding暇仲、width與height都為0)，那么border的四條邊分別是四個(gè)倒三角形副渴。

border的四條邊

元素的width與height由border決定時(shí)的效果

常用屬性

border-style：邊框樣式如solid dotted等奈附，是一種簡(jiǎn)寫方式
- border-top-style：上邊框樣式
- border-right-style：右邊框樣式
- border-bottom-style：下邊框樣式
- border-left-style：左邊框樣式
border-width：邊框的寬度，是一種簡(jiǎn)寫方式
- border-top-width：上邊框?qū)挾?/li>
- border-right-width：右邊框?qū)挾?/li>
- border-bottom-width：下邊框?qū)挾?/li>
- border-left-width：左邊框?qū)挾?/li>
border-color：邊框的顏色煮剧，是一種簡(jiǎn)寫方式
- border-top-color：上邊框顏色
- border-right-color：右邊框顏色
- border-bottom-color：下邊框顏色
- border-left-color：左邊框顏色

代碼示例

<head>
    <meta charset="UTF-8">
    <title>純CSS畫尖角</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        /*元素寬度和高度都為20px*/
        .test {
            width: 0;
            height: 0;
            border: 10px solid;
            /*border上右下左的顏色*/
            border-color: red yellow blue green;
        }

        .chat {
            margin-top: 10px;
            margin-left: 10px;
            position: relative;
        }

        .sharp {
            width: 0;
            height: 0;
            border: 10px solid;
            /*除了左邊與聊天內(nèi)容背景有相同的背景顏色外斥滤，其他顏色都為透明，造成一個(gè)三角的形狀*/
            border-color: transparent #cceeff transparent transparent;
            position: absolute;
            left: -10px;
            top: 9px;
        }

        .content {
            background-color: #cceeff;
            padding: 10px;
            margin-left: 10px;
            width: 100px;
        }
    </style>
</head>
<body>
<div class="test"></div>
<div class="chat">
    <div class="sharp"></div>
    <div class="content">QQ聊天內(nèi)容</div>
</div>
</body>

上述代碼示例效果圖

CSS3中引入的border屬性勉盅，同樣有上述中的top佑颇、right、bottom草娜、left屬性

border-radius：圖像邊框挑胸，數(shù)字值或%表示
box-shadow：邊框陰影
- h-shadow：必需。水平陰影的位置宰闰。允許負(fù)值茬贵。
- v-shadow：必需簿透。垂直陰影的位置。允許負(fù)值解藻。
- blur：可選老充。模糊距離。
- spread：可選螟左。陰影的尺寸啡浊。
- color：可選。陰影的顏色胶背。
- inset：可選巷嚣。將外部陰影 (outset) 改為內(nèi)部陰影。
border-image：邊框圖片后面有文章專門講解

最后編輯于：2017.12.04 06:31:02

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

人面猴
序言：七十年代末奄妨，一起剝皮案震驚了整個(gè)濱河市涂籽，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌砸抛，老刑警劉巖评雌，帶你破解...
沈念sama閱讀 219,539評(píng)論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異直焙，居然都是意外死亡景东，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,594評(píng)論 3贊 396
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門奔誓，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)斤吐，“玉大人，你說(shuō)我怎么就攤上這事厨喂『痛耄” “怎么了？”我有些...
開封第一講書人閱讀 165,871評(píng)論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵蜕煌，是天一觀的道長(zhǎng)派阱。經(jīng)常有香客問(wèn)我，道長(zhǎng)斜纪，這世上最難降的妖魔是什么贫母？我笑而不...
開封第一講書人閱讀 58,963評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮盒刚，結(jié)果婚禮上腺劣，老公的妹妹穿的比我還像新娘。我一直安慰自己因块，他們只是感情好橘原，可當(dāng)我...
茶點(diǎn)故事閱讀 67,984評(píng)論 6贊 393
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般靠柑。火紅的嫁衣襯著肌膚如雪寨辩。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,763評(píng)論 1贊 307
城市分裂傳說(shuō)
那天歼冰，我揣著相機(jī)與錄音，去河邊找鬼耻警。笑死隔嫡，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的甘穿。我是一名探鬼主播腮恩，決...
沈念sama閱讀 40,468評(píng)論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼温兼！你這毒婦竟也來(lái)了秸滴？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,357評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤募判，失蹤者是張志新（化名）和其女友劉穎荡含，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體届垫，經(jīng)...
沈念sama閱讀 45,850評(píng)論 1贊 317
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡释液，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,002評(píng)論 3贊 338
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了装处。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片误债。...
茶點(diǎn)故事閱讀 40,144評(píng)論 1贊 351
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖妄迁，靈堂內(nèi)的尸體忽然破棺而出寝蹈，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 35,823評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布谬哀，位于F島的核電站寨躁，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏槽惫。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,483評(píng)論 3贊 331
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一辩撑、第九天我趴在偏房一處隱蔽的房頂上張望界斜。院中可真熱鬧，春花似錦合冀、人聲如沸各薇。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,026評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)峭判。三九已至开缎，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間林螃，已是汗流浹背奕删。一陣腳步聲響...
開封第一講書人閱讀 33,150評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留疗认，地道東北人完残。一個(gè)月前我還...
沈念sama閱讀 48,415評(píng)論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像横漏，于是被迫代替她去往敵國(guó)和親谨设。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,092評(píng)論 2贊 355

(第十天)CSS樣式之盒子模型

盒子模型簡(jiǎn)介

盒子類型的定義方式

常見的盒子類型

盒子的總寬與總高的計(jì)算方式

顯式聲明的寬度與高度

隱式（即沒(méi)有設(shè)置）與顯式的區(qū)別

代碼示例

box-sizing屬性規(guī)定盒子的寬高計(jì)算方法

超出盒子范圍的內(nèi)容如何顯示

overflow的屬性值

overflow的分開設(shè)置方式

代碼示例

外邊距margin

常用屬性

上下外邊距的折疊

代碼示例

內(nèi)邊距padding

常用屬性

利用padding與inline元素突破父元素的高度

邊框border

常用屬性

代碼示例

CSS3中引入的border屬性勉盅，同樣有上述中的top佑颇、right、bottom草娜、left屬性

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