HTML 中的 box-border 盒子邊框詳解

order 盒子邊框

復(fù)合屬性。設(shè)置對(duì)象邊框的特性。
盒子邊框三要素：
① 邊框粗細(xì)
② 邊框樣式
③ 邊框顏色

語法：border: border-width | border-style | border-color ;

邊框四邊的粗細(xì)、樣式、顏色，以及上下左右每個(gè)位置的樣式屬性都是可以單獨(dú)調(diào)整的。

邊框的顏色不是必要的，如果不指定顏色，默認(rèn)顏色為黑色，但必須為盒子指定寬高。

初始 HTML

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         div{
             width: 500px;
             height: 50px;
         }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>

邊框樣式

使用 border-style 可為盒子邊框設(shè)置樣式，以下示例為實(shí)線

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid; 
 }

效果：

可單獨(dú)針對(duì)某一方向設(shè)置邊框樣式

示例 CSS 代碼

上邊：border-top-style: double; （雙線）
右邊：border-right-style: solid; (實(shí)線)
下邊：border-bottom-style: dashed; (虛線)
左邊：border-left-style: dotted; (點(diǎn)線)

border-style 說明

如果提供全部四個(gè)參數(shù)值，將按上、右、下、左的順序作用于四邊。
如果只提供一個(gè)，將用于全部的四邊。
如果提供兩個(gè)，第一個(gè)用于上、下，第二個(gè)用于左、右。
如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)用于下。
如果border-width等于0，本屬性將失去作用。

如果需要設(shè)置不同方向的樣式屬性，可以寫在一句 CSS 代碼里，比如說下面這段代碼，上下實(shí)線，左右虛線。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid dashed;
 }

效果：

border-style 樣式屬性值

屬性值解釋none無輪廓。 border-color將被忽略，border-width計(jì)算值為0，除非邊框輪廓為圖像，即border-image。hidden隱藏邊框。IE7及以下尚不支持dotted點(diǎn)狀輪廓。IE6下顯示為dashed效果dashed虛線輪廓solid實(shí)線輪廓double雙線輪廓。兩條單線與其間隔的和等于指定的border-width值groove3D凹槽輪廓ridge3D凸槽輪廓inset3D凹邊輪廓outset3D凸邊輪廓

邊框粗細(xì)

使用 border-width 可為盒子邊框設(shè)置粗細(xì)，以下示例邊框?yàn)?5px 粗細(xì)

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width: 5px;
 }

效果

可單獨(dú)針對(duì)某一方向設(shè)置邊框粗細(xì)

示例 CSS 代碼

上邊：border-top-width: 10px; （雙線）
右邊：border-right-width: 10px; (實(shí)線)
下邊：border-bottom-width: 10px; (虛線)
左邊：border-left-width: 10px; (點(diǎn)線)

border-width 說明

如果提供全部四個(gè)參數(shù)值，將按上、右、下、左的順序作用于四邊。
如果只提供一個(gè)，將用于全部的四邊。
如果提供兩個(gè)，第一個(gè)用于上、下，第二個(gè)用于左、右。
如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)用于下。
如果border-style設(shè)置為none或hidden，border-width的使用值將為0。

如果需要設(shè)置不同方向的邊框粗細(xì)，可以寫在一句 CSS 代碼里。

比如說下面這段代碼，上下2px，右2px，左5px。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
 }

效果：

邊框顏色

可直接輸入
顏色的英文名稱
rgb值
十六進(jìn)制

使用 border-color 可為盒子邊框設(shè)置顏色，以下示例邊框顏色為紅色。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
     border-color: red;
 }

效果：

可單獨(dú)針對(duì)某一方向設(shè)置邊框顏色

示例 CSS 代碼

上邊：border-top-color: 10px;
右邊：border-right-color: 10px;
下邊：border-bottom-color: 10px;
左邊：border-left-color: 10px;

border-color 說明

