web前端入門到實戰：CSS盒子模型

時間 2020-01-05

標籤 web 前端入門實戰 css 盒子模型欄目 HTML 简体版

原文原文鏈接

1、什麼叫框模型

頁面元素皆爲框（盒子）,定義了元素框處理元素內容，內邊距，外邊距以及邊框的計算方式。前端

2、外邊距

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

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

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

（1）取值：以px爲單位， %佔父級元素寬度的%比學習

正數：margin-left 元素向右移動，margin-top元素向下移動code

負數：就是相反方向教程

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

二、簡寫方式

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

margin：v1 v2； v1設置上下，v2設置左右table

margin：0 auto：設置塊級元素水平居中class

margin：v1 v2 v3；v1設置上，v2設置左右，v3設置下

margin：v1 v2 v3 v4；上右下左

三、自帶外邊距的元素

h1~h六、p、body、ol、ul、dl、pre

通常在開發的時候須要重置具備外邊距的元素

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

四、外邊距的特殊效果

（1）外邊距合併

當兩個垂直外邊距相遇時，他們將合併成一個，最終的距離取決於兩個邊距中較大的

(2)行內元素對外邊距的表現

行內元素垂直外邊距無效（img）除外

（3）行內塊對外邊距的表現

同一行中，一個行內塊設置了垂直邊距，同行其餘行內會跟着變化

(4)外邊距溢出

在特殊條件下，爲子元素設置上外邊距，會做用到父元素

特殊條件：

1.父元素上邊框
2.爲第一個子元素設置上外邊框，任何一個都會形成外邊框溢出

解決方法：

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

3、內邊距

不會影響其餘元素，可是會影響本身的佔地尺寸，視覺上感受大小發生變化

語法：

padding：value ；設置4個方向的內邊距

padding：v1 v2；v1設置上下，v2設置左右

padding：v1 v2 v3；v1設置上，v2設置左右，v3設置下

padding：v1 v2 v3 v4；設置上右下左

單方向設置：padding-top/right/bottom/left

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

box-sizing：content-box；默認值，盒子模型計算，div設置的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>
專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學習方法和須要注意的小細節，不停更新最新的教程和學習技巧（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

box-sizing：boder-box；div設置的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>