生僻标签 fieldset 与 legend 的用法详解
我要评论谈到<fieldset>与<legend>，大部分人肯定会比较陌生，在 HTML 标签中，属于比较少用的那一批。
我最早知道这两个标签，是在早年学习 reset.css 或者 normalize.css 时，在这些重置统一代码默认样式的 CSS 中看到的。最近因为研究边框，遇到了这两个标签，发现它们还是很有意思的，遂起一篇，将整理的一些知识点分享给大家。
了解<fieldset>与<legend>
通常而言，<fieldset>与<legend>比较常用在表单当中。
<fieldset>：HTML<fieldset>元素用于对表单中的控制元素进行分组<legend>：在<fieldset>中内置了一个<legend>元素作为 fieldset 的标题
简单而言，fieldset可以单独使用，对表单的元素进行分组，而legend则需要和fieldset配套使用，成对出现，作为分组的标题。
看个简单的例子，简单的 HTML 及结构如下：
<fieldset>
<legend>Form</legend>
<div>
<label>Name :</label><input type="text" placeholder="input Name" />
</div>
<div>
<label>Password :</label><input type="text" placeholder="input Name" />
</div>
</fieldset>
fieldset {
border: 1px solid#ddd;
padding: 12px;
}
legend {
font-size: 18px;
padding: 0 10px;
}
效果如下：
CodePen Demo -- fieldset & legend Demo
比较有意思的点在于，如果给fieldset设置了border边框，则legend元素内的内容则会作为分组的标题，嵌入border内。
控制legend的位置及样式
对于legend的位置和样式，是可以进行控制的。
对于位置，我们可以通过margin和 父元素的padding进行控制，如果父元素fieldset不设置padding，legend不设置 margin ，则legend默认定位在最左侧。
fieldset {
border: 1px solid#ddd;
// padding: 12px;
}
legend {
font-size: 18px;
}
效果图：
通过改变legend的margin或者父元素的padding-left，可以控制标题的初始位置：
fieldset {
border: 1px groove #ddd;
}
legend {
animation: marginMove 10s infinite alternate;
}
@keyframes marginMove {
100% {
margin-left: 100px;
}
}
效果图：
通过控制legend的padding，可以增加周围元素的区域，让留白更多一点。
应用场景 -- 标题两侧横线
了解了上述基本知识后，我们就可以稍微开始深入，想一想，上述<fieldset>与<legend>的一些有意思的应用场景。
最适合的场景我觉得应该就是标题两侧带横线的布局了。类似这样：
当然，这个布局的解决方式有很多，通常会使用伪元素来生成左右两侧的横线，或者是通过绝对定位局部进行覆盖叠加。
这里，使用<fieldset>与<legend>非常快速的完成：
<div class="g-container">
<fieldset><legend>排行榜</legend></fieldset>
</div>
fieldset {
width: 300px;
height: 24px;
border: 1px solid transparent;
border-top-color: #000;
}
legend{
margin: auto;
padding: 0 10px;
}
fieldset只设置上边框，通过margin: auto将标题定位到中间， 通过padding控制两侧的留白。非常的完美。
CodePen Demo -- fieldset & legend Demo 2
边框嵌套文字
在这篇文章中 --How to Add Text in Borders Using Basic HTML Elements，还介绍了一种非常有意思的使用场景，在边框中嵌套文字。
想象一下，一个<fieldset>元素配合一个<legend>元素，可以生成一个边框嵌文字的效果，那么，将多组组合，再进行定位排布，就可以生成多边边框嵌套文字的效果了。
伪代码如下：
<div class="g-container">
<fieldset><legend>CSS fieldset</legend></fieldset>
<fieldset><legend>HTML element</legend></fieldset>
<fieldset><legend>JavaScript</legend></fieldset>
<fieldset><legend>TypeScript</legend></fieldset>
</div>
.g-container {
position: relative;
width: 300px;
height: 300px;
}
fieldset{
position: absolute;
width: 300px;
height: 300px;
border: 10px solid transparent;
border-top-color: #000;
}
legend{
padding: 0 10px;
}
fieldset:nth-of-type(2){ transform: rotate(90deg); }
fieldset:nth-of-type(3){ transform: rotate(180deg); }
fieldset:nth-of-type(3)>legend{ transform: rotate(180deg); }
fieldset:nth-of-type(4){ transform: rotate(-90deg); }
效果图如下：
通过多个<fieldset>和<legend>的组合，我们可以拼出一个容器的 4 个边，组成一个非常好看的边框嵌文字效果。
通过给legend加上animation，让文字动起来
legend{
animation: move 3s infinite linear alternate;
}
@keyframes move {
100% {
margin-left: 70px;
}
}
CodePen Demo -- Border Text Design using HTML fieldset and legend
好，基于这个，我们就可以去生成各种 N 边形边框嵌文字的边框了。下面是简单的尝试 几种多边形边框。
CodePen Demo -- fieldset and legend generate polygon
到此这篇关于生僻标签 fieldset 与 legend 的用法详解的文章就介绍到这了,更多相关fieldset 与 legend 标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了使用CSS+HTML实现简单的魔幻霓虹灯文字特效,CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样2023-05-08
CSS梯形导航图是一种使用 CSS 布局实现的导航设计,可以根据需要灵活调整导航菜单的上下位置和大小，本文主要介绍了css实现电梯导航，具有一定的参考价值，感兴趣的可以了解2023-05-06
本文主要介绍了CSS中calc(100%-100px)不加空格不生效，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2023-05-05
本文主要介绍了css弧边选项卡的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
Css(层叠样式表)是种格式化网页的标准方式，用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术,使用css可以制作各种好看的动画特效,2023-05-04- CSS的link和@import都是用于引入外部CSS文件的方法，但它们有一些区别和不同的用法，本文通过一个简单的代码演示，展示了link和@import的用法，感兴趣的朋友跟随小编一起看2023-05-04
这篇文章主要介绍了使用CSS实现百叶窗效果示例代码,技术上只使用了css+html,还是非常容易学习的，做出来的百叶窗效果也是很丝滑，文中提供了详细的代码,需要的朋友可以参考2023-04-28
这篇文章主要介绍了使用CSS实现按钮边缘跑马灯动画,技术上只使用了css+html,还是非常容易学习的，文中提供了详细的代码,需要的朋友可以参考下2023-04-28
本文主要介绍了css旋转导航的示例代码，文中通过示例代码介绍的非常详细，该导航可用在一些网站首页导航栏中，需要的朋友们下面随着小编来一起学习学习吧2023-04-27
这篇文章将介绍如何使用CSS实现交融文字效果，这是一种独特的标题设计，可以增加页面的视觉吸引力和用户体验。通过使用CSS的letter-spacing属性，我们可以创建出字母之间交2023-04-27
最新评论