網頁設計必備技能：如何用CSS盒子模型打造完美布局？

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

最具勇氣的行為

仍然是獨立思考

并將你的想法大聲公之于世

- 2024.03.25 -

在網絡設計的世界里，盒子模型是構建網頁布局的基石，只有理解了盒子模型，我們才能更好的進行網頁布局。

HTML中的每一個元素都可以看成是一個盒子，擁有盒子一樣的外形和平面空間，它不可見、不直觀，但無處不在，所以初學者很容易在這上面出問題。今天就讓我們來深入了解一下盒子模型。

一、盒子模型是什么？

首先，我們來理解一下什么是CSS盒子模型。

簡單來說，CSS盒子模型是CSS用來管理和布局頁面上每一個元素的一種機制。每個HTML元素都可以被想象成一個矩形的盒子，這個盒子由內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）四個部分組成。

這四個部分共同作用，決定了元素在頁面上的最終顯示效果。

二、盒子模型的組成部分

一個盒子由外到內可以分成四個部分：margin（外邊距）、border（邊框）、padding（內邊距）、content（內容）。其中margin、border、padding是CSS屬性，因此可以通過這三個屬性來控制盒子的這三個部分。而content則是HTML元素的內容。

下面來一一介紹盒子模型的各個組成部分：

2.1 內容（Content）

內容是盒子模型的中心，它包含了實際的文本、圖片等元素。內容區域是盒子模型中唯一不可或缺的部分，其他三部分都是可選的。

內容區的尺寸由元素的寬度和高度決定，但可以通過設置box-sizing屬性來改變這一行為。

下面通過代碼例子來了解一下內容區：

<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid black;
padding: 10px;
margin: 20px;
box-sizing: content-box; /* 默認值 */
}
</style>
</head>
<body>

<div>這是一個盒子模型的例子。</div>

</body>
</html>

在這個例子中，.box類定義了一個具有特定樣式的<div>元素。這個元素的寬度為200px，高度為100px，背景顏色為淺藍色。邊框為2像素寬的黑色實線，內邊距為10像素，外邊距為20像素。

由于我們設置了box-sizing: content-box;（這是默認值），所以元素的寬度和高度僅包括內容區的尺寸。換句話說，元素的寬度是200px，高度是100px，不包括內邊距、邊框和外邊距。

如果我們將box-sizing屬性設置為border-box，則元素的寬度和高度將包括內容區、內邊距和邊框，但不包括外邊距。這意味著元素的總寬度將是234px（200px + 2 * 10px + 2 * 2px），高度將是124px（100px + 2 * 10px + 2 * 2px）。

總之，內容區是CSS盒子模型中的一個核心概念，它表示元素的實際內容所在的區域。通過調整box-sizing屬性，您可以控制元素尺寸是否包括內容區、內邊距和邊框。

2.2 內邊距（Padding）

內邊距是內容的緩沖區，它位于內容和邊框之間。通過設置內邊距，我們可以在內容和邊框之間創建空間，讓頁面看起來不會太過擁擠。

內邊距是內容區和邊框之間的距離，會影響到整個盒子的大小。

padding-top: ; 上內邊距
padding-left:; 左內邊距
padding-right:; 右內邊距
padding-bottom:; 下內邊距

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*
1、 padding-top: ; 上內邊距
padding-left:; 左內邊距
padding-right:; 右內邊距
padding-bottom:; 下內邊距
2、padding簡寫 可以跟多個值
四個值 上 右 下 左
三個值 上 左右 下
二個值 上下 左右
一個值 上下左右
*/
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/* padding-top:30px ;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px; */
padding: 40px;
border: 10px transparent solid;
}
.box1:hover {
border: 10px red solid;
}

