建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
HTML學(xué)習(xí)之初識(shí)CSS盒子模型
1. 什么是盒子模型
CSS 盒子模型是一個(gè)包含多個(gè)屬性的容器，包括邊框、邊距、填充和內(nèi)容本身。它用于創(chuàng)建網(wǎng)頁(yè)的設(shè)計(jì)和布局。它可以用作自定義不同元素布局的工具包。Web 瀏覽器根據(jù) CSS 框模型將每個(gè)元素渲染為矩形框。
CSS 中的盒子模型有多種屬性，以下列出主要屬性：
- content：即內(nèi)容屬性，它包含文本、圖像或其他媒體形式的實(shí)際數(shù)據(jù)，并且可以使用 width 和 height 屬性調(diào)整其大小。
- padding：填充或內(nèi)邊距屬性，用于定義元素邊框與元素內(nèi)容之間的空間，可以同時(shí)設(shè)置上下左右四個(gè)方向的內(nèi)邊距。
- border：即邊框?qū)傩?，用于設(shè)置元素邊框的樣式、寬度和顏色。
- margin：即外邊距屬性，用于定義元素外面的空間，在border屬性周圍。
2. 標(biāo)準(zhǔn)盒子模型
從上圖可以看出：
- 盒子的總寬度 = width + padding + border + margin
- 盒子的總高度 = height + padding + border + margin
此時(shí)的width/height只是content的寬度/高度，是不包含padding和border的值。
3. 怪異盒子模型
從上圖可以看出：
- 盒子的總寬度 = width + margin
- 盒子的總高度 = height + margin
這里的width/height包含了padding和border的值。
4. 代碼測(cè)試
定義一個(gè)div，其屬性值如下：
div{
margin: 20px;
width: 100px;
height: 100px;
padding: 5px;
border: 2px solid #000000;
} 標(biāo)準(zhǔn)模式下：盒子的總寬度 = 盒子的總高度 = 154
怪異模式下：盒子的總寬度 = 盒子的總高度 = 140
5. 兩種模式的轉(zhuǎn)換
box-sizing中比較常用的兩個(gè)屬性值為 content-box 和 border-box ，它可以改變盒子模型的解析模式，可以參考上面的代碼案例。
- 當(dāng)設(shè)置box-sizing: content-box時(shí)，采用標(biāo)準(zhǔn)模式進(jìn)行計(jì)算，默認(rèn)模式；
- 當(dāng)設(shè)置box-sizing: border-box時(shí)，采用怪異模式進(jìn)行計(jì)算。
當(dāng)前題目：HTML學(xué)習(xí)之初識(shí)CSS盒子模型
本文來(lái)源：http://www.5511xx.com/article/dpoepce.html
