【温故知新】CSS学习笔记（盒子边框介绍）
CSS盒子邊框
?
CSS中其實(shí)就三個(gè)大模塊：盒子模型、浮動(dòng)、定位。
其中所謂盒子模型就是把HTML頁(yè)面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)裝內(nèi)容的容器，每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）構(gòu)成。
看透網(wǎng)頁(yè)的本質(zhì)：把網(wǎng)頁(yè)元素比如文字或者圖片，放入盒子里面，然后利用CSS擺放盒子的過(guò)程，就叫做網(wǎng)頁(yè)的布局。
其實(shí)CSS確實(shí)沒有太多的邏輯可言，就好比下圖中的例子，是不是就類似我們小時(shí)候玩的積木，可以自由隨意的進(jìn)行擺放，實(shí)現(xiàn)我們想要的效果。
盒子模型（Box Model）分為以下三個(gè)部分：
- 盒子邊框（border）
- 內(nèi)邊距（padding）
- 外邊距（margin）
?
這一節(jié)我們主要介紹盒子邊框（border）。邊框就好比外面的一層皮。
具體語(yǔ)法：
Border : border-width / border-style / border-color
1、border-width：邊框的粗細(xì)（單位px）
2、border-color：邊框的顏色
3、border-style：邊框的樣式（常用的如下）
- none：無(wú)邊框（默認(rèn)）
- hidden：隱藏邊框
- dotted：點(diǎn)線邊框
- dashed：虛線邊框
- solid：實(shí)線邊框（重點(diǎn)）
?
【實(shí)例】
<!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>釣魚島是中國(guó)的！</div> </body> </html>當(dāng)然一條一條屬性分開來(lái)寫略顯麻煩，這里也提供了連寫的方式。
邊框連寫語(yǔ)法：
border: 2px solid deeppink;
? 其實(shí)盒子的邊框四條線可以拆分開來(lái)顯示，分為上、下、左、右：
去掉所有邊框?qū)懛?#xff1a;border:0;
?
【實(shí)例】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>盒子邊框練習(xí)</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>?
? 盒子邊框的擴(kuò)展學(xué)習(xí)
之前在HTML的學(xué)習(xí)中我們接觸過(guò)對(duì)表格邊框的粗細(xì)進(jìn)行設(shè)置，但是在CSS這里只需要一句話就可以搞定了。
我們給table和td屬性加上這么一句是不是就可以了“border: 1px solid red;”，話糙理不糙，但是細(xì)心的朋友會(huì)發(fā)現(xiàn)這邊框咋比正常的略微粗了一點(diǎn)，這是因?yàn)閱卧衽c單元格之間設(shè)置了無(wú)縫隙，那么兩個(gè)邊框就緊挨在了一起，當(dāng)然會(huì)比一般的邊框看上去粗一點(diǎn)，這個(gè)時(shí)候就
用到下面這種寫法：
Border-collapse：collapse；表示邊框合并在一起（相鄰邊框合并）
?
【實(shí)例】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表格細(xì)線邊框</title><style>table {width: 450px;height: 300px;border: 1px solid red; }td {border: 1px solid red;text-align: center; /*內(nèi)容居中對(duì)齊*/}table,td {border-collapse: collapse; /*相鄰邊框合并*/}</style> </head> <body><table cellpadding="0" cellspacing="0"><tr><td>京東京東我最強(qiáng)</td><td>京東京東我最強(qiáng)</td><td>京東京東我最強(qiáng)</td></tr><tr><td>淘寶淘寶我最棒</td><td>淘寶淘寶我最棒</td><td>淘寶淘寶我最棒</td></tr><tr><td>最牛還是拼多多</td><td>最牛還是拼多多</td><td>最牛還是拼多多</td></tr></table> </body> </html>?
Tip：Sublime注釋快捷鍵“CTRL+/”
總結(jié)
以上是生活随笔為你收集整理的【温故知新】CSS学习笔记（盒子边框介绍）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【温故知新】CSS学习笔记（背景）
- 下一篇： 【温故知新】CSS学习笔记（盒子内边距介