如果提供全部四個(gè)參數(shù)值，將按上、右、下、左的順序作用于四邊。
如果只提供一個(gè)，將用于全部的四邊。
如果提供兩個(gè)，第一個(gè)用于上、下，第二個(gè)用于左、右。
如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)用于下。
如果border-width等于0或border-style設(shè)置為none，本屬性將被忽略。

上面有兩個(gè)示例講述如何設(shè)置不同方向的屬性，border-color 也是相同使用方法，此處就不做示例了。

border 是復(fù)合屬性

如果你需要同時(shí)設(shè)置盒子的粗細(xì)、樣式、顏色，那么你可以將他們的樣式表寫在同一行代碼里。

例如：

 /* CSS代碼 */
 div{
     border-top: 5px solid red;
 }

這段代碼指定了上邊框的三個(gè)屬性：粗細(xì)、樣式、顏色

border-top 包含了：

border-top-width: 5px;
border-top-style: solid;
border-top-color: red;

其他同理

教你用 CSS 畫個(gè)三角形

先來看一個(gè)示例

 /* CSS代碼 */
 div{
     width: 100px;
     height: 100px;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果：

細(xì)心的你，一定發(fā)現(xiàn)了 border 的邊框四條邊交接處是斜角。

此刻我們把盒子的寬高設(shè)置為 0

 /* CSS代碼 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果：

是不是完完全全像四個(gè)三角形一樣。

我們只需要把上邊和左右兩邊的三角形隱藏起來，它不就是一個(gè)三角形了。

為 border-color 指定 transparent 值，使盒子邊框顏色變透明

 /* CSS代碼 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid green;
     border-left: 50px solid transparent;
 }

效果：

把另外三條邊透明之后，就只剩一個(gè)三角形了。

完

部分資料引用自：

http://caibaojian.com/css3/properties/border/index.htm

.什么是盒子模型

網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)， CSS盒子模型都具備這些屬性。這些屬性我們可以用日常生活中的常見事物盒子作一個(gè)比喻來理解，所以叫它盒子模型。CSS盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。

2.盒子邊框(border)

語法：

border : border-width border-style border-color

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            border: 5px solid red;            width: 80px;        }</style></head><body>    <div>碼海無際</div></body></html>

邊框?qū)傩浴O(shè)置邊框樣式（border-style），邊框樣式用于定義頁面中邊框的風(fēng)格，常用屬性值如下：

none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）
solid：邊框?yàn)閱螌?shí)線(最為常用的)
dashed：邊框?yàn)樘摼€
dotted：邊框?yàn)辄c(diǎn)線
double：邊框?yàn)殡p實(shí)線

CSS 邊框?qū)傩裕?/p>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div {            border-width: 5px;            border-style: solid;            border-color: red;            width: 80px;        }        .d2 {            border-bottom: 5px solid blue;            width: 80px;        }</style></head><body>    <div>碼海無際</div>    <br>    <div class="d2">碼海無際</div></body></html>

3.內(nèi)邊距(padding)

padding屬性用于設(shè)置內(nèi)邊距。是指邊框與內(nèi)容之間的距離。

padding-top:上內(nèi)邊距
padding-right:右內(nèi)邊距
padding-bottom:下內(nèi)邊距
padding-left:左內(nèi)邊距
padding:上內(nèi)邊距右內(nèi)邊距下內(nèi)邊距左內(nèi)邊距

注意：后面跟幾個(gè)數(shù)值表示的意思是不一樣的：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            border: 1px solid red;            width: 80px;            padding: 15px 30px;        }
        .dv2 {            border: 1px solid red;            width: 80px;            padding-top: 15px;            padding-bottom: 15px;            padding-left: 30px;            padding-right: 30px;        }</style></head><body>    <div class="dv1">碼海無際</div>    <br>    <div class="dv2">碼海無際</div></body></html>

4.外邊距(margin)

1）外邊距的使用

margin屬性用于設(shè)置外邊距。設(shè)置外邊距會(huì)在元素之間創(chuàng)建“空白”，這段空白通常不能放置其他內(nèi)容。

margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距右外邊距下外邊距左外邊距

取值順序跟內(nèi)邊距相同。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1{            width: 80px;            border: 1px solid red;            margin: 15px;        }        .dv2{            width: 80px;            border: 1px solid red;        }</style></head><body>    <div class="dv1">碼海無際</div>    <div class="dv2">碼海無際</div></body></html>

2）外邊距實(shí)現(xiàn)盒子居中

可以讓一個(gè)盒子實(shí)現(xiàn)水平居中，需要滿足一下兩個(gè)條件：

必須是塊級(jí)元素。
盒子必須指定了寬度（width）

然后就給左右的外邊距都設(shè)置為auto，就可使塊級(jí)元素水平居中。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 120px;            border: 1px solid red;            margin: 50px auto; /*只是讓盒子居中，盒子里面的內(nèi)容不會(huì)居中*/            text-align: center;        }</style></head><body>    <div class="dv1">碼海無際</div></body></html>

