HTML 中的 box-border 盒子边框详解

order 盒子边框

复合属性。设置对象边框的特性。
盒子边框三要素：
① 边框粗细
② 边框样式
③ 边框颜色

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

边框四边的粗细、样式、颜色，以及上下左右每个位置的样式属性都是可以单独调整的。

边框的颜色不是必要的，如果不指定颜色，默认颜色为黑色，但必须为盒子指定宽高。

初始 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 可为盒子边框设置样式，以下示例为实线

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

效果：

可单独针对某一方向设置边框样式

示例 CSS 代码

上边：border-top-style: double; （双线）
右边：border-right-style: solid; (实线)
下边：border-bottom-style: dashed; (虚线)
左边：border-left-style: dotted; (点线)

border-style 说明

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
如果border-width等于0，本属性将失去作用。

如果需要设置不同方向的样式属性，可以写在一句 CSS 代码里，比如说下面这段代码，上下实线，左右虚线。

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

效果：

border-style 样式属性值

属性值解释none无轮廓。 border-color将被忽略，border-width计算值为0，除非边框轮廓为图像，即border-image。hidden隐藏边框。IE7及以下尚不支持dotted点状轮廓。IE6下显示为dashed效果dashed虚线轮廓solid实线轮廓double双线轮廓。两条单线与其间隔的和等于指定的border-width值groove3D凹槽轮廓ridge3D凸槽轮廓inset3D凹边轮廓outset3D凸边轮廓

边框粗细

使用 border-width 可为盒子边框设置粗细，以下示例边框为 5px 粗细

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

效果

可单独针对某一方向设置边框粗细

示例 CSS 代码

上边：border-top-width: 10px; （双线）
右边：border-right-width: 10px; (实线)
下边：border-bottom-width: 10px; (虚线)
左边：border-left-width: 10px; (点线)

border-width 说明

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
如果border-style设置为none或hidden，border-width的使用值将为0。

如果需要设置不同方向的边框粗细，可以写在一句 CSS 代码里。

比如说下面这段代码，上下2px，右2px，左5px。

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

效果：

边框颜色

可直接输入
颜色的英文名称
rgb值
十六进制

使用 border-color 可为盒子边框设置颜色，以下示例边框颜色为红色。

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

效果：

可单独针对某一方向设置边框颜色

示例 CSS 代码

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

border-color 说明

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
如果border-width等于0或border-style设置为none，本属性将被忽略。

上面有两个示例讲述如何设置不同方向的属性，border-color 也是相同使用方法，此处就不做示例了。

border 是复合属性

如果你需要同时设置盒子的粗细、样式、颜色，那么你可以将他们的样式表写在同一行代码里。

例如：

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

这段代码指定了上边框的三个属性：粗细、样式、颜色

border-top 包含了：

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

其他同理

教你用 CSS 画个三角形

先来看一个示例

 /* 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;
 }

效果：

细心的你，一定发现了 border 的边框四条边交接处是斜角。

此刻我们把盒子的宽高设置为 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;
 }

效果：

是不是完完全全像四个三角形一样。

我们只需要把上边和左右两边的三角形隐藏起来，它不就是一个三角形了。

为 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;
 }

效果：

把另外三条边透明之后，就只剩一个三角形了。

完

部分资料引用自：

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

.什么是盒子模型

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

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>

边框属性—设置边框样式（border-style），边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

CSS 边框属性：

<!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.内边距(padding)

padding属性用于设置内边距。是指边框与内容之间的距离。

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding:上内边距右内边距下内边距左内边距

注意：后面跟几个数值表示的意思是不一样的：

<!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属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

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

取值顺序跟内边距相同。

<!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）外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 120px;            border: 1px solid red;            margin: 50px auto; /*只是让盒子居中，盒子里面的内容不会居中*/            text-align: center;        }</style></head><body>    <div class="dv1">码海无际</div></body></html>

3）清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        * {            padding: 0; /* 清除内边距 */            margin: 0; /* 清除外边距 */        }        .dv1 {            width: 120px;            border: 1px solid red;        }</style></head><body>    <div class="dv1">码海无际</div></body></html>

5.外边距合并

1）相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

<!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）嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案：

可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加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>

实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

看透网页布局的本质

网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？

其实，行内元素比如文字类似牛奶，也需要一个盒子把他们装起来，双标签都是一个盒子。有了盒子，我们就可以随意的，自由的，摆放位置了。

看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

盒子模型（Box Model）

首先，我们来看一张图，来体会下什么是盒子模型。

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

盒子边框（border）

边框就是那层皮。橘子皮。。柚子皮。。橙子皮。。。

语法：

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

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线 
dotted：边框为点线
double：边框为双实线

盒子边框写法总结表

表格的细线边框

以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。让我们真的相信，CSS就是我们的白马王子（白雪公主）。

table{ border-collapse:collapse; } collapse 单词是合并的意思

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

圆角边框(CSS3)

从此以后，我们的世界不只有矩形。radius 半径（距离）

语法格式：

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

内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

注意：后面跟几个数值表示的意思是不一样的。

外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

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

取值顺序跟内边距相同。

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

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

文字盒子居中图片和背景区别

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

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

插入图片我们用的最多比如产品展示类
背景图片我们一般用于小图标背景或者超大背景图片

section img { 
 width: 200px;/* 插入图片更改大小 width 和 height */
 height: 210px;
 margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
 margin-left: 50px; /* 插入当图片也是一个盒子 */
 }
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 */
 }

清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {
 padding:0; /* 清除内边距 */
 margin:0; /* 清除外边距 */
}

注意：行内元素是只有左右外边距的，是没有上下外边距的。内边距，在ie6等低版本浏览器也会有问题。

我们尽量不要给行内元素指定上下的内外边距就好了。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的合并

解决方案：

可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden。

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

 /*外盒尺寸计算（元素空间尺寸）*/
 Element空间高度 = content height + padding + border + margin
 Element 空间宽度 = content width + padding + border + margin
 /*内盒尺寸计算（元素实际大小）*/
 Element Height = content height + padding + border （Height为内容高度）
 Element Width = content width + padding + border （Width为内容宽度）

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。

盒子模型布局稳定性

开始学习盒子模型，同学们最大的困惑就是，分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？

答案是：其实他们大部分情况下是可以混用的。就是说，你用内边距也可以，用外边距也可以。你觉得哪个方便，就用哪个。

但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：

按照优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）。

 width > padding > margin

原因：

margin 会有外边距合并还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。
width 没有问题（嗨皮）我们经常使用宽度剩余法高度剩余法来做。

盒子阴影

语法格式：

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

前两个属性是必须写的。其余的可以省略。
外阴影 (outset) 但是不能写默认想要内阴影 inset

在线咨询

上一篇：2022年全国各省重点项目一览（含项目清单）
下一篇：HBuilder或X依赖HTML5Plus加壳APP截屏保存相册功能

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 中的 box-border 盒子边框详解

初始 HTML

边框样式

可单独针对某一方向设置边框样式

border-style 说明

border-style 样式属性值

边框粗细

可单独针对某一方向设置边框粗细

border-width 说明

边框颜色

可单独针对某一方向设置边框颜色

border-color 说明

border 是复合属性

教你用 CSS 画个三角形

.什么是盒子模型

2.盒子边框(border)

3.内边距(padding)

4.外边距(margin)

1）外边距的使用

2）外边距实现盒子居中

3）清除元素的默认内外边距

5.外边距合并

1）相邻块元素垂直外边距的合并

2）嵌套块元素垂直外边距的合并

您的项目需求