块元素和行内元素的区别与转换
块元素和行内元素的区别与转换在前端面试中常被问到,这里做个总结.
行内元素:
常见:<span>\<a>
行内元素又称为内联元素,在内仅容纳文本或其他行内元素;
块元素:
常见:<div>\<p>\<h>
块元素可以容纳文本,行内元素和其它块元素．
其中<span>常适应于小段文本,<div>用于长HTML
实际使用行内元素与块元素效果代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
background-color:bisque;
}
p{
background-color:pink;
}
</style>
</head>
<body>
<span>行内元素</span>zairesinatra
<p>块元素</p>zairesinatra
</body>
</html>
效果如图:
1. 块级元素:内容独占一行.块元素会在内联的方向上扩展并占据父容器在该方向上的所有可用空间.
2. 行内元素:不会产生换行.行内元素只占放置其中内容的宽度，块元素忽视内容占据全行.
设置行内元素与块元素参数代码效果如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
background-color:bisque;
width:100px;
height:100px;
margin: 30px 60px 90px 120px;
}
p{
background-color:pink;
width:100px;
height:100px;
margin: 30px 60px 90px 120px;
}
</style>
</head>
<body>
<span>行内元素</span>zairesinatra
<p>块元素</p>zairesinatra
</body>
</html>
效果如图:
3. 块元素中width 和 height 属性可以发挥作用.内边距(padding)外边距(margin)和边框(border)起效.
4. 行内元素width 和 height 属性将不起作用.
5. 行内元素垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开.
6. 行内元素水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开.
块元素与行内元素转化:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
display:block;
background-color:bisque;
width:100px;
height:100px;
margin: 30px 60px 90px 120px;
}
p{
background-color:pink;
width:100px;
height:100px;
margin: 30px 60px 90px 120px;
}
</style>
</head>
<body>
<span>行内元素</span>zairesinatra
<p>块元素</p>zairesinatra
</body>
</html>
行内元素转化块元素效果如图:
块元素转化行内元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
background-color:bisque;
width:100px;
height:100px;
margin: 30px 60px 90px 120px;
}
p{
display:inline;
background-color:pink;
width:100px;
height:100px;
margin: 30px 60px 90px 120px;
}
</style>
</head>
<body>
<span>行内元素</span>zairesinatra
<p>块元素</p>zairesinatra
</body>
</html>
块元素转化为行内元素效果如图:
行内元素转换为块元素-display:block;
块元素转换为行内元素-display:inline.
2万+
