整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
节我们来学习边框样式，主要包括如何设置边框的宽度、边框的颜色、边框的样式等。当我们给某个元素设置边框时，可以分为上下左右四个边框，既可以同时设置四个边框的样式，也可以分开设置四个边框的样式。
关于边框样式的四个属性：
border-width 属性用于设置边框的宽度，也就是边框的粗细。
常用属性值如下所示：
我们一般会使用 length 作为 border-width 属性的属性值，即设置边框的粗细为多少像素，例如 1px、2px、3px 等。border-width 属性可以同时为所有边框设置宽度，也可以单独地为每个边框设置宽度。
示例：
为上、右、下、左四个边框分别设置边框粗细：
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
根据简写属性 border-width，我们也可以直接写成：
border-width:1px 2px 3px 4px;
记住在简写时，为边框设置宽度的顺序为 上、右、下、左，是顺时针顺序。
而当元素的上下边框或左边框的宽度一致时，也可以使用简写，例如上下边框为1px、左右边框为2px，可以写成：
border-width:1px 2px;
border-style 属性用于设置元素的边框样式。和 border-width 一样，可以同时为四个边框设置边框样式，也可以分别为每个边框单独设置边框样式。
border-style 的属性值有很多个，但是在实际网页制作中，常用属性值有下面四种：
示例：
例如设置上、右、下、左的边框样式为实线、虚线、实线、虚线：
border-top-style:solid;
border-right-style:dashed;
border-bottom-style:solid;
border-left-style:dashed;
可以简写成：
border-style: solid dashed solid dashed;
当元素的上下边框和左右边框样式一致时，也可以写成：
border-style: solid dashed;
border-color 属性可以用于设置边框颜色。属性值可以是任何合法的颜色值，例如颜色名、十六进制颜色值、RGB颜色值等。
border-color 属性同样可以同时设置四个边框的颜色，也可以单独设置四条边框的颜色。
例如设置上、右、下、左边框颜色为红黄蓝绿：
border-top-color:red;
border-right-color:yellow;
border-bottom-color:blue;
border-left-color:green;
可以简写为：
border-color:red yellow blue green;
上面我们讲了 border-width、border-style、border-color 三个属性，但是其实我们在实际应用中，一般不会单独来设置边框宽度或者颜色等，而是直接使用通过 border 简写属性来设置所有的边框属性。
border 属性可以直接设置所有边框的样式，如果要单独设置每个边框的样式则可以使用 border-top、border-right、border-bottom、border-left。
将下面这个<div> 标签的边框设置成 3像素、虚线、紫色：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div>设置一个边框</div>
</body>
</html>
CSS 样式代码：
div{
width: 100px;
height: 100px;
border:3px dashed purple;
}
在浏览器中的演示效果：
链接：https://www.9xkd.com/
次，我们来讲解应用 CSS 来装饰表格。
如何制作一个表格，我们在HTML课程中已经学习过了。现在，我们通过样式，让表格变得更加美观易用。
首先来学习如何定义表格边框。
要在CSS中指定表格的边框，可以使用 border 属性。我们来举个例子。
创建 tables.html 文件和 tables-style.css 文件。在 html 里构建基础代码，引入外部样式。
在 body 里编写 emmet 命令：table>(tr>th*2)+(tr>td*2)*3，填入一些文本。
HTML
<table>
<tr>
<th>千锋名师</th>
<th>最新作品</th>
</tr>
<tr>
<td>浠浠呀</td>
<td>《HTML+CSS前端入门》</td>
</tr>
<tr>
<td>陆荣涛</td>
<td>《Vite学习指南》</td>
</tr>
<tr>
<td>Kerwin</td>
<td>《Vue2+Vue3全套教程》</td>
</tr>
</table>在浏览器里预览效果：表格的结构有了，还没有边框。大家还记得如何通过 html 属性定义边框吗？可以评论上告诉我。
现在，我们通过样式来给表格添加边框。定义群组选择器 table, th, td，声明样式：border: 1px solid。
再看效果，表格线出现了，可是外观上看，线条有点粗。是因为 table、th和td元素都有独立的边框。
CSS
table, th, td {
border: 1px solid;
}可以应用 border-collapse 属性，把表格的边框折叠成一个单一的边框。
回到 CSS，再给 table 元素声明样式：border-collapse: collapse。
此时，表格线变细了。
CSS
table {
border-collapse: collapse;
}当前表格看起来很小，如果我们需要一个横跨整个屏幕的表格，该如何实现呢？
回到CSS，再给 table 添加样式 width: 100%。
再看一下效果，表格横向撑满了整个屏幕。
接下来，我们来定义表格的宽度和高度。
width 和 height 属性用来定义表格的宽度和高度。我们来实验一下。
将 table 的 width 属性修改为 50%，再给 th 声明样式 height: 70px。
我们看，表格宽度缩小了一半，同时表头的高度也变大到 70px 了。
接下来，我们来设置表格的对齐方式。
text-align 属性用来设置 th 或 td 中内容的水平对齐方式，如居左、居右或居中对齐。默认情况下，th 元素的内容是居中对齐的，td 元素的内容是左对齐的。要使 td 元素的内容也居中对齐，可以使用text-align: center。举个例子：
回到CSS，给 td 添加样式：text-align: center。
此时，全部 td 里的内容在单元格里水平居中显示了。
要使内容左对齐，可以使用 text-align: left 属性。
比如将 th 元素的对齐方式改为左对齐。
CSS
th {
height: 70px;
text-align: left;
}vertical-align 属性用来设置 th 或 td 中内容的垂直对齐方式。如顶部对齐、底部对齐或中间对齐。默认情况下，对于 th 和 td 元素，表格中内容的垂直对齐方式是中间对齐。举个例子：
回到 CSS，给 td 添加样式：height: 50px，vertical-align: bottom。
我们看， td 单元格里的内容垂直底部对齐了。
接下来，给表格添加内填充、水平分隔线、鼠标滑过高亮及颜色等样式。
要控制表格中边框和内容之间的空间，可以给 td 和 th 元素设置 padding 属性。
回到 CSS，先注释掉 th 和 td 的样式。定义选择器 th, td，声明样式：padding: 15px，text-align: left。
CSS
th, td {
padding: 15px;
text-align: left;
}看一下效果，内容和边框线之间就具有了 15px 的填充。
接下来通过给 th 和 td 添加 border-bottom 属性，实现表格的水平分隔线效果。
注释掉原有的 border 属性，给 th 和 td 添加样式：border-bottom: 1px solid #ddd。
CSS
table, th, td {
/* border: 1px solid; */
}
th, td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}我们看，水平分隔线的表格效果就实现了。
在 tr 上使用 :hover 选择器，在鼠标移过时突出显示表格的行。
回到CSS，定义选择器 tr:hover，声明样式：background-color: coral。kerou
当鼠标滑过每一行时，当前行就高亮显示了。
我们也可以专门给某一行添加背景色，比如给 th 添加一个绿色背景。
再单独给 th 定义样式：background-color: #04AA6D，color: white;
CSS
th {
background-color: #04AA6D;
color: white;
}这样，通过给 th 添加背景色，使表头的显示更加醒目了。
本文配套教程链：https://www.bilibili.com/video/BV1oU4y1278g?p=101
. block(区块)
block面板主要是设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等。
(1)word-spacing：设置单词之间的间距。可以设置负值。
默认值:normal
(2)letter-spacing：设置字符之间的间距。可以指定负值。因为中文也是字符, 这个参数可以设置文字间的间距。
默认值:normal
(3)vertical-align：指定元素的垂直对齐方式。针对<td>表格设置垂直对齐方法,但是对<div>设置无效,可以将display属性设置为table-cell值;
可以指定sub(下标)、super(上标)、top(与顶端对齐)、middle(居中)、bottom(与底端对齐)等。适用于行内块元素 img、input、td等
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
默认值: baseline
(4)text-align：设置文本的排列方式(适用于行内元素和行内块元素, 如 a、span、input、img、label等元素)。left(左对齐)、right(右对齐)、center(居中)、justify(两端对齐)。也可用于<hr/>下划线对齐方式
默认值： 如果 direction 属性是 ltr, 则默认值是 left；如果 direction 是 rtl，则为 right。(关于CSS direction 属性看下面的内容介绍)
text-align 和margin auto 区别
text-align 可以让块级元素里面的文字内容居中对齐.
文字内容==(图片 input 行内元素 行内块元素)
但是对于里面的块级元素无效
让一个块级元素居中对齐 ： margin:0 auto;
(5)text-indent：设置文本第一行的缩进值。负值用于将文本第一行向外拉, 主要给<p>设置首行。
要在每段前空两格,可设置为2em，因为em是当前字体尺寸，2em就是两个字的大小。
默认值： not specified(没有规定的)
p{font-size:12px;text-indent:2em;}上述代码就是可以实现段落首行缩进24px(也就是两个字体大小的距离)。
(6)white-space：设置如何处理元素内的空白符。有三个选项可选：
normal 会将空白符全部压缩；
pre 则会如同处理pre标签内的文本一样处理这些空白符,也就是说，所有的空白符，包括空格，标签，回车，等都会得以保留；
nowrap 指定文本只有遇到br标签时才换行。
默认值: normal
(7)display: none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认值。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>)，表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>)，表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。
默认值： inline
常用的属性:
display:none; //隐藏
display:block //显示(将行内元素转换为块元素)
dispaly:inline //将块元素转换行内元素
dispaly:inline-block //将块元素转换为行内块元素
display:table-cell; //此元素会作为一个表格单元格显示(类似 <td> 和 <th>) 用于多行文本、块元素垂直居中以上转换涉及行内块元素(img、input)转换;
经过大量的测试证明：属性display是不能用于转换行内块元素(img、input)
同义词: 内联元素(行内元素)
4. box(方框或盒子) 主要针对图片、表格、层、段落(p)、标题(h1-h6)等
box面板主要设置对象的边界、间距、高度、宽度、和漂浮方式等。
(1)width：定义元素的宽。
默认值:auto
(2)height：定义元素的高。
默认值:auto
以上width、height属性如果是针对div标签设置css样式，则与定位设置窗口width、height属性一致(Dreamweaver会自动填充数据)
在父元素和子元素都设置了高度和宽度的情况下：
如果子元素的宽度超出了它的父元素的宽度, 则会父元素不会限制其显示宽度;
如果子元素的高度超出了它的父元素的高度, 则会父元素不会限制其显示高度;
(3)float：定义元素的漂浮方式。left 表示对象浮在左边、right表示对象浮在右边、none 表示对象不浮动。
默认值:none
一个span标签不需要转成块级元素, 就能够设置宽度、高度了。所以能够证明一件事儿, 就是所有标签已经不区分行内、块了。
也就是说, 一旦一个元素浮动了, 那么, 将能够并排了, 并且能够设置宽高了。无论它原来是个div还是个span。
span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
(4)clear：不允许元素的漂浮，相对于前一个<div>设置浮动时，下一个有清除设置的元素就会移到它的下面。
left表示不允许左边有浮动对象 right表示不允许右边有浮动对象
none 表示允许两边都可以有浮动对象 both 不允许有浮动对象。
默认值:none
浮动的主要作用是将块元素排在同一行(span也可以设置浮动);
浮动元素它会向左或者向右进行浮动, 所谓浮动可以理解"飘";
浮动元素向它遇到父元素的边框就停止浮动;
浮动元素的层级会比普通元素要高, 并且它不会再占用原有的高度;
浮动元素只会影响后面的元素, 不会影响前面的元素：
浮动元素的后面的元素(可能是一个也可能是多个元素受到影响)也会继承浮动元素的特性, 它也会浮动了要解决这个问题有两办法;
第一个：需要清除浮动
第二个：给父元素设置一个高度(子元素都设置了height高度条件下), 不建议使用
清除浮动后它不会影响到它后面的元素, 父元素会将所有的浮动元素包围者
当然浮动元素对后面的元素的影响可以做首字母方法, 图文混排(文字环绕图片)等特效；
(5)padding：定义元素内容与其边框的空距(如果元素没有边框就是指页边的空白)。
可以分别设置分别设置上、右、下、左内边距。
padding-top
padding-right
padding-bottom
padding-left
p {padding:20px} 设置设置上、右、下、左内边距都为20px
p {margin: 20px 30px 30px 20px;} 设置padding-top padding-right padding-bottom padding-left分别为20px 30px 30px 20px
默认值：0。
要懂得, 用小属性层叠大属性：
padding: 20px;
padding-left: 30px;
注意：大属性要写在前面, 小属性写在后面;
比如：
div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding:40px 50px 60px;
padding-bottom: 30px;
border: 1px solid #000;
}padding-left:10px和padding-right:20px没用, 因为后面的padding大属性, 层叠覆盖了。
(6)margin：定义元素的边框与其他元素之间的距离(如果没有边框就是指内容之间的距离)。
可以分别设置上边界、右边界、下边界、左边界的值。
margin-top
margin-right
margin-bottom
margin-left
p {margin:20px}
p {margin:10px 0px 15px 5px;}
默认值：0
marign：上边界值 右边界值 下边界值 左边界值
margin属性值必须按照上面顺序进行排列,以空格分开。如果仅输入一个值,则4个边界值会同时设置为此值。
如果仅输入两个的值,则缺少的值会以对边的设置值进行替代。例如：
div{margin:5px 10px 15px 20px} /*上=5px,右=10px,下=15px,左=20px*/
div{margin:5px} /*上=5px,右=5px,下=5px,左=5px*/
div{margin:5px 10px} /*上=5px,右=10px,下=5px,左=10px*/
div{margin:5px 10px 15px} /*上=5px,右=10px,下=15px,左=10px*/
5. border(边框) 针对段落(p标签)、图片、表格、标题(h1-h6)、form、input等(几乎所有的元素都可以设置边框)
border面板可以设置对象边框的宽度、颜色及样式。
(1)border-width：设置元素边的宽度。可以分别设定top(上边宽)、right(右边宽)、bottom(下边宽)、left(左边宽)的值。
border-top-width border-right-width border-bottom-width border-left-width
thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 允许您自定义边框的宽度。
inherit 规定应该从父元素继承边框宽度。
默认值: medium
(2)border-color：设置边框的颜色。你可以分别对每条边设置颜色。
注意：我们可以通过设置不同的颜色做出亮边和暗边的效果，这样元素看起来是立体的。
border-top-color border-right-color border-bottom-color border-left-color
默认值: not specified(未规定的)
(3)border-style：设置边框样式。
border-top-style border-right-style border-bottom-style border-left-style
可以设置为none(无边框)、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、
groove(凹槽,3D凹线)、ridge(凸槽,3D凸线)、inset(凹边,3D嵌入线)、outset(凸边,3D浮出线)等边框样式。
默认值:none(无边框)
推荐：表单输入框：inset(凹边) 按钮：outset(凸边)
兼容性问题
比如, border:10px ridge red; 在chrome和firefox、IE中有细微差别：
如果公司里面的设计师, 处女座的, 追求极高的页面还原度, 那么不能使用css来制作边框。
就要用到图片, 就要切图了。所以, 比较稳定的就几个：solid、dashed、dotted, 其他的边框样式尽量不要用。
border可以没有： border: none;
某一条边没有： border-left: none;
也可以调整左边边框的宽度为0px： border-left-width: 0px;
注意：border-bottom-style：可以修改a链接的"下划线"的风格
border-bottom-width：可以修改a链接的"下划线"的宽度(粗细)
border-bottom-color：可以修改a链接的"下划线"的颜色
*请认真填写需求信息，我们会在24小时内与您取得联系。
