行内元素的盒模型
从这几点分析：内容区、内边距 、边框 、外边距
? ? ? ? 1: 不能设置width和height，被内容撑开
? ? ? ? 2: 可以设置padding，但垂直方向padding不会影响页面的布局，不会挤别人
? ? ? ? 3: 可以设置边框，但是垂直的边框不会影响到页面的布局，不会挤别人
? ? ? ? 4: 可以设置水平方向的外边距，水平方向的相邻外边距不会重叠，而是求和，但不支持垂直外边距
display 用来设置元素显示的类型
? ? ? ? 可选值：
? ? ? ? ? ? ? ? inline 将元素设置为行内元素
? ? ? ? ? ? ? ? block 将元素设置为块元素
? ? ? ? ? ? ? ? inline-block 行内块块元素（即可以设置宽高，又不会独占一行）
? ? ? ? ? ? ? ? table 将元素设置为一个表格
? ? ? ? ? ? ? ? none 元素不在页面中显示（隐藏一个元素）
visibility 用来设置元素的显示状态
? ? ? ? 可选值：
? ? ? ? ? ? ? ? visible 默认值 元素在页面中正常显示
? ? ? ? ? ? ? ? hidden 元素不在页面中显示（隐藏一个元素），位置依然保留
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.s1{
background-color: indianred;
/* width: 200px;
height: 200px; */
/* padding: 30px; */
/* border: 10px blue solid; */
margin: 50px;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
/* 会挤别人，影响布局*/
/* padding: 30px;
border: 10px blue solid; */
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
}
/* 需求：给超链接设置一个大小100px的大小宽高 */
.a1{
width: 100px;
height: 100px;
background-color: yellowgreen;
/* display: block; */
/* visibility: hidden; */
display: none;
}
</style>
</head>
<body>
<!-- 行内元素盒子例子 -->
<span class="s1">我是一个span--s1</span>
<span class="s1">我是一个span--s1</span>
<!-- 对比块元素盒模型 -->
<div class="box1"></div>
<div class="box2"></div>
<!-- 行内元素转块元素 -->
<a href="##" class="a1">超链接</a>
<a href="##">超链接2</a>
</body>
</html>