CSS3 盒模型

時間 2020-07-07

標籤 css3 css 模型欄目 CSS 简体版

原文原文鏈接

給元素分個類 - 元素分類

在CSS中，html中的標籤元素大致被分爲三種不一樣的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。css

經常使用的塊狀元素有：html

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>chrome

經常使用的內聯元素有：瀏覽器

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>動畫

經常使用的內聯塊狀元素有：spa

<img>、<input>3d

我要獨佔一行 - 塊級元素

什麼是塊級元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。設置display:block就是將元素顯示爲塊級元素。以下代碼就是將內聯元素a轉換爲塊狀元素，從而使a元素具備塊狀元素特色。code

a{display:block;}

塊級元素特色：orm

一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）視頻

二、元素的高度、寬度、行高以及頂和底邊距均可設置。

三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。

我要和你站一塊兒 - 內聯元素

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的內聯元素（行內元素）（inline）元素。固然塊狀元素也能夠經過代碼display:inline將元素設置爲內聯元素。以下代碼就是將塊狀元素div轉換爲內聯元素，從而使 div 元素具備內聯元素特色。

 div{
     display:inline;
 }

<div>我要變成內聯元素</div>

內聯元素特色：

一、和其餘元素都在一行上；

二、元素的高度、寬度及頂部和底部邊距不可設置；

三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

我還要站個大位置 - 內聯塊狀元素

內聯塊狀元素（inline-block）就是同時具有內聯元素、塊狀元素的特色，代碼display:inline-block就是將元素設置爲內聯塊狀元素。(css2.1新增)，<img>、<input>標籤就是這種內聯塊狀標籤。

inline-block 元素特色：

一、和其餘元素都在一行上；

二、元素的高度、寬度、行高以及頂和底邊距均可設置。

隱身術 - none不佔據位置

none設置此元素不會被顯示，當想要元素隱藏的時候可使用此值。

提示：下一小節是用視頻動畫來說解css中的盒模型。

長胖長高點--寬度和高度

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

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

元素的高度也是同理。

好比：

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瀏覽器下可查看元素盒模型，以下圖：

設置個美美噠的顏色-背景色

網頁中的標籤不管是行內元素仍是塊狀元素均可以給它設置一個背景色。

爲標籤設置背景顏色可使background-color:顏色值來實現。

畫個圈圈 - 使用border爲盒子添加邊框（一）

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

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

div{
    border:2px  solid  red;
}

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

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

注意：

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

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

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

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

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

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

我想腳下踩條線 - 使用border爲盒子添加邊框（二）

如今有一個問題，若是有想爲 p 標籤單獨設置下邊框，而其它三邊都不設置邊框樣式怎麼辦呢？css 樣式中容許只爲一個方向的邊框設置樣式：

div{border-bottom:1px solid red;}

一樣可使用下面代碼實現其它三邊(上、右、左)邊框的設置：

border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;

加個圓角 - 使用border-radius設置圓角

元素邊框的圓角效果可使用border-radius屬性來設置。圓角可分爲左上、右上、右下、左下。以下代碼：

 div{border-radius: 20px 10px 15px 30px;}

效果：

也能夠分開寫：

div{
    border-top-left-radius: 20px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 15px;
   border-bottom-left-radius: 30px;
}

若是四個圓角都爲10px;能夠這麼寫：

div{ border-radius:10px;}

若是左上角和右下角圓角效果同樣爲10px，右上角和左下角圓角同樣爲20px，能夠這麼寫：

div{ border-radius:10px 20px;}

須要特別注意的：一個正方形，當設置圓角效果值爲元素寬度一半時，顯示效果爲圓形。例如：

 div {
        width: 200px;
        height: 200px;
        border: 5px solid red;
        border-radius: 100px;
    }

效果：

也能夠寫爲百分比50%

 div {
        width: 200px;
        height: 200px;
        border: 5px solid red;
        border-radius: 100px;
    }

宰相肚裏能撐船 - 使用padding爲盒子設置內邊距（填充）

元素內容與邊框之間是能夠設置距離的，稱之爲「內邊距（填充）」。填充也可分爲上、右、下、左(順時針)。以下代碼：

div{padding:20px 10px 15px 30px;}

效果：

順序必定不要搞混。能夠分開寫上面代碼：

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

若是上、右、下、左的填充都爲10px;能夠這麼寫

div{padding:10px;}

若是上下填充同樣爲10px，左右同樣爲20px，能夠這麼寫：

div{padding:10px 20px;}

距離產生美 - 使用margin爲盒子設置外邊距（邊界）

元素與其它元素之間的距離可使用邊界（margin）來設置。邊界也是可分爲上、右、下、左。以下代碼：

div{margin:20px 10px 15px 30px;}

效果：

也能夠分開寫：

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

若是上右下左的邊界都爲10px;能夠這麼寫：

div{ margin:10px;}

若是上下邊界同樣爲10px，左右同樣爲20px，能夠這麼寫：

div{ margin:10px 20px;}

總結一下：padding和margin的區別，padding在邊框裏，margin在邊框外。

相關標籤/搜索

每日一句

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