第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

使用margin為盒子設(shè)置外邊距（邊界）

元素與其它元素之間的距離可以使用邊界（margin）來(lái)設(shè)置。邊界也是可分為上、右、下、左。如下代碼：

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

效果：

也可以分開(kāi)寫(xiě)：

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

如果上右下左的邊界都為10px;可以這么寫(xiě)：

div{ margin:10px;}

如果上下邊界一樣為10px，左右一樣為20px，可以這么寫(xiě)：

div{ margin:10px 20px;}

總結(jié)一下：padding和margin的區(qū)別，padding在邊框里，margin在邊框外。

?

使用padding為盒子設(shè)置內(nèi)邊距（填充）

元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱(chēng)之為“內(nèi)邊距（填充）”。填充也可分為上、右、下、左(順時(shí)針)。

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

=

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

如果上、右、下、左的填充都為10px;可以這么寫(xiě)

div{padding:10px;}

如果上下填充一樣為10px，左右一樣為20px，可以這么寫(xiě)：

div{padding:10px 20px;}

使用border-radius設(shè)置圓角

元素邊框的圓角效果可以使用border-radius屬性來(lái)設(shè)置。圓角可分為左上、右上、右下、左下。如下代碼：

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

效果：

也可以分開(kāi)寫(xiě)：

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

如果四個(gè)圓角都為10px;可以這么寫(xiě)：

div{ border-radius:10px;}

如果左上角和右下角圓角效果一樣為10px，右上角和左下角圓角一樣為20px，可以這么寫(xiě)：

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

需要特別注意的：一個(gè)正方形，當(dāng)設(shè)置圓角效果值為元素寬度一半時(shí)，顯示效果為圓形。例如：

????div { ? ? ? ??

????????????width: 200px; ? ? ? ??

????????????height: 200px;? ? ? ? ?

????????????border: 5px solid red; ? ? ? ?

????????????border-radius: 100px; ? ??

????????}

效果：

也可以寫(xiě)為百分比50%

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

使用border為盒子添加邊框（二）

為 p 標(biāo)簽單獨(dú)設(shè)置下邊框

css 樣式中允許只為一個(gè)方向的邊框設(shè)置樣式：

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

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

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

使用border為盒子添加邊框（一）

盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線，這條線你可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個(gè)屬性)。

注意：

1、border-style（邊框樣式）常見(jiàn)樣式有：

????dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）。

2、border-color（邊框顏色）中的顏色可設(shè)置為十六進(jìn)制顏色，

如:

?????????border-color:#888;//前面的井號(hào)不要忘掉。

3、border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O(shè)置為：

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

?

盒模型寬度和高度

css內(nèi)定義的寬（width）和高（height），指的是填充以里的內(nèi)容范圍。

因此一個(gè)元素實(shí)際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界。

元素的高度也是同理。

display常用屬性值

1. none：隱藏對(duì)象

2. inline： 指定對(duì)象為行內(nèi)元素

3. block： 指定對(duì)象為塊元素

4. inline-block：指定對(duì)象為行內(nèi)塊元素

5. table-cell：指定對(duì)象為表格單元格

6. flex：彈性盒

7. inline轉(zhuǎn)塊級(jí)元素

————————————————

內(nèi)聯(lián)塊狀元素（inline-block）

就是同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)，代碼 display:inline-block 就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。(css2.1新增)，<img>、<input>標(biāo)簽就是這種內(nèi)聯(lián)塊狀標(biāo)簽。

inline-block 元素特點(diǎn)：

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

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

內(nèi)聯(lián)元素

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的內(nèi)聯(lián)元素（行內(nèi)元素）（inline）元素。當(dāng)然塊狀元素也可以通過(guò)代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素。如下代碼就是將塊狀元素div轉(zhuǎn)換為內(nèi)聯(lián)元素，從而使 div 元素具有內(nèi)聯(lián)元素特點(diǎn)。

div{ ? ? ?display:inline; ?} ...... <div>我要變成內(nèi)聯(lián)元素</div>

內(nèi)聯(lián)元素特點(diǎn)：

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

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

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

小伙伴們你們觀查一下右側(cè)代碼段，有沒(méi)有發(fā)現(xiàn)一個(gè)問(wèn)題，內(nèi)聯(lián)元素之間有一個(gè)間距問(wèn)題，這個(gè)問(wèn)題在本小節(jié)的 wiki 中有介紹，感興趣的小伙伴可以去查看。

什么是塊級(jí)元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級(jí)元素。設(shè)置display:block就是將元素顯示為塊級(jí)元素。如下代碼就是將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素，從而使a元素具有塊狀元素特點(diǎn)。

a{display:block;}

塊級(jí)元素特點(diǎn)：

1、每個(gè)塊級(jí)元素都從新的一行開(kāi)始，并且其后的元素也另起一行。（真霸道，一個(gè)塊級(jí)元素獨(dú)占一行）

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

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

元素分類(lèi)

塊狀元素、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素。

常用的塊狀元素有：

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

常用的內(nèi)聯(lián)元素有：

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

常用的內(nèi)聯(lián)塊狀元素有：

<img>、<input>

長(zhǎng)度值

長(zhǎng)度單位總結(jié)一下，目前比較常用到

px（像素）

em?

% 百分比，

要注意其實(shí)這三種單位都是相對(duì)單位。

2、em

如下代碼：

p{font-size:12px;text-indent:2em;}??

上面代碼就是可以實(shí)現(xiàn)段落首行縮進(jìn) 24px（也就是兩個(gè)字體大小的距離）。

下面注意一個(gè)特殊情況：

但當(dāng)給 font-size 設(shè)置單位為?em?時(shí)，此時(shí)計(jì)算的標(biāo)準(zhǔn)以 p 的父元素的 font-size 為基礎(chǔ)。如下代碼：

html:

<p>以這個(gè)<span>例子</span>為例。</p>

css:

p{font-size:14px}
span{font-size:0.8em;}

結(jié)果 span 中的字體“例子”字體大小就為 11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}

設(shè)置行高（行間距）為字體的130%（12 * 1.3 = 15.6px）。

?使用text-align設(shè)置文本對(duì)齊方式

為塊狀元素設(shè)置 如div

text-align:center;居中

text-align:left;居左
text-align:right;居右

使用line-height為文字設(shè)置行間間距

行間距（行高）屬性（line-height）

實(shí)現(xiàn)設(shè)置段落行間距為1.5倍。p{line-height:1.5em;}

使用text-indent為文本添加首行縮進(jìn)

p{text-indent:2em;}
注意：2em的意思就是文字的2倍大小。