元素分類

在講解CSS佈局之前，我們需要提前知道一些知識，在CSS中，html中的標籤元素大體被分爲三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

常用的塊狀元素有：

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

常用的內聯元素有：

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

常用的內聯塊狀元素有：

<img>、<input>

元素分類 – – 塊級元素

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

a{display:block;}

塊級元素特點：

1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（從左到右撐滿頁面，一個塊級元素獨佔一行, 觸碰到頁面邊緣時，會自動換行）

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

3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>內聯塊狀元素</title>
<style type="text/css">
div,p{background:pink;}
a{
    display:block;
    font-weight:20px; 
    color:red;
    background:white;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<p>p標籤第一段<a>a標籤中間段</a>p標籤第二段</p>
</body>
</html>

元素分類 – – 內聯元素

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

div{
     display:inline;
 }

......

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

內聯元素特點:

1、和其他元素都在一行上；

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

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

小夥伴們你們觀查一下示例代碼段，有沒有發現一個問題，內聯元素之間有一個間距問題，這個問題在本小節的 wiki 中有介紹，感興趣的小夥伴可以去查看。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行內元素標籤</title>
<style type="text/css">
a,span,em{
    background:pink;/*設置a、span、em標籤背景顏色都爲粉色*/
}
</style>
</head>
<body>
<a href="http://blog.csdn.net">CSDN論壇</a>
<a href="http://blog.csdn.net/blog751196085">Code_淺藍</a>
<span>33333</span>
<span>44444</span><em>555555</em><p>
CSDN<a>論壇</a>,Code_淺藍</p>
</body>
</html>

元素分類 – – 內聯塊狀元素

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

inline-block 元素特點：

1、和其他元素都在一行上；

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

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>內聯塊狀元素</title>
<style type="text/css">
a, p{
    display:inline-block;
    width:20px;/*在默認情況下寬度不起作用*/
    height:20px;/*在默認情況下高度不起作用*/
    background:pink;/*設置背景顏色爲粉色*/
    text-align:center; /*設置文本居中顯示*/
}
</style>
</head>
<body>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>  
</body>
</html>

稍微總結下:

塊級元素特點：

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

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

3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

內聯元素特點：

1、和其他元素都在一行上；

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

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

內聯塊狀元素特點：

1、和其他元素都在一行上；

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

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>內聯塊狀元素</title>
<style type="text/css">
a, p, h1{
    display:inline-block;
    width:20px;/*在默認情況下寬度不起作用*/
    height:20px;/*在默認情況下高度不起作用*/
    background:pink;/*設置背景顏色爲粉色*/
    text-align:center; /*設置文本居中顯示*/
}
</style>
</head>
<body>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>  
<!--//<h1>2222</h1>-->
<p>333</p>
</body>
</html>

盒模型 – – 邊框(一)

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

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

div{
    border:2px  solid  red;
}

上面是 border 代碼的縮寫形式，可以分開寫：

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

注意：

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

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

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

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

3、border-width（邊框寬度）中的寬度也可以設置爲：

thin | medium | thick（但不是很常用），最常還是用象素（px）。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>邊框</title>
<style type="text/css">
p{
    border:2px dotted #ccc;
}
</style>
</head>
<body>
    <h1>勇氣</h1>
    <p>三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
    <p>到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班裏很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說着："我來，我來。"我環顧了四周，就我沒有舉手。</p>   
</body>
</html>

盒模型 – – 邊框(二)

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

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

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

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

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>邊框</title>
<style type="text/css">
li{
    border-bottom:1px dotted #ccc;
}
</style>
</head>
<body>
<ul>
    <li>別讓不會說話害了你</li>
    <li>二十七八歲就應該有的見識</li>
    <li>別讓不好意思害了你</li>
</ul>
</body>
</html>

盒模型 – – 寬度和高度

盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，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瀏覽器下可查看元素盒模型，如下圖：

從第一層到第五層依次爲：border、content+padding、background-image、background-color、margin。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>寬度和高度</title>
<style type="text/css">
li{
    border-bottom:1px dotted #ccc;
    width:200px; height:30px;
}
</style>
</head>
<body>
<ul>
    <li>別讓不會說話害了你</li>
    <li>二十七八歲就應該有的見識</li>
    <li>別讓不好意思害了你</li>
</ul>
</body>
</html>

（上面示例，列表項長度爲什麼這麼長啊，不明白同學是不是應該看一看標籤分類，li是塊狀元素，塊狀元素有一個特點之一：在不設置寬度的情況下，顯示爲父容器的100%。）

盒模型–填充（padding）

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;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
    width:100px;
    height:100px;
    padding:10px;
    border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">盒子</div>
</body>
</html>

深入之padding 1、padding與容器的尺寸

對於Block水平元素

padding值暴走，一定會影響尺寸;

width非auto，padding影響尺寸;

width爲auto或box-sizing爲border-box,
同時padding值沒有暴走，不影響尺寸;

對於inline水平元素

水平padding影響尺寸，垂直padding不影響尺寸，但是會影響背景顏色(佔據空間)

那麼我們要如何利用這個特性呢?

深入之padding 2、padding負值和百分比值

1、關於padding負值

padding不支持負值!

2、關於block水平元素的padding百分比值

padding百分比均是相對於寬度計算的

div{padding: 50%} 輕鬆實現一個正方形

3、關於inline水平元素的padding百分比值

 1. 同樣相對於寬度計算
 2. 默認的高寬度細節有差異
 3. padding會端行

空inline元素+padding高寬也不相等

爲什麼會有額外的高度?

inline元素的垂直padding會讓"空白節點"顯現，也就是規範中的"strut"出現。

深入之padding 3、標籤元素的內置padding

1.ol/ul(有序/無序)列表

 1. ol/li元素內置padding-left，但是單位是px不是em；

 元素很多內置padding/margin單位是em值，尤其是margin基本上是em值，也就是說相對於文字本身大小的；

 2. 例如Chrome瀏覽器下是40px；

 3. 所以如果字體很小，間距就會很開；

 4. 所以若果字體很大，序號會爬到容器外面；

（平時開發font-size:是12/14，padding-left:22/25px相對合適）

2.表單元素的內置padding

所有瀏覽器input/textarea輸入框內置padding
所有瀏覽器button按鈕內置padding
部分瀏覽器select下拉內置padding。如FrieFox IE8+可以設置padding
所有瀏覽器radio/chexkbox單複選框無內置padding
button按鈕元素的padding最難控制!

3.button表單按鈕padding

Chrome瀏覽器(✅)
FireFox瀏覽器
設置:padding：0 左右依然有padding
設置:button : : -moz-focus-inner {padding:0} 這樣才能夠沒有padding值
IE瀏覽器
IE7文字越多，左右padding逐漸變大!
button { overflw: visible;}
padding與高度計算的不兼容

button {
 line—height： 20px;
 padding: 10px;
 border: none;
}

IE7: 45px; ❓
IE8+: 40px; ✅
FireFox: 42px; ❓
Chrome: 40px；✅

個人建議:

<button id="btn"></button>
<label for="btn">按鈕</label>

label {
    dispaly: inline-block;
    line-height: 20px;
    padding: 10px
}

IE7: 40px; ✅
IE8+: 40px; ✅
FireFox: 40px; ✅
Chrome: 40px；✅

深入之padding 4、padding與圖形繪製

直接上代碼

案例一(不借助僞元素實現三槓)

<div class="line-tri"></div>

.line-tri {
    width: 150px; height 30px;
    padding:15px 0;                 /*透明區域*/
    border-top: 30px solid;         /*上邊框*/
    border-bottom: 30px solid;      /*下邊框*/ 
    background-color: currentColor; /*中間背景色*/
    background-clip: current-box;   /*重點: 可以讓背景色只會在內容區域顯示*/
}

案例二

<div class="eye"></div>

.eye {
    width: 150px; height: 150px;
    padding: 10px;
    border: 10px solid;
    barder-radius: 50%;
    background-color: currentColor;  
    background-clip: current-box; 
}

深入之padding 5、padding佈局實戰

使用百分比單位構建固定比例佈局結構
正方形
配合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在邊框外。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>邊距</title>
<style type="text/css">
div{
    width:100px;
    height:100px;
    border:1px solid red;
    /*margin:10px;*/
    margin-bottom:10px;
}
</style>
</head>
<body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>   
</body>
</html>

CSS 元素分類 / 盒模型基礎 / 深入理解

元素分類

元素分類 – – 塊級元素

元素分類 – – 內聯元素

元素分類 – – 內聯塊狀元素

盒模型 – – 邊框(一)

盒模型 – – 邊框(二)

盒模型 – – 寬度和高度

盒模型–填充（padding）

padding基礎

深入之padding 1、padding與容器的尺寸

深入之padding 2、padding負值和百分比值

深入之padding 3、標籤元素的內置padding

深入之padding 4、padding與圖形繪製

深入之padding 5、padding佈局實戰

盒模型– –邊界

公司新來一個幹練小夥，把 MyBatis 替換成 MyBatis-Plus，上線後哭暈在廁所。。。

Testin雲測上線華爲Pura 70系列真機測試服務！

5款開源、美觀、強大的WPF UI組件庫

10分鐘本地運行llama3及初體驗

golang 表格

手寫協議報文 c語言手法

甲骨文(Oracle)宣佈將以74億美元收購Sun公司

CSS 元素分類 / 盒模型基礎 / 深入理解

HTML之認識標籤(一)

CSS代碼縮寫, 佔用更少的寬帶，單位和值

HTML之認識標籤(三)

CSS樣式基本知識，添加樣式,

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結