css學習筆記二

標籤：筆記二   sid   符號   設定   存在   清除   apt   如何   相同   

表格樣式:

caption{　　　　　　　　　　　　　　　表格標題　　

　　　　caption-side:bottm;　　　　　　至底顯示

}

table{

　　　　border-collapse:collapse;　　　　邊框重疊

}

========================================================================================================================================

p{

　　cursor:pointer;　　　　　　　　　　滑鼠經過時變手指

}

a{

　　text-decoration:none;　　　　　　　去掉超連結底線

}

ul{

　　list-syle-type:none;　　　　　　　　去掉開頭符號

}

======================================================================================================================================

區塊層級元素：

1、塊元素裡面的內容預設顯示在左上方。

2、塊元素單獨佔滿一行（存在於文檔流）。

常用塊元素：

div、p、h1-h6、ol（li）、ul（li）、dl、dt、dd、body、table、pre、form

行內元素（內嵌元素）：

1、高度寬度不起作用。

2、不會單獨佔滿一行。

常用行內元素：

a、span、input、lable、img、textarea、select

span{

　　display:block;　　　　　　行內元素切換成區塊層級元素

}

#d1{

　　float:left　　　　　　　　塊元素並排漂浮在左邊（有多個塊元素的話需同時設定float）

　　clea：left　　　　　　　清除浮動影響

}

======================================================================================================================================

盒子模型：

padding(內間距)

margin(外間距)

#d1{

　　width:100px;

　　height:100px;

　　border:solid 1px red;

　　padding:10px;　　　　　　　　　　內間距上下左右增加10px

　　padding:10px 20px;　　　　　　　內間距上下增加10px，左右增加20px

　　padding:10px 20px 30px;　　　　　內間距上面增加10px，左右增加20px，下面增加30px

　　padding:10px 20px 30px 40px; 　　內間距從上面開始順時針方向增加10，20，30，40px

　　padding-top:30px　　　　　　　　內間距從上面增加30px

　　margin:10px　　　　　　　　　　外間距與內間距寫法相同

}

一般預設情況下瀏覽器會給標籤添加間距，若想讓標籤頂格顯示，需在css檔案中加入

*{

　　padding:0px;

　　margin:0px;

}

如何讓塊元素標籤置中顯示：

#d1{

　　margin:0px auto;

}

如何讓塊元素標籤中的列表置中顯示：

ul{

　　list-style-type:none;

　　width:51px;

　　height:44px;

　　margin:0px auto;

}

間距對行內元素也有用

css學習筆記二