Web-9月13日隨筆
通配符（*）選擇器的利弊：
利：方便，省事 弊：會加大瀏覽器的負荷 （按需求進行選擇）
list-style屬性值：circle/disc/square/none（空心圓/實心圓/正方形/無）
ul跟p標簽天生自帶內外邊距。
—.p標簽中內容分別是漢字和英文是為什麽會出現兩種不同的結果。
範例：
<p>博客園首頁（即網站首頁）只能發布原創的、高質量的、能讓讀者從中學到東西的內容。</p>
<p>sdadasdasdasdasfasjfakfnjdkgfukahffuw</p>
效果：給p設置寬高後，第一個p中的文字自動換行； 第二個p中的英文超出了所設置的寬。
原因：因為瀏覽器在解析第二個p的時候，字母之間沒有空格，所以會認為它是一個沒寫完的英語單詞，所以不換行。
二.列表：
作用：做二級菜單和導航條
無序列表（ul） li（一列） ol（有序列表） dl（自定義列表） dt（自定義列表的小標題） dd（自定義列表的內容）
ul跟ol的區別：ol前面可以用type修飾樣式；
三.外邊距與內邊距
外邊距：margin，共四個屬性值:top（上）right（右）bottom（下）left（左）
margin的屬性值（簡寫）：1.margin：20px；（外邊距的上，右，下，左四個方向都是20px；）
2.margin：10px 20px；（外邊距的上下是10像素，左右是20像素）
3.margin：10px 20px 30px；（外邊距的上下是10像素和30像素，左右是20像素）
4.margin：10px 20px 30px 40px ；（外邊距的上是10像素，右是20像素，下是30像素，左是40像素）
5.margin-top：屬性值 margin-right：屬性值 margin-bottom：屬性值 margin-left：屬性值
padding同上；
一個元素實際占用的空間大小：width+border*2+padding*2+margin*2
盒子的真實寬度：width+border*2+padding-left+padding-right
盒子的真實高度：height+border*2+padding-top+padding-bottom
四.margin塌陷現象
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<title>margin塌陷現象</title>
<style>
.one{
width:"100px" ; height:"100px" ;
border:1px solid red; margin:150px; }
.two{ width:"100px" ; height:"100px" ;
border:1px solid red; margin:100px;}
</style>
</head>
<body>
<div class="one">
哈哈
</div>
<div class="two">
嘿嘿
</div>
</body>
</html>
解釋：上下兩個垂直分布的元素設置外邊距時，較小的會塌陷到較大那邊。
五.
塊級元素的特點：1.可以設置寬高 2.margin可以隨便用 3.獨占一行，無論內容多少，不能與其他元素在一行顯示。（div，h1-h6，p，ul，li，ol，dl，dt，dd，form等）
行內元素的特點：1.不可以設置寬高 2.內容的大小決定空間的大小 3.可以和其他元素在同一行顯示 4.margin只能上下用，左右不能用。 （sapn，a，em，lable，strong，b，i，img）
行內塊元素的特點：1.可直接設置寬高 2.margin可以隨便用了 3.可以在同一行顯示
六.display-inline(轉行內元素，可以在一行顯示了，但無法設置寬高，margin只能設置上下)
display-block（轉塊狀元素，可以設置寬高，但獨占一行，marign隨便用）
display-inline-block（轉行內塊，可以在一行顯示，可以設置寬高，margin隨便用）
七.line-height（行高）設置字體的垂直位置。
一般情況下行高與高相同。
當是2的時候，line-height的值是2*font-size的大小 =（36px），默認字體大小是18px；
Web-9月13日隨筆