1.标签的显示模式
1.块级标签/元素(block):
特点:
1.独占一行
2.宽度默认是父元素的宽度,高度默认由内容撑开
3.可以设置宽高
p div h1 - h6 header footer nav section
2.行内元素(inline)
特点:
1.一行可以排列多个
2.不能设置宽高
3.宽度和高度默认由内容撑开
span b strong i em s del font a
3.行内块元素(inline-block)
特点:
1.一行可以排列多个
2.可以设置宽高
input textarea select
2.显示模式的转换
<style>
/* 浏览器在识别行内元素和行内块元素的时候,把他们当做文字来识别 */
div{
width: 200px;
height: 200px;
background-color: plum;
/* 转换行内块 */
display: inline-block;
}
p{
width: 100px;
height: 100px;
background-color: aqua;
/* 转行内元素 */
display: inline;
}
span{
width: 200px;
height: 200px;
background-color: orange;
/* 转块级元素 */
display: block;
}
</style>
3.标签的嵌套规则
<body>
<!-- 1.p标签中不能嵌套块级标签,能嵌套行内和行内块元素 -->
<p>
<!-- <p></p> -->
<!-- <div></div> -->
<!-- <h1></h1> -->
<!-- <span></span> -->
<input type="text">
</p>
<!-- 2.a标签里面可以嵌套任何标签,除了它自己 -->
<a href="#">
<!-- <div></div> -->
<!-- <input type="text"> -->
<!-- <img src="" alt=""> -->
<a href="#"></a>
</a>
<!-- 3.块级标签里面一般嵌套行内和行内块元素 -->
<div>
<span></span>
<input type="text">
</div>
<h1>
<span></span>
<input type="text">
</h1>
<ul>
<li><span></span></li>
</ul>
<!-- 4.行内元素里面只能嵌套行内元素 -->
<span>
<b>
<i>
<u>
<s>你好世界</s>
</u>
</i>
</b>
</span>
4.二级菜单(鼠标划入之前隐藏,划入后显示)
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.list_box{
width: 500px;
height: 50px;
background-color: pink;
/* list-style: none; */
}
.list_box>li{
float: left;
width: 20%;
height: 100%;
text-align: center;
line-height: 50px;
}
.list_box>li:hover{
background-color: aqua;
}
.list_box ul{
background-color: gray;
display: none;
}
.list_box>li:hover>ul{
display: block;
}
</style>
5.定位
1.相对定位:
特点:
1.配合方向词移动,相对方向的方向词同时出现,优先执行left top
2.相对自身原本位置进行移动
3.占有原本位置,没有脱标(保持自身原本的显示特点)
使用场景: 让标签小范围移动,微调
2.绝对定位
特点:
1.在页面中不占位置,脱标
2.配合方向词移动(相对方向的方向词同时出现,优先执行left top)
3.默认参照浏览器的可视区域移动
应用场景: 标签之间的叠放(配合相对定位实现对应效果)
绝对定位:拼爹型的定位,绝对定位默认参照浏览器可视区域移动,如果父级身上有定位,那么参 照最近的有定位的父级移动
显示的优先级:标准流<浮动<定位