CSS 间距
内边距：元素距离元素内部的间离
<div>你好</div>
--------------------------
<style>
div{
width:200px;
height:200px；
background:red；
padding-top:22px； 文字距离顶部产生距离
padding-left:30px 文字距离左侧边框有距离
}
</style>
注意：padding会改变元素的实际大小，
可以直接padding：30px 30px 39px 30px 。改变元素大小，对应是上，右，下，左。顺时针方向。
padding：22px 33px。两个元素时候，第一个元素代表上下对边。第二个代表左右对边。
padding：30px。一个元素的时候，代表四边都是30px。
外间距：元素距离周围元素的间距
<div class= “ggg”></div>
<div class= “hhh”></div>
-----------------------让ggg和hhh的上下相隔20px
<style>
div{
width:200px;
height:200px;
.ggg{
background:red
margin-bottom：20px 代表底部距离周围元素有20px
margin-left：20px 距离左边框20px，设置右边没有效果，因为右边没有元素}
.hhh{
background:green}
</style>
注意，margin：20px 30px 33px 22px 不改变元素大小，对应是上，右，下，左。顺时针方向。当两个元素时候；一个元素时候和padding一样。
相关技巧：
设置水平居中 margin：0 auto
设置负值，让边框合并 margin-top：-10px
盒子模型、实际大小=内容大小+边框（border）+内边距（padding）+外边距（margin）
<div class= “box”></div>
<div class= “box2”></div>
-----------------------------------------------
<style>
.box{
width:200px;
height:200px;
background:black;
border：10px solid red
padding：10px}
</style>
解决padding改变元素大小的问题
<style>
.box2{
width:200px;
height:200px;
padding：10px
border：10px solid red
box-sizing:border-box ###这条代码可以让边框和padding不影响元素本身大小}
</style>
块元素，内联元素，内联块元素
块元素：div，p，ul，li，h1-h6，独占一行.....适用于所有的样式
块元素默认宽度是父集的宽度
内联元素:a、span、em、b，不独占一行
<body>
hahsjdjnd<span>1111</span，2222
----------------------------------
<style>
span{
height：22px
width：22px
backgrou：green
margin：20px
padding:22px}
</style>
注意：内联支持部分元素，不支持宽高，不支持上下margin。（支持左右margin）宽高由字体决定。
内联块元素：不独占一行。能适用于所有的样式,如input
<body>
hahsjdjnd<input type= "text">，2222
</body>
元素类型的切换
<div class= “box”>1</div>
<div class= “box2”>2</div>
<div class= “box3”>3</div>
-----------------------------
.box,.box2.box3{
width:100px
height:100px} 现在是块元素
##块元素转变为内联元素，如下加入display：inline、
.box,.box2.box3{
width:100px
height:100px
display：inline} 现在是内联。内联元素宽高不适用，与字体有关
###块元素转变为内联块元素，加入display：inline-block、
.box,.box2.box3{
width:100px
height:100px
display：inline-block}
-------------------------------------------------------------
内联元素转换成块元素和内联块元素
<body>
<span>11111<span>
<span>22222<span>
<span>33333<span>
<span>44444<span>
</body>
内联元素转换成块元素
<style>
span{
width:22px
height：22px
display:block}
<style>
内联元素转换成内联块元素
span{
width:22px
height：22px
display:inline-block}
注意：displa四个属性。inline代表内联元素，block代表块元素，inline-block代表内联块（一般块元素和内联块都可以适用所有样式，装换成内联块原因是不想独占一行）
display：none。元素消失。与hover用，鼠标悬停显示，
在hover下写display：block。把none变成block，元素就显示出来