7月18日

单标签和双标签的区别

单标签是⼀种⾃闭合的标签, 不能嵌套其他标签或⽂本,例如< img/> 是典型单标签
双标签有开始标签合结束标签, 中间可以嵌套其他标签或⽂本,例如< div>< /div>是典型双标签

定义
单标签:由一个标签组成。例如< hr/> < input>等。
双标签:由“开始标签”和“结束标签”两部分构成。例如< p>< /p> < button>< /button>等。
< p>是开始标签,表示一个段落的开始。
< /p>是结束标签,表示一个段落的结束。

区别

单标签:是由一个标签组成,例如用< hr/>结尾,是一种简写,内容简单的如只有一个属性的可以单标

< img/>

<img src="图1.png" alt="error"/>

在这里插入图片描述

双标签:用< /p>结尾,双标签可以替换所有的单标签,内容简单的如只有一个属性的可以用单标签,提高可阅读性;

<标签的名字 属性=“属性值” 属性=“属性值”></标签的名字>

内容比较多,使用双标签,可以在标签中嵌套其他内容,而单标签就不能。

定位的几种方法
position:
static
relative:相对定位,相对于元素⾃身位置进⾏定位
relative:相对定位,相对于元素⾃身位置进⾏定位 可以通过"left", “top”, “right” 以及 "bottom"属性移动元素
absolute:以第⼀个⽗元素进⾏定位
fixed:相对于浏览器视⼝进⾏定位






实现居中几种方式

内容居中:
1.普通文本属性test-align和行高属性line-height(只适用于单行文本)
在这里插入图片描述

text-align: center;
line-height: 100px;

在这里插入图片描述



2.使用内边距padding(如果与其他元素冲突,要用对方的外边距来抵消)

.c3{
    background-color: blue;
    width: 40px;
    padding: 40px;
}

在这里插入图片描述

.c2{
            background-color: orange;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            margin-bottom: 100px;

在这里插入图片描述




3.使用flex容器,设置justify-content和align-items

display: flex;
justify-content: center;
align-items: center;



盒子居中:
1.使用margin外边距实现(只能实现盒子在父元素中水平居中)

margin: 0px auto;

在这里插入图片描述



2.使用相对定位position: relative + left:50% 组合 transform:translateX(-50%);
top:50% 组合 transform:translateY(-50%);
同时出现translateX和translateY要写在一起

position: relative;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);

在这里插入图片描述



3.给父元素使用flex容器实现,设置justify-content和align-items

display: flex;
justify-content: center;
align-items: center;

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值