关于css盒子边框、内边距、外边距

使用width来设置盒子内容区的宽度

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、网站建设、外贸网站建设、平邑网络推广、微信小程序开发、平邑网络营销、平邑企业策划、平邑品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供平邑建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

使用height来设置盒子内容区的高度

width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定

为元素设置边框

要为一个元素设置边框必须指定三个样式

border-width:边框的宽度

border-color:边框颜色

border-style:边框的样式

使用border-width可以分别指定四个边框的宽度

如果在border-width指定了四个值

则四个值会分别设置给上、右、下、左，按照顺时针的方向设置的

如果指定三个值

则三个值会分别设置给上、左右、下

如果指定两个值

则两个值会分别设置给上下、左右

如果指定一个值，则四边全都是该值

除了border-width，CSS中还提供了四个border-xxx-width

xxx的值可能是top right bottom left

专门用来设置指定边的宽度

* 设置边框的颜色

* 和宽度一样，color也提供四个方向的样式，可以分别指定颜色

例如：border-color: red;

/*border-color: red yellow orange blue;*/

/*border-color: red yellow orange;*/

/*border-color: red yellow;*/

格式和边框设置颜色相同.

* 设置边框的样式

* 可选值：

* none，默认值，没有边框

* solid 实线

* dotted 点状边框

* dashed 虚线

* double 双线

*

* style也可以分别指定四个边的边框样式，规则和width一致，同时它也提供border-xxx-style四个样式，来分别设置四个边

设置边框

大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none

*/

/* border-width: 10px;

border-color: red;

border-style: solid; */

/*

border

- 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色

- 而且没有任何的顺序要求

- border一指定就是同时指定四个边不能分别指定

border-top border-right border-bottom border-left

可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

*/

/*border: red solid 10px;*/

/*border-left: red solid 10px;*/

内边距：

内边距（padding），指的是盒子的内容区与盒子边框之间的距离，一共有四个方向：

padding-top

padding-right

padding-bottom

padding-left

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距

盒子的大小由内容区、内边距和边框共同决定

盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width

盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

*/

/*设置上内边距*/

/*padding-top: 100px;*/

/*设置右内边距*/

/*padding-right: 100px;

padding-bottom: 100px;

padding-left: 100px;*/

/*

使用padding可以同时设置四个边框的样式，规则和border-width一致

*/

/*padding: 100px;*/

/*padding: 100px 200px;*/

/*padding: 100px 200px 300px;*/

外边距：

外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置

盒子有四个方向的外边距：

margin-top

margin-right

margin-bottom

margin-left

由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置

*/

/*设置上外边距，即盒子的上边框与其他盒子的距离*/

/*margin-top: 100px;*/

/*左外边距*/

/*margin-left: 100px;*/

/*设置右和下外边距*/

/*margin-right: 100px;

margin-bottom: 100px;*/

/*

外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动

*/

/*margin-left: -100px;

margin-top: -100px;

margin-bottom: -100px;*/

/*margin-bottom: -100px;*/

/*

margin还可以设置为auto，auto一般只设置给水平方向的margin

如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值

垂直方向外边距如果设置为auto，则外边距默认就是0

如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中

所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中

*/

/*margin-left: auto;

margin-right: auto;*/

/*margin-top: auto;*/

/*

外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一样

*/

/*margin: 10px 20px 30px 40px;*/

为上边的元素设置一个下外边距：margin-bottom: 100px;

为下边的元素设置一个上外边距：margin-top: 100px;

垂直外边距的重叠

在网页中相邻的垂直方向的外边距会发生外边距的重叠

所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和

如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

.box3{

width: 200px;

height: 100px;

background-color: yellow;

/*为box3设置一个上边框*/

/*border-top: 1px red solid;*/

/*padding-top: 1px;*/

padding-top: 100px;

}

