web前端：容器内的行块盒和行盒

　　所谓网站(Website)，就是指在网际网路（因特网）上，根据一定的规则，使用html等工具制作的用於展示特定内容的相关网页的集合。

　　深度行盒与行块盒（空白，参考线，行盒右拉伸）

　　容器内的行块盒和行盒

　　<!--test1:关于行盒和行块盒的空白折叠问题-->

　　<!--行块盒右边的空白折叠为一个（操作：切换span2的display为inline,往右书写ggg1的位置）-->

　　<divclass="div-span"style='border:1pxsolid;margin:10px;font-size:16px;font-family:cursive;'>

　　<spanclass="span1"style="display:block;font-size:32px;background-color:rgb(252,240,171);">ggg1

　　</span>

　　<spanclass="span2"style="display:inline-block;font-size:64px;background-color:rgb(252,183,171);">ggg1

　　</span>ggg1

　　</div>

　　<!--行盒的右边空白忽略-->

　　<divclass="div-span"style='border:1pxsolid;margin:10px;font-size:16px;font-family:cursive;'>

　　<spanclass="span1"style="display:block;font-size:32px;background-color:rgb(252,240,171);">ggg1

　　</span>

　　<spanclass="span2"style="font-size:32px;background-color:rgb(252,183,171);">ggg1

　　</span>

　　ggg1

　　</div>

　　<!--test2:行块盒与行块盒-->

　　<!--行块盒右边的空白折叠为一个，由父元素的font-size控制大小-->

　　<divclass="div-span"style='border:1pxsolid;margin:10px;font-size:16px;font-family:cursive;'>

　　<spanclass="span1"style="display:inline-block;font-size:32px;background-color:rgb(252,240,171);">ggg2

　　</span><spanclass="span2"style="display:inline-block;font-size:64px;background-color:rgb(252,183,171);">ggg2

　　</span>

　　<spanclass="span3"style="display:inline-block;font-size:32px;background-color:rgb(247,87,161);">ggg2

　　</span>

　　</div>

　　<divclass="div-span"style='border:1pxsolid;margin:10px;font-size:16px;font-family:cursive;'>

　　<spanclass="span1"style="display:inline-block;font-size:32px;background-color:rgb(252,240,171);">ggg2

　　</span><spanclass="span2"style="display:inline-block;font-size:64px;background-color:rgb(252,183,171);">ggg2

　　</span>

　　<spanclass="span3"style="display:inline-block;font-size:32px;background-color:rgb(247,87,161);">ggg2

　　</span>ggg2ggg2

　　</div>

　　<!--test3:行盒与行盒(特别)-->

　　<!--行盒子后面摆放"行盒"(有文本就有)，前一个行盒子出现右拉伸-->

　　<divclass="div-span"style='border:1pxsolid;margin:10px;font-size:16px;font-family:cursive;'>

　　<spanclass="span1"style="font-size:32px;background-color:rgb(252,240,171);">ggg3

　　</span>

　　<spanclass="span2"style="font-size:64px;background-color:rgb(252,183,171);">ggg3

　　</span>ggg3ggg3

　　</div>

　　<divclass="div-span"style='border:1pxsolid;margin:10px;font-size:16px;font-family:cursive;'>

　　<spanclass="span1"style="font-size:32px;background-color:rgb(252,215,8);">ggg3

　　</span>

　　<spanclass="span2"style="font-size:0px;background-color:rgb(255,1,1);">ggg3

　　</span>

　　</div>

　　<!--test4:行盒子后面摆放"行块盒"，前一个行盒子出现右拉伸-->

　　<divclass="div-span"style='border:1pxsolid;margin:10px;font-size:16px;font-family:cursive;'>

　　<spanclass="span1"style="font-size:32px;background-color:rgb(194,252,171);">ggg4

　　</span>

　　<spanclass="span2"

　　style="display:inline-block;font-size:64px;background-color:rgb(52,247,3);">

　　</span>

　　</div>

　　<!--test5:span2后面无行盒子或者行块盒子，无右拉伸-->

　　<divclass="div-span"style='border:1pxsolid;margin:10px;font-size:16px;font-family:cursive;'>

　　<spanclass="span1"style="font-size:32px;background-color:rgb(194,252,171);">ggg5

　　</span>

　　<spanclass="span2"style="font-size:64px;background-color:rgb(252,203,171);">ggg5

　　</span>

　　</div>

　　<!--test6:行盒左右两边一个行块盒-->

　　<divclass="div-span"style='border:1pxsolid;margin:10px;font-size:16px;font-family:cursive;'>

　　<spanclass="span2"

　　style="display:inline-block;height:60px;width:100px;font-size:64px;background-color:rgb(252,171,171);">

　　</span><spanclass="span1"style="font-size:32px;background-color:rgb(194,252,171);">ggg6

　　</span>

　　<spanclass="span2"

　　style="display:inline-block;height:60px;width:100px;font-size:64px;background-color:rgb(252,203,171);">

　　</span>

　　</div>

　　<!--test7:去掉ggg77效果一样，说明父元素有参考线-->

　　<divclass="div-span"style='border:1pxsolid;margin:10px;font-size:16px;font-family:cursive;'>

　　<spanclass="span2"

　　style="display:inline-block;height:40px;width:100px;font-size:64px;background-color:rgb(252,171,171);">

　　</span>

　　<spanclass="span2"

　　style="display:inline-block;height:60px;width:120px;background-color:rgb(197,83,7);">

　　</span>

　　ggg77

　　</div>

　　总结

　　1文字的大小由:font-size,font-family,line-height决定

　　设置文字的相对大小时候px,em,百分比，文字的内容实际高度content-area通常高于设置的值（不同的font-family比例不同，同一种文字比例相同，按比例计算），而且还有字体设计者设置的默认行高（行高>=0）

　　2图片(可替换元素)和无子元素的inline-block元素的行为类似，都是下外边距作为参考线

　　3一个元素内部有行盒（或者行块盒），且font-size>0时，该元素会产生参考线

　　4行盒子右边有行盒子（有文本的）或者行块盒（任意的，甚至宽高0，无子元素）会导致该元素右伸展

　　5行块盒与行盒或者行块盒之间，如果之间有空隙发生空白折叠（代码书写的多个换行或者空格合并为一个），空白大小由该元素包含块的font-size大小决定

　　6vertical-align可以设置行盒或者行块盒

　　简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务），又或收集想要的信息。人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。