整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
文按照display分類。三者可以互相轉(zhuǎn)化——設(shè)置display屬性值：inline、inline-block、block
包含textarea、span、a、img、input、select等。
行內(nèi)元素特征：
(1)設(shè)置寬高無效
(2)對margin僅設(shè)置左右方向有效，上下無效；padding設(shè)置上下左右都有效，即會撐大空間,行內(nèi)元素尺寸 由內(nèi)含的內(nèi)容決定，盒模型中 padding, border 與塊級元素并無差異，都是標(biāo)準(zhǔn)的盒模型，但是 margin 卻只有水平方向的值，垂直方向并沒有起作用。行內(nèi)元素的水平方向的padding-left,padding-right,margin- left,margin-right 都產(chǎn)生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都 不會產(chǎn)生邊距效果。padding設(shè)置上下左右都有效，即會撐大空間但是不會產(chǎn)生邊距效果。
(3)不會自動進(jìn)行換行
(4)元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個寬度。
行內(nèi)塊狀元素特征：
(1)不自動換行
(2)能夠識別寬高
(3)默認(rèn)排列方式為從左到右
div、p、ul、h1等標(biāo)題元素、ol、form、table等。
塊狀元素特征：
(1)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)可以自動換行
(4)多個塊狀元素標(biāo)簽寫在一起，默認(rèn)排列方式為從上至下
補(bǔ)充說明：
在HTML5中，程序員可以自定義標(biāo)簽，在任意定義標(biāo)簽中，加入display:block;即可，當(dāng)然也可以是行內(nèi)或行內(nèi)塊狀。
可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。
* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區(qū)塊(map)
* object - object對象
* script - 客戶端腳本
1、文檔流（Document flow）:浮動元素會脫離文檔流，并使得周圍元素環(huán)繞這個元素。而inline-block元素仍在文檔流內(nèi)。因此設(shè)置inline-block不需要清除浮動。當(dāng)然，周圍元素不會環(huán)繞這個元素，你也不可能通過清除inline-block就讓一個元素跑到下面去。
2、水平位置（Horizontal position）：很明顯你不能通過給父元素設(shè)置text-align:center讓浮動元素居中。事實上定位類屬性設(shè)置到父元素上，均不會影響父元素內(nèi)浮動的元素。但是父元素內(nèi)元素如果設(shè)置了display：inline-block，則對父元素設(shè)置一些定位屬性會影響到子元素。（這還是因為浮動元素脫離文檔流的關(guān)系）。
3、垂直對齊（Vertical alignment）：inline-block元素沿著默認(rèn)的基線對齊。浮動元素緊貼頂部。你可以通過vertical屬性設(shè)置這個默認(rèn)基線，但對浮動元素這種方法就不行了。這也是我傾向于inline-block的主要原因。
4、空白（Whitespace）：inline-block包含html空白節(jié)點。如果你的html中一系列元素每個元素之間都換行了，當(dāng)你對這些元素設(shè)置inline-block時，這些元素之間就會出現(xiàn)空白。而浮動元素會忽略空白節(jié)點，互相緊貼.
（就是大盒子內(nèi)幾層后有一個標(biāo)簽，沒有指定class和id，單獨給這個標(biāo)簽設(shè)置樣式的時候找不到，需要在內(nèi)標(biāo)簽的聲明樣式之前 加一個 /deep/ ）
在vue 項目中使用 scoped 后，在父組件中的樣式無法修改子組件的樣式這時可以使用深度作用選擇器 /deep/
如：我的項目中，div 內(nèi)部有 多個p，有的p里有段落文字，有的p里是img標(biāo)簽，而我就想這樣寫img的時候，就需要在img前加 /deep/ 就可以找到img。
什么是空白幽靈節(jié)點：沒有margin 和padding，卻有空白的位置
解決的辦法：
1.在他的父元素的div上加 font-size:0;
2.改變img的元素display:block
、什么是節(jié)點
回顧概念:
文檔:document
元素:頁面中所有的標(biāo)簽,元素---element, 標(biāo)簽----元素---對象
節(jié)點:頁面中所有的內(nèi)容(標(biāo)簽,屬性,文本(文字,換行,空格,回車)),Node
根元素:html標(biāo)簽節(jié)點node | nodeType | nodeName | nodeValue |
元素節(jié)點 | 1 | 標(biāo)簽名（大寫） | null |
屬性節(jié)點 | 2 | 屬性名 | 屬性值 |
文本節(jié)點 | 3 | #text | 文本內(nèi)容 |
CDATA節(jié)點 | 4 | #cdata-section | CDATA區(qū)域內(nèi)容 |
實體引用名稱節(jié)點 | 5 | 引用名稱 | null |
實體名稱節(jié)點 | 6 | 實體名稱 | null |
處理指令節(jié)點 | 7 | target | entire content cluding the target |
注釋節(jié)點 | 8 | #comment | 注釋內(nèi)容 |
文檔節(jié)點 | 9 | #document | null |
文檔類型節(jié)點 | 10 | doctype的名稱 | null |
文檔片段節(jié)點 | 11 | #document-fragment | null |
DTD聲明節(jié)點 | 12 | 符號名稱 | null |
****節(jié)點的屬性:(可以使用標(biāo)簽--元素.出來,可以使用屬性節(jié)點.出來,文本節(jié)點.點出來)
nodeType:節(jié)點的類型
nodeName:節(jié)點的名字
nodeValue:節(jié)點的值二、節(jié)點的獲取（包含元素節(jié)點）
相關(guān)html代碼
<div id="dv">
<span>這是div中的第一個span標(biāo)簽</span>
<p>這是div中的第二個元素,第一個p標(biāo)簽</p>
<ul id="uu">
<li>喬峰</li>
<li>鹿茸</li>
<li id="three">段譽(yù)</li>
<li>卡卡西</li>
<li>雛田</li>
</ul>
</div>獲取父節(jié)點（屬性）：
// 獲取某節(jié)點的父級節(jié)點
node.parentNode
// 獲取某節(jié)點的父級元素
node.parentElement獲取子節(jié)點（屬性）：
// 獲取某節(jié)點的子節(jié)點
node.childNodes
// 獲取某節(jié)點的子元素
node.children屬性節(jié)點（方法）：
// 獲取屬性節(jié)點
node.getAttributeNode("name")獲取其他相關(guān)節(jié)點（屬性）—— 拓展：
// 獲取某節(jié)點的第一個子節(jié)點
node.firstChild;//-----------------------IE8中是第一個子元素
// 獲取某節(jié)點的第一個子元素
node.firstElementChild;//----------------IE8中不支持
// 獲取某節(jié)點的最后一個子節(jié)點
node.lastChild;//------------------------IE8中是第一個子元素
// 獲取某節(jié)點的最后一個子元素
node.lastElementChild;//-----------------IE8中不支持
// 獲取某節(jié)點的前一個兄弟節(jié)點
node.previousSibling;
// 獲取某節(jié)點的前一個兄弟元素
node.previousElementSibling;
// 獲取某節(jié)點的后一個兄弟節(jié)點
node.nextSibling;
// 獲取某節(jié)點的后一個兄弟元素
node.nextElementSibling;案例：點擊按鈕設(shè)置div中p標(biāo)簽改變背景顏色（掌握）
html和css代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 450px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="變色" id="btn" />
<div id="dv">
<span>這是span</span>
<p>這是p</p>
<span>這是span</span>
<p>這是p</p>
<span>這是span</span>
<p>這是p</p>
<span>這是span</span>
<a href="http://www.baidu.com">百度</a>
</div>
</body>
</html>JavaScript代碼
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
