html表单边框、html表格边框 收藏 0

零基础教你学前端——69-CSS 边框

我们学习如何应用CSS给元素添加边框。

CSS边框属性，允许我们指定一个元素边框的样式、宽度和颜色。

我们先来学习元素边框的样式。border-style 属性指定了要显示什么样的边框。允许使用以下的值：

dotted，定义一个点状的边框

dashed ，定义一个虚线边框

solid，定义一个实线边框

double，定义一个双倍的边框

none，定义无边框

hidden，定义一个隐藏的边框

我们来实验一下。

创建一个 009-css-borders 文件夹，在文件夹里创建一个 css-borders.html 文件和一个border-style.css 文件。

构建 html 基础代码，引入样式文件。

编写 p.dotted 回车，填入文本点状的边框。按照同样的方法，添加其他的几个边框结构。

<p>点状的边框</p>

<p>虚线边框</p>

<p>实线边框</p>

<p>双倍的边框</p>

<p>无边框</p>

<p>隐藏的边框</p>

<p>混合边框</p>

<p>速记边框</p>

在 css 里定义 p.dotted 选择器，声明样式 border-style: dotted。定义其他几个选择器，全部声明 border-style 属性，值分别为：dashed、solid、double、none、hidden。

在浏览器里查看结果，边框的效果都做好了。

border-style: none 和 border-style: hidden 视觉上都不显示边框，有什么区别呢？

在 html 里编写：table 大于 括号 tr 大于 td 乘以3 再乘以3 （table>(tr>td*3)*3）。回车，创建一个3行3列的表格。给 table 元素定义border属性，值为 1。 给第二行第一个和第二个td 定义 class属性，值分别为 lm、m。

在 css 里定义 table 选择器，声明样式 border-collapse: collapse，让表格线细一些。这个属性我们在后面会详细讲解。

定义 td.lm 选择器，声明样式 border-style: dashed。定义 td.m 选择器，声明样式 text-align: center。

看一下效果，左中和左上、中以及左下边框是相邻的，在这些单元格上定义边框样式一定会产生冲突。

给 td.m 选择器添加样式声明 border-style: none。

我们看，没有去掉任何边框。

再把 border-style 属性值改为 hidden。

我们再看，中间的 td 边框消失了，当然，左侧相邻的边框也消失了。

当表格单元格相邻边框产生冲突时，border-style: hidden 优先级最高，border-style: solid 优先级次之，border-style: none 优先级最低。

还是这个表格示例，单元格左中和中之间用点线来分隔。如何实现呢？

在 td.m 选择器里将 border-style 的值改为 dotted。

很显然，并不是我们要的效果。看来，得把单元格左中的右边线隐藏。如何控制一条边框线呢？

可以在 border-style 中间添加一个表示方位的词，就可以设置单个边框线了。

比如，给 td.lm 选择器声明 border-right-style 属性，就可以设置这个单元格右边框样式了，这里设置的值为 none。

效果实现了。

把这里的 border-right-style 的值设置为 hidden 是什么效果呢

通过这个例子发现，可以分别指定每个边框的样式。这些属性有 border-top-style、border-right-style、border-bottom-style、border-left-style，用来设置元素的上、右、下、左边框的样式。

除了单个样式属性外，border-style 的属性值，还可以使用混合的简写方法。有四种写法：

第一种写法：四个值，分别代表上边、右边、下边、左边的边框样式。从顶部开始，按照顺时针方向来设置值。比如 border-style: dotted solid double dashed，设置上边框为虚线、右边框为实线、下边框为双线、左边框为虚线。

第二种写法：三个值，分别代表上边、左右边、下边的边框样式。第一个值表示上边框的样式、第二个值表示左边和右边框的样式，第三个值表示下边框的样式。比如 border-style: dotted solid double，设置顶部边框为虚线、左右边框为实线，底部边框是双线。

第三种写法：两个值，分别表示上下边，左右边的边框样式。第一个值表示上下边框的样式、第二个值表示左右边框的样式。比如 border-style: dotted solid，设置顶部和底部的边框是点状的、右边和左边的边框是实心的。

第四种写法：一个值，表示四个边框的样式。比如 border-style: dotted，四个边都是点状边框。

在 html 里添加一个 p 元素，定义 属性。填入一些文本。

在 css 里定义 p.mix 选择器，声明样式 border-style: dotted dashed solid double。

最后一个段落的混合边框实现了。

除了设置边框样式，还可以设置边框的宽度。

border-width 属性用于设置四个边框的宽度。宽度可以被设置为一个特定的尺寸，以 px、em等为单位，或者使用三个预定义的值： thin、medium、thick——薄、中、厚。

给前三个 p 元素全部声明 border-width 样式属性，值分别为 5px，0.5em，thick。

三个段落的边框线宽度就添加好了。

和边框样式 border-style 属性一样，边框宽度的值也可以使用混合的简写方法，可以给 border-width 设置四个值、三个值、两个值或一个值。

给第四个 p 元素添加 border-width: 5px 10px; 样式。

我们看，这个边框宽度上下是 5 像素，左右是 10 像素。

再给最后一个 p 元素添加 border-width: 2px 3px 4px 5px 样式。

这样，四边不同的边框，就拥有了不同的宽度！

除了设置边框样式，还可以设置边框的颜色。

border-color 属性用于设置四个边框的颜色。可以通过颜色名称、十六进制颜色值、RGB颜色值来设置颜色，也可以通过 transparent 来设置透明。

给前三个 p 元素全部声明 border-color 样式属性，值分别为 red，#00ff00，rgb(0, 0, 255)。

三个段落的边框线颜色就添加好了。

和边框样式 border-style 属性一样，边框颜色的值也可以使用混合的简写方法，可以给 border-color 设置四个值、三个值、两个值或一个值。

给第四个 p 元素添加 border-color: purple orange 样式。

我们看，这个边框上下是紫色，左右是橙色。

再给最后一个 p 元素添加 border-color: red green blue yellow 样式。

这样，四边不同的边框，就拥有了不同的颜色！

和字体 font 属性一样，边框也可以使用速记属性。为了缩短代码，可以在一个 border 属性中指定 border-style、border-width、border-color 等单独的边框属性。比如：border: 5px solid red，表示设置元素的边框宽度为5像素，边框样式为实线，边框颜色为红色。

注意，border-style 是必须要声明的，其他两个可以省略，省略后会采用 1 像素、黑色线这两个默认值。

在 html 里添加一个 p 元素，定义 属性。填入一些文本。

在 css 里定义 p.shorthand 选择器，声明样式 border: 5px solid #ccc。

一行样式代码就实现了边框样式、宽度和颜色的设置！

这个简写的方法默认四个边，全部定义了相同的边框。能不能定义单个边呢？可以的！

很自然的猜到，通过声明 border-top，border-right，border-bottom，border-left 四个属性，值为上面简写的方式，就可以单独定义元素的某一条边了。

注释掉这行代码，再声明一个 border-bottom 属性，值同样是 5px solid #ccc。

一行代码，同样实现了一条底部的边框线

CSS 区块、方框、边框样式

3. 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(没有规定的)

上述代码就是可以实现段落首行缩进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

常用的属性:

以上转换涉及行内块元素(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。

(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;

注意：大属性要写在前面, 小属性写在后面;

比如：

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个边界值会同时设置为此值。

如果仅输入两个的值,则缺少的值会以对边的设置值进行替代。例如：

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链接的\”下划线\”的颜色

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com