3）清除元素的默認(rèn)內(nèi)外邊距

為了更方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時(shí)，可使用如下代碼清除元素的默認(rèn)內(nèi)外邊距：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        * {            padding: 0; /* 清除內(nèi)邊距 */            margin: 0; /* 清除外邊距 */        }        .dv1 {            width: 120px;            border: 1px solid red;        }</style></head><body>    <div class="dv1">碼海無際</div></body></html>

5.外邊距合并

1）相鄰塊元素垂直外邊距的合并

當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 80px;            height: 50px;            background-color: red;            margin-bottom: 20px;        }        .dv2 {            margin-top: 30px;            width: 80px;            height: 50px;            background-color: blue;        }</style></head><body>    <div class="dv1">碼海無際</div>    <div class="dv2">碼海無際</div></body></html>

2）嵌套塊元素垂直外邊距的合并

對(duì)于兩個(gè)嵌套關(guān)系的塊元素，如果父元素沒有上內(nèi)邊距及邊框，則父元素的上外邊距會(huì)與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會(huì)發(fā)生合并。

解決方案：

可以為父元素定義1像素的上邊框或上內(nèi)邊距。
可以為父元素添加overflow:hidden。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 100px;            height: 100px;            background-color: red;            /*border-top: 1px solid darkmagenta;*/            /*padding-top: 1px;*/            overflow: hidden;        }        .dv2 {            width: 80px;            height: 50px;            background-color: blue;            margin-top: 20px;        }</style></head><body>    <div class="dv1">        <div class="dv2"></div>    </div></body></html>

實(shí)，CSS就三個(gè)大模塊：盒子模型、浮動(dòng) 、定位，其余的都是細(xì)節(jié)。要求這三部分，無論如何也要學(xué)的非常精通。

所謂盒子模型就是把HTML頁面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。

看透網(wǎng)頁布局的本質(zhì)

網(wǎng)頁布局中，我們是如何把里面的文字，圖片，按照美工給我們的效果圖排列的整齊有序呢？

其實(shí)，行內(nèi)元素比如文字類似牛奶，也需要一個(gè)盒子把他們裝起來，雙標(biāo)簽都是一個(gè)盒子。有了盒子，我們就可以隨意的，自由的，擺放位置了。

看透網(wǎng)頁布局的本質(zhì)：把網(wǎng)頁元素比如文字圖片等等，放入盒子里面，然后利用CSS擺放盒子的過程，就是網(wǎng)頁布局。

盒子模型（Box Model）

首先，我們來看一張圖，來體會(huì)下什么是盒子模型。

所有的文檔元素（標(biāo)簽）都會(huì)生成一個(gè)矩形框，我們成為元素框（element box），它描述了一個(gè)文檔元素再網(wǎng)頁布局匯總所占的位置大小。因此，每個(gè)盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。

