块元素(block element)
A)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域
,
B)默认情况下,块状元素都会占据一行; 默认情况下,块状元素会按顺序自上而下
排列。
C)块状元素都可以定义自己的宽度和高度
。
D)块状元素一般都作为其他元素的容器
,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子
例如: div p ulli ol lidl dt dd h1-h6
等
举个列子
<!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>
div{
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
行内(内联)元素
A)内联元素的表现形式是始终以行内逐个进行显示;横着排
B)内联元素没有自己的形状,不能定义它的宽和高
,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;
C)内联元素也会遵循盒模型基本规则,但是对于margin和padding个别属性值不生效
例如: a b em i span strong
等
举个列子
b标签的宽高没效果
<!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>
b{
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<b>111</b>
<em>222</em>
<span>333</span>
</body>
</html>
行内块元素
内联块状元素(inline-block) 就是同时具备内联元素、块状元素的特点
例如: img input
等行内块元素
盒子模型
行内元素
只能设置边距的左右边距,不能设置上下边距(列如span)
元素类型互相转换
<!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 ul{
display: block;
}
</style>
</head>
<body>
<div class="box">
军事
<ul class="hide">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</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>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
margin: 0 auto;
}
ul{
list-style: none;
}
.box .item{
float: left;
width: 148px;
text-align: center;
border: 1px solid blue;
background-color: blue;
color: white;
line-height: 40px;
}
.item:hover{
background-color: lightblue;
}
.item ul{
display: none;
background: white;
color: black;
}
.item:hover ul{
display: block;
}
.item li:hover{
color:red;
}
</style>
</head>
<body>
<ul class="box">
<li class="item">视频教程
<ul>
<li>全部视频教程</li>
<li>html5视频教程</li>
<li>python视频教程</li>
<li>Java视频教程</li>
</ul>
</li>
<li class="item">认证考试
<ul>
<li>111</li>
<li>222</li>
</ul>
</li>
</ul>
</body>
</html>