當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS基础(part10)--盒子模型之边框

發布時間：2023/12/19 CSS 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS基础(part10)--盒子模型之边框小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

學習筆記，僅供參考，有錯必糾

參考自：某不知名網課

文章目錄

- 盒子模型
- - 盒子模型簡介
  - 邊框(border)
  - - 邊框屬性
    - 舉個例子
    - 邊框綜合設置
    - 盒子邊框寫法總結表
    - 邊框重疊設置

盒子模型

盒子模型簡介

盒子模型有元素的內容(content)、邊框(border)、內邊距(padding)、和外邊距(margin)組成：

比如，我們打開京東首頁：

查看中間月餅宣傳圖片的元素：

可以看到，只有內容(content)部分顯示為 $590 \times 470$ ，其他部分都標識為 - ，這表示除了內容部分的大小為590*470以外，其他部分都不存在。

邊框(border)

邊框屬性

屬性作用

border-width	定義邊框粗細，單位是px
border-style	邊框的樣式
border-color	邊框顏色

border-width

語法：

order-width : medium | thin | thick | length

參數：

參數含義

medium	默認寬度
thin	小于默認寬度
thick	大于默認寬度
length	由浮點數字和單位標識符組成的長度值，不可為負值。

border-style

語法：

常用參數：

參數含義

none	無邊框，與任何指定的border-width值無關
hidden	隱藏邊框
dotted	點線
dashed	虛線
solid	實線邊框
double	雙線邊框

border-color

語法：

border-color : color

參數color ：指定顏色

舉個例子

HTML代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>div {width: 300px;height: 300px;border-width: 10px;border-style: dashed;border-color: red;}</style> </head> <body><div></div></body> </html>

頁面：

邊框綜合設置

我們可以按照邊框粗細，邊框樣式，邊框顏色的順序簡寫邊框的設置，如：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>div {width: 300px;height: 300px;border: 5px solid blue;}</style> </head> <body><div></div></body> </html>

頁面：

盒子邊框寫法總結表

很多情況下，我們不需要指定4個邊框，而是可以給4個邊框分別進行指定：

上邊框下邊框左邊框右邊框

border-top-style:樣式;	border-bottom-style:樣式;	border-left-style:樣式;	border-right-style:樣式;
border-top-width:寬度;	border- bottom-width:寬度;	border-left-width:寬度;	border-right-width:寬度;
border-top-color:顏色;	border- bottom-color:顏色;	border-left-color:顏色;	border-right-color:顏色;
border-top:寬度樣式顏色;	border-bottom:寬度樣式顏色;	border-left:寬度樣式顏色;	border-right:寬度樣式顏色;

舉個例子

HTML代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>div {width: 200px;height: 200px;border-top: 10px solid red;border-left: 5px solid green;border-right: 5px solid blue;border-bottom: 5px solid pink;}input {border: none;border-bottom: 1px dashed red;}</style> </head> <body><div> </div><br>用戶名: <input type="text" > <br>密碼: <input type="text" > </body> </html>

頁面：

邊框重疊設置

我們先舉個例子，來看一看邊框重疊會出現啥情況。

舉個例子

HTML代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>td,th {border: 1px solid deeppink;/* border-collapse:collapse; */}</style> </head> <body><table cellspacing="0" width="300" height="150" align="center"><tr><th>姓名</th><th>年齡</th><th>故鄉</th></tr><tr><td>王濤</td><td>19</td><td>南京</td></tr><tr><td>常江</td><td>22</td><td>北京</td></tr><tr><td>葉函</td><td>25</td><td>杭州</td></tr></table> </body> </html>

注意，在表格中設置cellspacing="0"，可以將單元格與單元格之間的距離設置為0。

頁面：

可以看到，表格內部的線較粗，表格外部的線較細，這是由于表格內部線條重疊的結果。

現在，我們設置table標簽的css屬性為border-collapse:collapse;，使線條合并：

頁面：

Very Well ~

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS基础(part10)--盒子模型之边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。