一、元素类型
1、块状元素
- 独占一行,自上而下的排列。
- 可以设置宽高。不设置宽高时,宽度默认显示占满父元素的宽度,高度由内容撑开。默认值
auto
并不意味着宽度100%
。 - 块元素会严格按照盒子模型的显示规则,正确的显示
marign
,padding
,border
等属性。 - 一般会作为布局容器使用,可以容纳其他的块元素或者行内元素
- 常见的块元素:
div
,p
,h1~h6
,ul
,ol
,dl
等。
2、行内元素
- 从左至右依次排列,只有遇到
br
标签和元素边界才会换行。 - 不能设置宽高,只能靠内容撑开。
- 垂直方向占位受影响,如
margin-top/bottom
,padding-top/bottom
,border-top/bottom
都不显示。 - 行内元素与行内元素(尖括号)之间的换行符,会让两个标签之间出现一个
4px
的留白,一般情况下我们都要去除。 - 常见的行内元素:
a
,span
,i
,em
,del
,s
,ins
,sup
,sub
等。
3、行内块元素
行内块元素既有块元素的性值,又结合行内元素的性值,使用较为方便,我称之为,留有空隙且可以横排显示的盒子。
- 从左向右依次排列,只有遇到
br
标签或者元素边界才会换行。 - 可以设置宽度与高度,不设置的时候宽度与高度靠内容撑开。
- 块元素会严格按照盒子模型的显示规则,正确的显示
marign
,padding
,border
等属性。 - 行内块元素与行内元素有一样的情况,会因为标签之间的换行符出现
4px
的留白。 - 常见的行内块元素:
td
,input
,button
,textarea
,select
等。 img
是一个比较特殊的标签,虽然能够设置宽度与高度,但是类型却是为行内类型,我们把img
称为替换元素(置换元素)。
二、元素类型的转换
display
:转换元素类型。block
块元素,inline
行内元素,inline-block
行内块元素,none
不占为隐藏元素。
鼠标移入显示隐藏元素:
<head>
<style>
.box1{
width:100px;
background-color: pink;
}
.box2{
width:100%;
height:100px;
background-color: yellowgreen;
display: none;
}
.box1:hover .box2{
display: block;
}
</style>
</head>
<body>
<div class="box1">请移入鼠标
<div class="box2"></div>
</div>
</body>
效果: