单标签和双标签的区别
单标签是⼀种⾃闭合的标签, 不能嵌套其他标签或⽂本,例如< 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;