盒子邊框（border）

邊框就是那層皮。橘子皮。。柚子皮。。橙子皮。。。

語法：

border : border-width || border-style || border-color

邊框?qū)傩浴O(shè)置邊框樣式（border-style）

邊框樣式用于定義頁面中邊框的風(fēng)格，常用屬性值如下：

none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）
solid：邊框?yàn)閱螌?shí)線(最為常用的)
dashed：邊框?yàn)樘摼€ 
dotted：邊框?yàn)辄c(diǎn)線
double：邊框?yàn)殡p實(shí)線

盒子邊框?qū)懛偨Y(jié)表

表格的細(xì)線邊框

以前學(xué)過的html表格邊框很粗，這里只需要CSS一句話就可以美觀起來。讓我們真的相信，CSS就是我們的白馬王子（白雪公主）。

table{ border-collapse:collapse; } collapse 單詞是合并的意思

border-collapse:collapse; 表示邊框合并在一起。

圓角邊框(CSS3)

從此以后，我們的世界不只有矩形。radius 半徑（距離）

語法格式：

border-radius: 左上角 右上角 右下角 左下角;

內(nèi)邊距（padding）

padding屬性用于設(shè)置內(nèi)邊距。是指邊框與內(nèi)容之間的距離。

padding-top:上內(nèi)邊距

padding-right:右內(nèi)邊距

padding-bottom:下內(nèi)邊距

padding-left:左內(nèi)邊距

注意：后面跟幾個(gè)數(shù)值表示的意思是不一樣的。

外邊距（margin）

margin屬性用于設(shè)置外邊距。設(shè)置外邊距會(huì)在元素之間創(chuàng)建“空白”，這段空白通常不能放置其他內(nèi)容。

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

margin:上外邊距右外邊距下外邊距左外邊

取值順序跟內(nèi)邊距相同。

外邊距實(shí)現(xiàn)盒子居中

可以讓一個(gè)盒子實(shí)現(xiàn)水平居中，需要滿足一下兩個(gè)條件：

必須是塊級(jí)元素。
盒子必須指定了寬度（width）

然后就給左右的外邊距都設(shè)置為auto，就可使塊級(jí)元素水平居中。

實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁布局，示例代碼如下：

.header{ width:960px; margin:0 auto;}

文字盒子居中圖片和背景區(qū)別

文字水平居中是 text-align: center
盒子水平居中左右margin 改為 auto

text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改為 auto 就闊以了 */

插入圖片我們用的最多比如產(chǎn)品展示類
背景圖片我們一般用于小圖標(biāo)背景或者超大背景圖片

section img { 
 width: 200px;/* 插入圖片更改大小 width 和 height */
 height: 210px;
 margin-top: 30px; /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
 margin-left: 50px; /* 插入當(dāng)圖片也是一個(gè)盒子 */
 }
aside {
 width: 400px;
 height: 400px;
 border: 1px solid purple;
 background: #fff url(images/sun.jpg) no-repeat;
 
 background-size: 200px 210px; /* 背景圖片更改大小只能用 background-size */
 background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
 }

清除元素的默認(rèn)內(nèi)外邊距

為了更方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時(shí)，可使用如下代碼清除元素的默認(rèn)內(nèi)外邊距：

* {
 padding:0; /* 清除內(nèi)邊距 */
 margin:0; /* 清除外邊距 */
}

注意：行內(nèi)元素是只有左右外邊距的，是沒有上下外邊距的。內(nèi)邊距，在ie6等低版本瀏覽器也會(huì)有問題。

我們盡量不要給行內(nèi)元素指定上下的內(nèi)外邊距就好了。

外邊距合并

使用margin定義塊元素的垂直外邊距時(shí)，可能會(huì)出現(xiàn)外邊距的合并。

相鄰塊元素垂直外邊距的合并

嵌套塊元素垂直外邊距的合并

解決方案：

