web前端入門到實戰(zhàn)：CSS盒子模型

發(fā)布時間：2020-06-06 04:21:18 來源：網(wǎng)絡(luò) 閱讀：179 作者：前端向南欄目：web開發(fā)

一、什么叫框模型

頁面元素皆為框（盒子）,定義了元素框處理元素內(nèi)容，內(nèi)邊距，外邊距以及邊框的計算方式。

二、外邊距

圍繞在元素邊框外的空白距離（元素與元素之間的距離）

語法：margin，定義4個方向的外邊距

1、單邊定義：margin-top/right/bottom/left

（1）取值：以px為單位， %占父級元素寬度的%比

正數(shù)：margin-left 元素向右移動，margin-top元素向下移動

負數(shù)：就是相反方向

取值 auto：自動計算塊級元素的外邊距，對于上下外邊距無效,塊級元素水平居中

2、簡寫方式

margin：value ；定義4個方向的值

margin：v1 v2； v1設(shè)置上下，v2設(shè)置左右

margin：0 auto：設(shè)置塊級元素水平居中

margin：v1 v2 v3；v1設(shè)置上，v2設(shè)置左右，v3設(shè)置下

margin：v1 v2 v3 v4；上右下左

3、自帶外邊距的元素

h2~h7、p、body、ol、ul、dl、pre

一般在開發(fā)的時候需要重置具有外邊距的元素

方案一：*{margin:0;padding:0}
方案二：參考淘寶

4、外邊距的特殊效果

（1）外邊距合并

當(dāng)兩個垂直外邊距相遇時，他們將合并成一個，最終的距離取決于兩個邊距中較大的

(2)行內(nèi)元素對外邊距的表現(xiàn)

行內(nèi)元素垂直外邊距無效（img）除外

（3）行內(nèi)塊對外邊距的表現(xiàn)

同一行中，一個行內(nèi)塊設(shè)置了垂直邊距，同行其他行內(nèi)會跟著變化

(4)外邊距溢出

在特殊條件下，為子元素設(shè)置上外邊距，會作用到父元素

特殊條件：

1.父元素上邊框
2.為第一個子元素設(shè)置上外邊框，任何一個都會造成外邊框溢出

解決方法：

為父元素添加邊框，弊端：影響了父元素的實際高度
為父元素添加內(nèi)邊距，弊端了父元素的實際高度
在父元素的第一個子元素位置，添加一個空的table

三、內(nèi)邊距

不會影響其他元素，但是會影響自己的占地尺寸，視覺上感覺大小發(fā)生變化

語法：

padding：value ；設(shè)置4個方向的內(nèi)邊距

padding：v1 v2；v1設(shè)置上下，v2設(shè)置左右

padding：v1 v2 v3；v1設(shè)置上，v2設(shè)置左右，v3設(shè)置下

padding：v1 v2 v3 v4；設(shè)置上右下左

單方向設(shè)置：padding-top/right/bottom/left

box-sizing屬性，設(shè)置框模型的計算方式

box-sizing：content-box；默認值，盒子模型計算，div設(shè)置的width，height為content的大小

<style>
        #d1{
            width: 200px;
            height: 200px;
            margin: 10px;
            padding: 10px;
            border: 10px solid black;
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>
專門建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學(xué)習(xí)方法和需要注意的小細節(jié)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開始到前端項目實戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

box-sizing：boder-box；div設(shè)置的width，height為border外邊距的大小

<style>
        #d1{
            width: 200px;
            height: 200px;
            margin: 10px;
            padding: 10px;
            border: 10px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>

向AI問一下細節(jié)

web前端入門到實戰(zhàn)：CSS盒子模型

一、什么叫框模型

二、外邊距

1、單邊定義：margin-top/right/bottom/left

2、簡寫方式

3、自帶外邊距的元素

4、外邊距的特殊效果