元素分类
块元素
div、p、ul、li、dl、dt、dd、h1-h6等
样式:display:block/list-item
特点:
- 形成矩形区域,默认独占一行
- 可定义宽高
- 一般作为容器
- p:只能放文本,不能放块元素
行内(内联)元素
a、b、em、i、span、strong等
样式:display:inline
特点:
- 默认行内逐个显示
- 不能定义宽高,根据内容的宽高决定
- 遵顼盒子模型,但margin和padding个别属性不生效
行内块元素
img、input等
样式:display:inline-block
特点:
- 同时具备行内元素和块元素特点
元素类型互相转换
设置对方的display类型即可
应用:
- 取消行内元素与块元素的间隙
- 解决行内元素与块元素的重叠问题
隐藏内容
鼠标悬停设置样式更改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hide{
display:none;
}
.box:hover p{
display:block;
}
</style>
</head>
<body>
<div class="box">
显示:
<p class="hide">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nihil quis tenetur dolores, praesentium sunt est odio sequi quaerat,
quod quidem non quibusdam perferendis nulla delectus expedita! Aperiam assumenda similique dolorem?
</p>
</div>
</body>
</html>
练习:二级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.hide{
width: 400px;
margin: 0 auto;
}
.hide>li{
width: 200px;
line-height: 40px;
list-style: none;
text-align: center;
float: left;
background-color: rgb(116, 114, 206);
color: cornsilk;
}
.hide>li>ul>li{
background-color: cornsilk;
color: rgb(116, 114, 206);
list-style: none;
display: none;
}
.hide>li:hover{
background-color: rgb(194, 194, 221);
color: black;
}
.hide>li:hover ul>li{
display: block;
}
.hide>li>ul>li:hover{
background-color: rgb(194, 194, 221);
color: black;
}
</style>
</head>
<body>
<ul class="hide">
<li>
一级标题1
<ul>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
</ul>
</li>
<li>
一级标题2
<ul>
<li>222222222222</li>
<li>222222222222</li>
<li>222222222222</li>
</ul>
</li>
</ul>
</body>
</html>