.box4{

width: 100px;

height: 100px;

background-color: yellowgreen;

/*为子元素设置一个上外边距，使子元素的位置下移*/

/*margin-top: 100px;*/

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。

所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉

格式：

*{

margin: 0;

padding: 0;

}

怎么用CSS设置html中的表格边框样式

一、只对表格table标签设置边框   -  TOP

只对table标签设置border（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。

案例详细如下：

1、对应css代码

style.table-a table{border:1px solid #F00} /* css注释：只对table标签设置红色边框样式 */ style

2、对应html代码片段

divclass="table-a"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"网址tdtdwidth="112"说明tdtrtrtdDIVCSS5tdtd;tdCSS学习tdtrtrtdCSS5tdtd;tdCSS切图tdtrtablediv

二、对td设置边框   -   TOP

对table表格td设置边框样式，表格对象内td将实现边框样式，但中间部分td会导致出现双边框。

详细案例教程如下：

1、对应css代码

style.table-b table td{border:1px solid #F00} /* css注释：只对table td标签设置红色边框样式 */ style

2、对应html源代码片段

divclass="table-b"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"网址tdtdwidth="112"说明tdtrtrtdDIVCSS5tdtd;tdCSS学习tdtrtrtdCSS5tdtd;tdCSS切图tdtrtable

三、对table和td技巧性设置表格边框   -   TOP

如上第二点，只对表格对象td设置单一边框样式，中间部分td与td标签之间就会出现双边框现象。

解决方法：对td只设置两个边的边框，对table也设置两个边的边框样式。

解释：对td设置左与上边框，这样td与td相邻就会只出现单一边框样式，这样就会出现表格右侧和下部没有边框，这个时候我们设置table右和下 边框解决显示右侧和下侧td剩下未显示边框。

1、对应css代码：

style.table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00} .table-c table td{border-left:1px solid #F00;border-top:1px solid #F00} /* css 注释： 只对table td设置左与上边框； 对table设置右与下边框； 为了便于截图，我们将css 注释说明换行排版 */ style

2、对应html源代码片段：

divclass="table-c"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"网址tdtdwidth="112"说明tdtrtrtdDIVCSS5tdtd;tdCSS学习tdtrtrtdCSS5tdtd;tdCSS切图tdtrtable

四、对table和td设置背景，实现完美表格边框   -   TOP

1、基础设置

1）、先设置table css背景为红色

2）、设置table单元之间间距为1

使用DW软件辅助设置table表格单元间距为1，具体DW软件可视化操作步骤简要说明，首先（视图模式）选中表格后，对应DW软件编辑窗口底部会“属性”面板会出现对应table表格属性设置地方，我们将“间隔”填写为“1”。这个时候我们会看到table表格标签里cellspacing值为“1”（cellspacing="1"）。

借助DW软件设置表格单元之间间距

或

直接对

标签内cellspacing="1"即可，得到：

tablewidth="400"border="0"cellspacing="1"cellpadding="0"

3）、设置table td背景为白色

2、css代码：

style.table-d table{ background:#F00} .table-d table td{ background:#FFF} /* css注释：设置table背景为红色，td背景为白色 */ style

3、对应html源代码：

divclass="table-d"tablewidth="400"border="0"cellspacing="1"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"网址tdtdwidth="112"说明tdtrtrtdDIVCSS5tdtd;tdCSS学习tdtrtrtdCSS5tdtd;tdCSS切图tdtrtablediv

五、css table表格边框实现总结   -  TOP

以上四种方式实现table表格边框样式方法，推荐使用第三和第四种方法来解决表格边框样式。希望DIVCSS5整理总结html table边框布局方法对大家有帮助并能掌握，平时需要时灵活运用。

css border有几种样式？

border后加三个参数：边框粗细　边框样式　边框颜色

如border:2px solid #ccc;

其中边框样式包括：none 定义无边框。solid 定义实线。dotted 定义点状边框。在大多数浏览器中呈现为实线。

dashed 定义虚线。在大多数浏览器中呈现为实线。double 定义双线。双线的宽度等于 border-width 的值。

【css】边框border的属性和使用方法

顾名思义，就是元素外面的一圈边框，下图中虚线圈起的部分是内容，外面橙色的一圈是它的边框，可以理解成在照片外面加一个相框，使用border属性。

边框样式border-style必须写！否则其它属性全部失效。

边框的样式：

border后面可跟多个值，中间用空格分离，含义如下：

注意顺序， 边框样式不可省略 ，颜色和宽度可以省略，会显示默认的效果。

——以上规律在padding和margin一样适用。

边框样式border-style必须设置

如果我们的四条边框属性都是一样的，那么统一设置就可以啦，注意边框类型不可省略。

首先我们放置一个宽高为200px的粉色盒子。

接下来我们为它加上一条宽度为10px，样式为实线，颜色为红色的边框。

我们可以看到，添加边框的时候，是在盒子外面套一圈边框，而不是加在里面，在Chrome浏览器中点击右键检查，可以看到div的大小变成了220x220。

套在外面的边框的宽度是会加进盒子尺寸的（上下左右各增加了10px），如果我们想盒子保持大小不变，要对div本身的width和height进行减小，在这个样例中，通过计算可得，减少到180px即可保持大小不变。

当我们使用点状、虚线等边框样式时，多出来的缝隙，会使用元素本身的 背景颜色 填充。

点和虚线的具体样式，不同浏览器中可能会不一样。

我们为刚刚的盒子设置上边框为红色，左边框为绿色，效果如下图所示：

我们会发现在两条边框交界处的小方块，通过一条对角线分隔，上边框和左边框各占一半。当边框不一样宽时，同样也是用对角线把交界处的小长方形一分为二，如下图所示：

当被添加边框的元素宽度为0，不设置高度（高度默认是0）的情况下，我们可以巧妙利用 边框组合 和 transparent（透明） 绘制三角形，可以体验下哦。

三角形1-css：

三角形2-css：

多彩三角形-css：

绘制梯形只要对应添加宽度或者高度就可以啦

梯形1-css：

梯形2-css：