css盒模型

時間 2019-12-01

標籤 css 模型欄目 CSS 简体版

原文原文鏈接

盒模型--邊框（一）

盒子模型的邊框就是圍繞着內容及補白的線，這條線你能夠設置它的粗細、樣式和顏色(邊框三個屬性)。css

以下面代碼爲 div 來設置邊框粗細爲 2px、樣式爲實心的、顏色爲紅色的邊框：html

div{
    border:2px  solid  red;
}

上面是 border 代碼的縮寫形式，能夠分開寫：chrome

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

注意：瀏覽器

一、border-style（邊框樣式）常見樣式有：code

dashed（虛線）| dotted（點線）| solid（實線）。htm

二、border-color（邊框顏色）中的顏色可設置爲十六進制顏色，如:blog

border-color:#888;//前面的井號不要忘掉。

三、border-width（邊框寬度）中的寬度也能夠設置爲：ip

thin | medium | thick（但不是很經常使用），最常仍是用象素（px）。get

盒模型寬度和高度和咱們日常所說的物體的寬度和高度理解是不同的，css內定義的寬（width）和高（height），指的是填充以裏的內容範圍。io

所以一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

元素的高度也是同理。

好比：

css代碼：

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

html代碼：

<body>
   <div>文本內容</div>
</body>

元素的實際長度爲：10px+1px+20px+200px+20px+1px+10px=262px。在chrome瀏覽器下可查看元素盒模型，以下圖：

相關標籤/搜索

每日一句

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