CSS盒子邊框
CSS中其實就三個大模塊:盒子模型、浮動、定位。
其中所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子,也就是一個裝內容的容器,每個矩形都由元素的內容、內邊距(padding)、邊框(border)和外邊距(margin)構成。
看透網頁的本質:把網頁元素比如文字或者圖片,放入盒子裏面,然後利用CSS擺放盒子的過程,就叫做網頁的佈局。
其實CSS確實沒有太多的邏輯可言,就好比下圖中的例子,是不是就類似我們小時候玩的積木,可以自由隨意的進行擺放,實現我們想要的效果。
盒子模型(Box Model)分爲以下三個部分:
- 盒子邊框(border)
- 內邊距(padding)
- 外邊距(margin)
這一節我們主要介紹盒子邊框(border)。邊框就好比外面的一層皮。
具體語法:
Border : border-width / border-style / border-color
1、border-width:邊框的粗細(單位px)
2、border-color:邊框的顏色
3、border-style:邊框的樣式(常用的如下)
- none:無邊框(默認)
- hidden:隱藏邊框
- dotted:點線邊框
- dashed:虛線邊框
- solid:實線邊框(重點)
【實例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子邊框介紹</title>
<style>
div {
width: 200px;
height: 200px;
border-width: 2px;
border-color: deeppink;
border-style: solid;
/*border-style: dashed;*/
/*border-style: dotted;*/
/*border: 2px solid deeppink; /*邊框連寫格式*/*/
}
</style>
</head>
<body>
<div>釣魚島是中國的!</div>
</body>
</html>
當然一條一條屬性分開來寫略顯麻煩,這裏也提供了連寫的方式。
邊框連寫語法:
border: 2px solid deeppink;
其實盒子的邊框四條線可以拆分開來顯示,分爲上、下、左、右:
- 上邊框:border-top
- 下邊框:border-bottom
- 左邊框:border-left
- 右邊框:border-right
去掉所有邊框寫法:border:0;
【實例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子邊框練習</title>
<style>
input {
border: 0; /*去掉所有邊框*/
border-bottom: 1px dashed deeppink;
}
button {
width: 50px;
height: 30px;
border: 1px solid blue;
}
</style>
</head>
<body>
賬戶:<input type="text">
<br> <br> <br>
<button>提交</button>
</body>
</html>
盒子邊框的擴展學習
之前在HTML的學習中我們接觸過對錶格邊框的粗細進行設置,但是在CSS這裏只需要一句話就可以搞定了。
我們給table和td屬性加上這麼一句是不是就可以了“border: 1px solid red;”,話糙理不糙,但是細心的朋友會發現這邊框咋比正常的略微粗了一點,這是因爲單元格與單元格之間設置了無縫隙,那麼兩個邊框就緊挨在了一起,當然會比一般的邊框看上去粗一點,這個時候就
用到下面這種寫法:
Border-collapse:collapse;表示邊框合併在一起(相鄰邊框合併)
【實例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格細線邊框</title>
<style>
table {
width: 450px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center; /*內容居中對齊*/
}
table,td {
border-collapse: collapse; /*相鄰邊框合併*/
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td>京東京東我最強</td>
<td>京東京東我最強</td>
<td>京東京東我最強</td>
</tr>
<tr>
<td>淘寶淘寶我最棒</td>
<td>淘寶淘寶我最棒</td>
<td>淘寶淘寶我最棒</td>
</tr>
<tr>
<td>最牛還是拼多多</td>
<td>最牛還是拼多多</td>
<td>最牛還是拼多多</td>
</tr>
</table>
</body>
</html>
Tip:Sublime註釋快捷鍵“CTRL+/”