文章目录
行内元素的盒模型
一、行内元素的局限性
1.行内元素不支持直接设置宽度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素的盒模型</title>
<style>
.s1{
background-color: yellow;
/*直接设置宽高*/
width: 100px;
height: 100px;
}
.box1{
background-color: #bfa;
width:200px;
height: 200px;
}
</style>
</head>
<body>
<span class="s1">我是span</span>
<div class="box1"></div>
</body>
</html>
显示如下:
2.行内元素可以设置padding,但是不会影响页面垂直布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素的盒模型</title>
<style>
.s1{
background-color: yellow;
/*设置内边距padding*/
padding:100px;
}
.box1{
background-color: #bfa;
width:200px;
height: 200px;
}
</style>
</head>
<body>
<span class="s1">我是span</span>
<div class="box1"></div>
</body>
</html>
显示如下:
3.行内元素可以设置border,但是不会影响页面垂直布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素的盒模型</title>
<style>
.s1{
background-color: yellow;
/*设置边框border*/
border:100px solid red;
}
.box1{
background-color: #bfa;
width:200px;
height: 200px;
}
</style>
</head>
<body>
<span class="s1">我是span</span>
<div class="box1"></div>
</body>
</html>
4.行内元素可以设置margin,但是不会影响页面垂直布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素的盒模型</title>
<style>
.s1{
background-color: yellow;
/*设置外边距margin*/
margin:100px;
}
.box1{
background-color: #bfa;
width:200px;
height: 200px;
}
</style>
</head>
<body>
<span class="s1">我是span</span>
<div class="box1"></div>
</body>
</html>
二、display用法
display用来设置元素显示的类型
可选值:
inline:将元素设置为行内元素
block: 将元素设置为块元素
inline-block: 将元素设置为行内块元素(不常用)
特点:既可以设置宽高又不会独占一行
table: 将元素设置为表格
node : 隐藏元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素的盒模型</title>
<style>
.s1{
background-color: yellow;
margin:100px;
}
.box1{
background-color: #bfa;
width:200px;
height: 200px;
}
a{
/*将行内元素a变成块元素*/
display: block;
background-color: orange;
width:100px;
height:100px;
}
</style>
</head>
<body>
<a href="www.jd.com">京东超链接</a>
<span class="s1">我是span</span>
<div class="box1"></div>
</body>
</html>
显示如下:
另外:
1.当display为inline时,显示如下(无法设置宽高):
2.当display为inline-block时,显示如下:(可以设置宽高,且不独占一行)
3.当display为none时,显示如下:(隐藏元素)
这里讲到隐藏,我们可以顺便说一下下面的另一个属性visibility。
三、visibility用法
visibility用来设置元素的显示状态
可选值:
visible: 默认值,元素在页面中正常显示
hidden: 元素在页面中隐藏,不显示,但是依然占据页面位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素的盒模型</title>
<style>
.s1{
background-color: yellow;
margin:100px;
}
.box1{
background-color: #bfa;
width:200px;
height: 200px;
}
a{
display: block;
visibility: hidden;
background-color: orange;
width:100px;
height:100px;
}
</style>
</head>
<body>
<a href="www.jd.com">京东超链接</a>
<span class="s1">我是span</span>
<div class="box1"></div>
</body>
</html>
显示如下:
与之前display:none相比,显然他的空间还在,只是内容看不到而已。