一、網(wǎng)頁布局本質(zhì)
構(gòu)建一個網(wǎng)頁 ,
- 首先 , 創(chuàng)建盒子模型 , 設(shè)置盒子的大小和擺放位置 , 下圖中紅色矩形框就是盒子模型 ;
- 然后 , 將 文本 , 圖片 , 鏈接 , 表單 等網(wǎng)頁元素 , 按照一定的樣式 , 填充進(jìn)盒子中 , 就形成了我們看到的網(wǎng)頁 ;
盒子 中 還可以嵌套 若干盒子 ;
二、盒子模型
HTML 的 一個布局 可以看做一個 矩形的 盒子模型 , 該 盒子模型 是一個用于 容納 標(biāo)簽元素 的容器 ;
盒子模型 組成 : 由內(nèi)到外順序如下 :
- 內(nèi)容 Content : 下圖中 內(nèi)容為 100 x 100 像素的元素 ;
- 內(nèi)邊距 Padding : 內(nèi)邊距 Padding 位于 邊框 與 內(nèi)容 之間 ;
- 邊框 Border : 邊框 包裹 內(nèi)邊距 , 在 外邊距 與 內(nèi)邊距 之間 , 邊框 1 像素 ;
- 外邊距 Margin : 最外層 元素 , 與其它盒子的距離 ;
三、盒子邊框 Border
1、CSS 2.0 文檔查詢
在 CSS 2.0 手冊中 , 搜索 border , 可以查詢到 盒子邊框 相關(guān)的文檔 ,
文檔中可以查詢到邊框的詳細(xì)細(xì)節(jié) :
2、邊框設(shè)置語法
邊框設(shè)置語法 :
- 設(shè)置邊框?qū)挾?: border-width 屬性值為 像素值 ;
border-width: 10px;
-
設(shè)置邊框樣式 : border-style 屬性值 設(shè)置邊框樣式 , 可設(shè)置的值由如下選擇 :
- none : 默認(rèn)選項 , 忽略邊框?qū)挾?;
- solid : 設(shè)置 實線邊框 ;
- dashed : 設(shè)置 虛線邊框 ;
- dotted : 設(shè)置 點線邊框 ;
border-style: solid;
- 設(shè)置邊框顏色 :
border-color: red;
代碼示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邊框</title>
<style>
div {
width: 200px;
height: 200px;
/* 邊框?qū)挾?4px */
border-width: 4px;
/* 邊框樣式 */
/* 邊框樣式-實線 */
/*border-style: solid;*/
/* 邊框樣式-虛線 */
/*border-style: dashed;*/
/* 邊框樣式-點線 */
border-style: dotted;
/* 邊框顏色 */
border-color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="https://blog.csdn.net/" class="blog">博客</a>
<a href="https://download.csdn.net/">下載</a>
<a href="https://edu.csdn.net/">學(xué)習(xí)</a>
<a href="https://bbs.csdn.net/">社區(qū)</a>
</div>
</body>
</html>
效果展示 : 下圖是 邊框樣式-點線 ;
邊框樣式-虛線 :
邊框樣式-實線 :
3、邊框設(shè)置綜合寫法
盒子邊框設(shè)置綜合寫法 : 在 border 屬性 后設(shè)置 邊框?qū)挾?font color="purple"> 邊框樣式 邊框顏色 三個值 , 使用空格隔開 , 這三個值沒有順序 ;
border : border-width border-style border-color
之前的邊框需要寫 3 行代碼 , 設(shè)置 3 個屬性 ,
/* 邊框?qū)挾?4px */
border-width: 4px;
/* 邊框樣式-點線 */
border-style: dotted;
/* 邊框顏色 */
border-color: red;
邊框設(shè)置綜合寫法 , 只需要寫一行代碼 , 即可替代上述 3 行代碼 ;
/* 邊框樣式綜合寫法 */
border: 4px dotted red;
代碼示例 : 在下面的代碼中 , 使用一行綜合寫法 , 即可實現(xiàn)上個章節(jié)的邊框樣式內(nèi)容 ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邊框</title>
<style>
div {
width: 200px;
height: 200px;
/* 邊框?qū)挾?4px */
/*border-width: 4px;*/
/* 邊框樣式 */
/* 邊框樣式-實線 */
/*border-style: solid;*/
/* 邊框樣式-虛線 */
/*border-style: dashed;*/
/* 邊框樣式-點線 */
/*border-style: dotted;*/
/* 邊框顏色 */
/*border-color: red;*/
/* 邊框設(shè)置綜合寫法 可替代上述三行代碼 */
border: 4px dotted red;
}
</style>
</head>
<body>
<div class="nav">
<a href="https://blog.csdn.net/" class="blog">博客</a>
<a href="https://download.csdn.net/">下載</a>
<a href="https://edu.csdn.net/">學(xué)習(xí)</a>
<a href="https://bbs.csdn.net/">社區(qū)</a>
</div>
</body>
</html>
展示效果 :文章來源：http://www.zghlxwxcb.cn/news/detail-764443.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-764443.html
到了這里，關(guān)于【CSS】盒子邊框 ① ( 網(wǎng)頁布局本質(zhì) | 盒子模型 | 盒子邊框 Border | border-width 寬度 | border-style 邊框樣式 | 邊框顏色 | 邊框設(shè)置綜合寫法 )的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
