CSS 盒子模型

時間 2019-11-07

標籤 css 盒子模型欄目 CSS 简体版

原文原文鏈接

CSS 盒子模型(Box Model)

盒子模型是樣式表（css）控制頁面的很重要的概念。css

盒子模型是由內容、邊框（border）、內填充（padding）、外邊距（margin）組成。html

若是理解了盒子模型和其中每一個元素的用法，才能熟練使用css的定位方法和技巧。全部的頁面的元素均可以當作是一個盒子，佔據必定的頁面空間。佔據的空間要比實際使用的空間要大得多。咱們能夠調整盒子的邊框和距離，來調整盒子（頁面和頁面中的元素）的位置。他們的關係以下圖所示：瀏覽器

不一樣部分的說明：bash

content(內容) - 盒子的內容，顯示文本和圖像。spa
padding(內填充) - 定義元素邊框與元素內容之間的空間3d
border(邊框) - 圍繞在內填充和內容外的邊框。code
margin(外邊距) - 定義元素周圍的空間。cdn

爲了正確設置元素在全部瀏覽器中的寬度和高度，你須要知道的盒模型是如何工做的。htm

元素的寬度和高度

重要 : 當您指定一個CSS元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，徹底大小的元素，你還必須添加填充，邊框和邊距。blog

下面的例子中的元素的總寬度爲300px：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>box-model</title>
<style>
div {
    background-color: gray;
    width: 300px;
    border: 25px solid red;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。</p>

<div>這裏是盒子內的實際內容。有 25px 內填充，25px 外邊距、25px 紅色邊框。</div>

</body>
</html>

複製代碼

例：

讓咱們本身算算：

300px (寬)

+50px (左 + 右填充)
+50px (左 + 右邊框)
+50px (左 + 右邊距) = 450px

試想一下，設置一個寬度爲250像素的元素

div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}
複製代碼

最終元素的總寬度計算公式是這樣的：

總元素的寬度=寬度+左填充+右填充+左邊框+右邊框

元素的總高度最終計算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框

若有不足，請多多指教！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。