第三周、1.divider组件

最新推荐文章于 2025-03-18 22:10:15 发布

花开富贵

最新推荐文章于 2025-03-18 22:10:15 发布

阅读量255

点赞数

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/cxy2002cxy/article/details/124903240

版权

本文详细介绍了一种用于内容分隔的组件，包括其样式属性如margin、color、stroke-width等的设置，以及如何配合flex布局在列表和界面布局中应用。展示了实例代码，帮助开发者理解和运用这种组件进行高效的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。

样式

仅支持如下样式：

名称	类型	默认值	必填	描述
margin	<length>	0	否	使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
margin-[left\|top\|right\|bottom]	<length>	0	否	使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。
color	<color>	手机：#08000000 智慧屏、智能穿戴：#33ffffff	否	设置分割线颜色。
stroke-width	<length>	1	否	设置分割线宽度。
display	string	flex	否	确定分割线所产生的框的类型。值flex/none，默认值flex。
visibility	string	visible	否	是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。
line-cap	string	butt	否	设置分割线条的端点样式，默认为butt，可选值为： butt：分割线两端为平行线； round：分割线两端额外添加半圆； square：分割线两端额外添加半方形；说明 round和square会额外增加一个线宽的分割线长度。
flex	number	-	否	规定了分割线如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。说明仅父容器为<div>、<list-item>、<tabs>时生效。
flex-grow	number	0	否	设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数。0为不伸展。说明仅父容器为<div>、<list-item>、<tabs>时生效。
flex-shrink	number	1	否	设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。说明仅父容器为<div>、<list-item>、<tabs>时生效。
flex-basis	<length>	-	否	设置分割线在主轴方向上的初始大小。说明仅父容器为<div>、<list-item>、<tabs>时生效。

事件

不支持。

方法

不支持。

事例

.container {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.div1 {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#div3 {
    width: 100%;
    height: 808.992974238876px;
    flex-direction: column;
}

#image3 {
    width: 100%;
    height: 100%;
}

#div2 {
    width: 100%;
    height: 100%;
    position: fixed;
    flex-direction: column;
}
.form-text {
    left: 10%;
    top: 80px;
    font-size: 40px;
    color: black;
    flex-direction: column;
}

.row1{
    right:15px;
    width: 100%;
    margin-top: 5px;
    flex-direction: row;
    top:100px;
    font-size: 16px;
}

.row2{
    right:15px;
    width: 100%;
    margin-top: 18px;
    flex-direction: row;
    top:100px;
    font-size: 16px;
}

.row3{
    right:15px;
    width: 100%;
    margin-top: 5px;
    flex-direction: row;
    top:100px;
    font-size: 16px;
}

.label{
    font-size: 16px;
    width: 120px;
    text-align:right;
    right: 10px;

}

.iput-block{
    width:100%;
}

.input-block-3{
    font-size: 15px;
    width: 100%;
    margin-left: 50px;
}

.input{
    width: 90%;
}

.input-block-2{
    top:100px;
    width: 100%;
    margin-left: 150px;
}

.image{
    width: 100%;
    height: 100%;
}

.button{
    font-size: 18px;
}