<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素的盒模型</title>
<style>
.s1{
color: white;
background-color: tomato;
border: 5px wheat solid;
margin: 100px;/* 只影响水平布局,不影响垂直布局 */
}
.box1{
background-color: antiquewhite;
width: 200px;
height: 200px;
margin-top: 20px;
}
/*
行内元素的盒模型
行内元素不支持设置宽度和高度
行内元素可以设置padding,但是垂直方向padding不会影响页面的布局
行内元素可以设置border,垂直方向的border不回影响页面的布局
行内元素可以设置margin,垂直方向的margin不会影响布局
*/
.s2{
display: inline-block;
font-size: 20px;
color: rgb(121, 160, 156);
width: auto;
height: auto;
background-color: rgb(110, 255, 243);
border:rgb(178, 235, 230) 10px solid;
margin:20px;
/* display: none; 不显示且不占据空间
visibility: hidden;不显示,但占据空间 */
}
/*
display 用来设置元素显示的类型
可选值
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素
行内块,既可以设置宽度和高度又不会独占一行
table 将元素设置为一个表格
none 元素不再页面中显示
visibility 用来设置元素的显示状态
可选值
visible 默认值,元素在页面中正常显示
hidden 元素在页面中隐藏不显示,但是仍然占据页面的位置
*/
</style>
</head>
<body>
<span class="s1">I'm Span.</span>
<div class="box1"></div>
<br>
<br>
<span class="s2">I'm SpanTwo.</span><br><span>I'm SpanThree.</span>
</body>
</html>
运行结果: