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日隨筆