可以為父元素定義1像素的上邊框或上內(nèi)邊距。
可以為父元素添加overflow:hidden。

content寬度和高度

使用寬度屬性width和高度屬性height可以對(duì)盒子的大小進(jìn)行控制。

width和height的屬性值可以為不同單位的數(shù)值或相對(duì)于父元素的百分比%，實(shí)際工作中最常用的是像素值。

大多數(shù)瀏覽器，如Firefox、IE6及以上版本都采用了W3C規(guī)范，符合CSS規(guī)范的盒子模型的總寬度和總高度的計(jì)算原則是：

 /*外盒尺寸計(jì)算（元素空間尺寸）*/
 Element空間高度 = content height + padding + border + margin
 Element 空間寬度 = content width + padding + border + margin
 /*內(nèi)盒尺寸計(jì)算（元素實(shí)際大小）*/
 Element Height = content height + padding + border （Height為內(nèi)容高度）
 Element Width = content width + padding + border （Width為內(nèi)容寬度）

注意：

1、寬度屬性width和高度屬性height僅適用于塊級(jí)元素，對(duì)行內(nèi)元素?zé)o效（ img 標(biāo)簽和 input除外）。

2、計(jì)算盒子模型的總高度時(shí)，還應(yīng)考慮上下兩個(gè)盒子垂直外邊距合并的情況。

3、如果一個(gè)盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會(huì)影響本盒子大小。

盒子模型布局穩(wěn)定性

開始學(xué)習(xí)盒子模型，同學(xué)們最大的困惑就是，分不清內(nèi)外邊距的使用，什么情況下使用內(nèi)邊距，什么情況下使用外邊距？

答案是：其實(shí)他們大部分情況下是可以混用的。就是說，你用內(nèi)邊距也可以，用外邊距也可以。你覺得哪個(gè)方便，就用哪個(gè)。

但是，總有一個(gè)最好用的吧，我們根據(jù)穩(wěn)定性來分，建議如下：

按照優(yōu)先使用寬度（width）其次使用內(nèi)邊距（padding）再次外邊距（margin）。

 width > padding > margin

原因：

margin 會(huì)有外邊距合并還有 ie6下面margin 加倍的bug（討厭）所以最后使用。
padding 會(huì)影響盒子大小，需要進(jìn)行加減計(jì)算（麻煩）其次使用。
width 沒有問題（嗨皮）我們經(jīng)常使用寬度剩余法高度剩余法來做。
?

盒子陰影

語法格式：

box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內(nèi)/外陰影；

前兩個(gè)屬性是必須寫的。其余的可以省略。
外陰影 (outset) 但是不能寫默認(rèn) 想要內(nèi)陰影 inset

在線咨詢

上一篇：2022年全國(guó)各省重點(diǎn)項(xiàng)目一覽（含項(xiàng)目清單）
下一篇：HBuilder或X依賴HTML5Plus加殼APP截屏保存相冊(cè)功能

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML 中的 box-border 盒子邊框詳解

初始 HTML

邊框樣式

可單獨(dú)針對(duì)某一方向設(shè)置邊框樣式

border-style 說明

border-style 樣式屬性值

邊框粗細(xì)

可單獨(dú)針對(duì)某一方向設(shè)置邊框粗細(xì)

border-width 說明

邊框顏色

可單獨(dú)針對(duì)某一方向設(shè)置邊框顏色

border-color 說明

border 是復(fù)合屬性

教你用 CSS 畫個(gè)三角形

.什么是盒子模型

2.盒子邊框(border)

3.內(nèi)邊距(padding)

4.外邊距(margin)

1）外邊距的使用

2）外邊距實(shí)現(xiàn)盒子居中

3）清除元素的默認(rèn)內(nèi)外邊距

5.外邊距合并

1）相鄰塊元素垂直外邊距的合并

2）嵌套塊元素垂直外邊距的合并

您的項(xiàng)目需求