/*
* 創建一個子元素box2占滿box1，box2把內容區撐滿了
*/
.box2 {
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>

2.3 邊框（Border）

邊框圍繞在內邊距的外圍，它可以是實線、虛線或者其他樣式。邊框用于定義內邊距和外邊距之間的界限，同時也起到了美化元素的作用。

邊框屬于盒子邊緣，邊框里面屬于盒子內部，出了邊框都是盒子的外部，設置邊框必須指定三個樣式邊框大小、邊框的樣式、邊框的顏色

邊框大小：border-width
邊框樣式：border-style
邊框顏色：border-color

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">

.box {
width: 0px;
height: 0px;
/* background-color: rgb(222, 255, 170); */
/* 邊框的大小 如果省略，有默認值，大概1-3px ，不同的瀏覽器默認大小不一樣
border-width 后可跟多個值
四個值 上 右 下 左
三個值 上 左右 下
二個值 上下 左右
一個值 上下左右
單獨設置某一邊的邊框寬度
border-bottom-width
border-top-width
border-left-width
border-right-width
*/
border-width: 20px;
/* border-left-width:40px ; */
/*
邊框的樣式
border-style 可選值
默認值：none
實線 solid
虛線 dashed
雙線 double
點狀虛線 dotted
*/
border-style: solid;
/* 設置邊框的顏色 默認值是黑色
border-color 也可以跟多個值
四個值 上 右 下 左
三個值 上 左右 下
二個值 上下 左右
一個值 上下左右
對應的方式跟border-width是一樣
單獨設置某一邊的邊框顏色
border-XXX-color: ;
*/
border-color: transparent transparent red transparent ;
}
.box1{
width: 200px;
height: 200px;
background-color: turquoise;
/* 簡寫border
1、 同時設置邊框的大小，顏色，樣式，沒有順序要求
2、可以單獨設置一個邊框
border-top:; 設置上邊框
border-right 設置右邊框
border-bottom 設置下邊框
border-left 設置左邊框
3、去除某個邊框
border:none;
*/
border: blue solid 10px;
border-bottom: none;
/* border-top:10px double green ; */
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

2.4 外邊距（Margin）

外邊距是元素與外界的間隔，它決定了元素與其他元素之間的距離。通過調整外邊距，我們可以控制元素之間的相互位置關系，從而影響整體布局。

margin-top:; 正值元素向下移動負值元素向上移動
margin-left:; 正值元素向右移動負值元素向左移動
margin-bottom:; 正值元素自己不動，其靠下的元素向下移動，負值元素自己不動，其靠下的元素向上移動
margin-right: ; 正值負值都不動

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/* 外邊距 不會影響到盒子的大小
可以控制盒子的位置
margin-top:; 正值 元素向下移動 負值 元素向上移動
margin-left:; 正值 元素向右移動 負值 元素向左移動
margin-bottom:; 正值 元素自己不動，其靠下的元素向下移動，負值 元素自己不動，其靠下的元素向上移動
margin-right: ; 正值負值都不動
簡寫 margin 可以跟多個值
規則跟padding一樣
*/
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px solid red;
/* margin-top: -100px;
margin-left: -100px;
margin-bottom: -100px;
margin-right: -100px; */
margin: 40px;
}

.box2 {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

三、盒子的大小

盒子的大小指的是盒子的寬度和高度。大多數初學者容易將寬度和高度誤解為width和height屬性，然而默認情況下width和height屬性只是設置content（內容）部分的寬和高。

盒子真正的寬和高按下面公式計算

盒子的寬度 = 內容寬度 + 左填充 + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距
盒子的高度 = 內容高度 + 上填充 + 下填充 + 上邊框 + 下邊框 + 上邊距 + 下邊距

我們還可以用帶屬性的公式表示：

盒子的寬度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

上面說到的是默認情況下的計算方法，另外一種情況下，width和height屬性設置的就是盒子的寬度和高度。盒子的寬度和高度的計算方式由box-sizing屬性控制。

box-sizing屬性值

content-box：默認值，width和height屬性分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距、邊框、外邊距。

border-box：為元素設定的width和height屬性決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

inherit：規定應從父元素繼承box-sizing屬性的值

當box-sizing：content-box時，這種盒子模型成為標準盒子模型；
當box-sizing: border-box時，這種盒子模型稱為IE盒子模型。

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想

四、盒子模型應用技巧

掌握了盒子模型的基本概念后，我們就可以開始創造性地應用它來設計網頁。以下是一些技巧：

使用內邊距來創建呼吸空間，不要讓內容緊貼邊框，這樣可以讓頁面看起來更加舒適。

巧妙運用邊框來分隔內容區域，或者為特定的元素添加視覺焦點。
利用外邊距實現元素間的對齊和分組，保持頁面的整潔和組織性。
考慮使用負邊距來實現重疊效果，創造出獨特的層次感和視覺沖擊力。

CSS盒子模型是前端開發的精髓之一，它不僅幫助我們理解和控制頁面布局，還為我們提供了無限的創意空間。現在，你已經掌握了盒子模型的奧秘，是時候在你的項目中運用這些知識，創造出令人驚嘆的網頁設計了。

記住，每一個細節都可能是打造卓越用戶體驗的關鍵。開啟你的CSS盒子模型之旅，讓我們一起構建更加精彩、更加互動的網頁世界！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

不久看到這樣一個很有趣的效果，它的滾動條是沿著圓角邊緣滾動的，效果如下

你可以查看原鏈接來體驗一下

https://codepen.io/jh3y/pen/gOEgxbd

這是如何實現的呢？

原效果中由于為了兼容不支持CSS滾動驅動的瀏覽器，特意用 JS做了兼容，所以看著比較復雜，其實核心非常簡單，下面我將用最簡短的 CSS 來復刻這一效果，一起看看吧

一、SVG 路徑動畫

從本質上來講，其實是一個 SVG 路徑動畫。

具體如何實現呢？

首先，我們通過設計軟件繪制一個這樣的路徑

注意設置描邊的大小還有端點的類型，比如下面是round效果

然后導出SVG，可以得到這樣一段代碼

<svg viewBox="0 0 31 433" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 4C9.96737 4 15.6903 6.37053 19.9099 10.5901C24.1295 14.8097 26.5 20.5326 26.5 26.5V406.5C26.5 412.467 24.1295 418.19 19.9099 422.41C15.6903 426.629 9.96737 429 4 429" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

然后，如何讓這段SVG動起來呢？

很簡單，現在SVG是一段實線，我們可以通過stroke-dasharray設置成虛線，比如

path{
  stroke-dasharray: 80
}

這樣會得到一個實線和虛線間隔都是80的虛線

如果希望虛線空白的地方更大一點，該怎么設置呢?很簡單，繼續往后加

path{
  stroke-dasharray: 80 120
}

效果如下

所以，這種寫法其實相當于把當前的值無限重復，示意如下

當然，我們這里不需要設置的這么復雜，只需要一小段實線就夠了，所以是實現加上一段足夠長的虛線（超過路徑本身就行），實現如下

path{
  stroke-dasharray: 80 1000
}

這樣就得到了一小段實線

那么，如何讓他動起來呢？很簡單，改變一下偏移就可以，這個可以用stroke-dashoffset來實現

比如，我們

@keyframes scroll {
  to {
    stroke-dashoffset: -370
	}
}
path{
  stroke-dasharray: 80 1000;
  animation: scroll 3s alternate-reverse infinite;
}

效果如下

是不是有點像呢？

我們再調整一下起始偏移量，讓它出去一點

@keyframes scroll {
  0% { stroke-dashoffset: 75; }
  100% { stroke-dashoffset: -445; }
}

這樣就更接近我們想要的效果了

整個運動原理就是這樣了，接著往下看

二、CSS 滾動驅動動畫

接下來需要通過滾動驅動動畫將容器滾動與CSS動畫「聯動」起來。

關于CSS 滾動驅動可以參考我之前寫的這篇文章：CSS 滾動驅動動畫終于正式支持了~

簡單來講，「CSS 滾動驅動動畫」指的是將「動畫的執行過程由頁面滾動」進行接管，也就是這種情況下，「動畫只會跟隨頁面滾動的變化而變化」，也就是滾動多少，動畫就執行多少，「時間不再起作用」。

先簡單布局一下

<div class="list">
  <div class="item" id="item_1">1</div>
  <div class="item" id="item_2">2</div>
  <div class="item" id="item_3">3</div>
  <div class="item" id="item_4">4</div>
  <div class="item" id="item_5">5</div>
  <div class="item" id="item_6">6</div>
  <div class="item" id="item_7">7</div>
</div>

美化一下

然后，我們將默認的滾動條隱藏，用我們這個 SVG路徑來代替，由于需要絕對定位，我們再套一層父級

<div class="wrap">
  <div class="list">
    <div class="item" id="item_1">1</div>
    <div class="item" id="item_2">2</div>
    <div class="item" id="item_3">3</div>
    <div class="item" id="item_4">4</div>
    <div class="item" id="item_5">5</div>
    <div class="item" id="item_6">6</div>
    <div class="item" id="item_7">7</div>
    <!--滾動條-->
    <svg class="scroller" viewBox="0 0 31 433" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path class="scroller_thumb" d="M4 4C9.96737 4 15.6903 6.37053 19.9099 10.5901C24.1295 14.8097 26.5 20.5326 26.5 26.5V406.5C26.5 412.467 24.1295 418.19 19.9099 422.41C15.6903 426.629 9.96737 429 4 429" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
</div>

相關CSS如下

.wrap{
  position: relative;
}
.scroller {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  height: -webkit-fill-available;
  margin: 5px;
}
.scroller_thumb{
  stroke: hsl(0 0% 100% / 0.5);
  stroke-dasharray: 80 450;
  stroke-width: 8px;
  animation: scroll both 5s linear;
}

這樣結構就搭好了，只是滾動條會自動播放

接下來就是最關鍵的一步，加上滾動驅動動畫

.scroller_thumb{
  animation: scroll both 5s linear;
  animation-timeline: scroll();
}

但是這樣是不起作用的，直接使用scroll()會自動尋找它的相對父級，也就是.wrap，但實際滾動的其實是.list，所以這種情況下我們需要具名的滾動時間線，實現如下

.list{
  scroll-timeline: --scroller;
}
.scroller_thumb{
  animation: scroll both 5s linear;
  animation-timeline: --scroller;
}

這樣SVG路徑動畫就能跟隨容器滾動而運動了

三、CSS 滾動吸附

原效果中還有一個滾動回彈的效果，當滾動到容器邊緣時，會自動回彈到起始位置。

其實只需要用到 CSS scroll snap 就可以了

https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type

實現很簡單，給滾動容器添加scroll-snap-type屬性，表示這是個允許滾動吸附的容器

.list{
  scroll-snap-type: y mandatory;
}

然后就指定需要吸附的點了，由于需要回彈的效果，所以滾動容器的首尾需要一個空白的容器，這里直接用兩個偽元素來生成

.list::before,
.list::after{
  content: '';
  height: 50px;
  flex-shrink: 0;
}

效果如下

然后我們設置滾動吸附點就行了，設置第一個元素頂部和最后一個元素底部，其他元素居中就行了

.item{
  scroll-snap-align: center;
}
.item:first-child{
  scroll-snap-align: start;
}
/*最后一個元素是 SVG，所以這里用倒數第二個元素*/
.item:nth-last-child(2){
  scroll-snap-align: end;
}

這樣就實現了文章開頭的效果了

完整代碼可以查看以下鏈接（無任何 JS）

CSS round scroll (juejin.cn)[1]
CSS round scroll (codepen.io)[2]

四、總結一下

總的來說，CSS滾動驅動在滾動交互上帶來了無限可能，很多以前必須借助 JS來實現的都可以輕易實現，下面總結一下

從本質上來講，右側的滾動條其實是一個 SVG 路徑動畫
SVG路徑可以通過stroke-dasharray設置虛實間隔
當虛線間隔足夠長時，超過路徑本身，就能得到一小塊實線
通過改變stroke-dashoffset偏移能夠實現路徑描邊動畫
借助 CSS滾動驅動動畫可以將SVG路徑動畫跟隨容器滾動而運動
滾動回彈效果其實就是CSS scroll snap實現的

作者:XboxYan

來源:微信公眾號:前端偵探

出處:https://mp.weixin.qq.com/s/GaakgWhXm6jpY4PfISNHZQ

廢話不多說，線上效果圖讓大家看看。

鼠標移動操作，右鍵可切割

主要是使用vertlet整合型布料模擬，有一個形象的背景下而不是布網格。利用了Canvas的特立性以及CSS的margin布局方式，以及solid實線畫。加上JavaSprict中的添加以及綁定事件，鼠標移動，鼠標點擊事件等，說太多對于剛剛步入這塊的小白來說可能看不懂，還是直接上代碼比較實際。

JS源碼

CSS源碼