首頁

web前端

css教學

介紹下CSS盒子模型以及box-sizing屬性

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 03, 2022 am 11:44 AM

css

這篇文章為大家帶來了關於css的相關知識，其中主要介紹了css盒子模型以及box-sizing屬性的相關問題，box-sizing屬性定義如何計算一個元素的總寬度和總高度，主要設定是否需要加上內邊距(padding)和邊框等，下面一起來看一下，希望對大家有幫助。

介紹下CSS盒子模型以及box-sizing屬性

（學習影片分享：css影片教學、html影片教學）

盒子模型定義及分類

CSS 基礎框盒模型是CSS 規範的一個模組，它定義了一種長方形的盒子, 包括它們各自的內邊距（padding）與外邊距（margin
），並根據視覺格式化模型來產生元素，對其進行佈置、編排、佈局。常被直譯為盒子模型、盒子模型或框架模型。

盒模型有以下分類：

標準定義：
- 標準盒模型
- 怪異模式盒模型
元素類型
- 區塊級盒子
- 內聯盒子
- #行內區塊

標準定義劃分

1. 標準盒子模型

寬度width = 內容寬度(content) padding border margin

內容寬度只是只有content。如果設定一個元素的寬為100px，那麼這個元素的內容區會有100px寬，並且任何邊框和內邊距的寬度都會被增加到最後繪製出來的元素寬度。

2. 怪異模式盒子模型

寬度width = 內容寬度(content padding border) margin

內容寬度包含了content、border、padding。如果將一個元素的width設為100px，那麼這100px會包含它的border且padding ，內容區的實際寬度是width減去(border padding)的值。大多數情況下，這使得我們更容易設定一個元素的寬高。

3. box-sizing屬性

box-sizing屬性有以下兩個屬性值。

box-sizing屬性定義如何計算一個元素的總寬度和總高度，主要設定是否需要加上內邊距(padding)和邊框等。

例如，假如您需要並排放置兩個帶有邊框的框，可透過將 box-sizing 設定為 "border-box"。這樣就可以讓瀏覽器呈現出有指定寬度和高度的框框，並將邊框和內邊距放入框中。

預設情況下，元素的寬度(width) 和高度(height)計算方式如下：

width(寬度) padding(內邊距) border(邊框) = 元素實際寬度
height(高度) padding(內邊距) border(邊框) = 元素實際高度

1. content -box

預設值，使用標準盒子模型。

.contentBox {
    box-sizing: content-box;
    width: 350px;
    border: 10px solid black;
    padding: 0 10px;}

以上程式碼在瀏覽器中的渲染的實際寬度是390px。

2. border-box

使用怪異模式盒子模型。

.borderBox {
    box-sizing: border-box;
    width: 350px;
    border: 10px solid black;
    padding: 0 10px;}

以上程式碼在瀏覽器中的渲染的實際寬度就是350px。

範例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<style> 
div.container {
  width: 100%;
  border: 2px solid black;
}
div.box {
  box-sizing: border-box;
  width: 50%;
  border: 5px solid red;
  float: left;
}
</style>
</head>
<body>
<div class="container">
  <div class="box">这个 div 占据了左边部分</div>
  <div class="box">这个 div 占据了右边部分</div>
  <div style="clear:both;"></div>
</div>
</body>
</html>

輸出結果：

介紹下CSS盒子模型以及box-sizing屬性

範例二：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
#example1 {
  width: 300px;
  padding: 40px;  
  border: 15px solid blue;
}
#example2 {
  width: 300px;
  padding: 10px;  
  border: 2px solid red;
}
</style>
</head>
<body>
<h1 id="通用的-nbsp-box-sizing">通用的 box-sizing</h1>
<p>使用 “box-sizing:border-box” 可以让前端开发人员减少很多工作。 上面 head 部分中的第一个样式确保所有元素都以这种更直观的方式调整大小。
你设置的宽度就是实际的宽度，不需要考虑内边距和边框：</p>
<div id="example1">div 的完整宽度为 300px, 不需要考虑内边距和边框。</div>
<br>
<div id="example2">这个 div 的完整宽度也是 300px, 也不需要考虑内边距和边框。</div>
</body>
</html>

輸出結果：

介紹下CSS盒子模型以及box-sizing屬性