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;