Java基础(32)

盒子的 display 属性值有三种，将盒子分成了三大类
block : 块级标签
inline-block : 内联级标签
inline : 内嵌级标签
2.1、三大类型盒子特点
block 标签特点
 标签独占一行，可以让超文本从上到下排列
 支持所有的 CSS 样式设置
 垂直方向上的 margin 会重叠
 在不设置宽度时，width 大小为自动的情况下块级标签盒子在界面上默认占满父级内容宽度此时在设置盒子水平方向的 margin，
border,padding 时，都会向内压缩内容空间(width 空间）如果设置了宽度，盒子移动，符合 margin,padding 基本移动规律
 外边距坍塌问题，只出现在父级和子级都是块级标签的情况下
o 对于一个块级元素来说，如果有两个或者更多的垂直外边距相遇时，会发生“坍塌”，即结合为一个外边距，而这个外边距
的高度值等于发生叠加的外边距高度中的较大者
 块级标签居中问题，块级标签要在其父级的水平方向上居中，是通过给标签自身设置 margin:上下 auto 来完成。
 最常见的块级标签 div
inline-block 标签特点
 可以让盒子同行排列
 支持所有的 CSS 样式设置
 间隙问题：在浏览器上同行排列的盒子，浏览器会将文档中对应标签之间的空白符解析成一个间隙并且该间隙大小不固定。不同浏
览器、浏览器不同版本、相同浏览器在不同系统平台上，该间隙大小不一致，具有危害性，需要消除。消除方法：为同行排列盒子的父级设置
font-size:0；同时由于 font-size 具有继承性，因此需要给子级恢复字体大小
 对齐问题，默认情况下同行排列的盒子，是按照盒子内部最后一行文字的底部对齐，当文字行数不一样时会导致不对齐。通vertical-align 属性可以设置盒子的对齐基线。一般情况常用三个值：top 顶对齐、middle 居中对齐、bottom 底对齐
o 在使用时，一般情况下要给同行的盒子同时设置相同的对齐方式
 居中问题通过给父级设置 text-align:center 来实现
 在不设置宽高大小的时候，由内容撑开宽度和高度
inline 标签特点
 inline 标签，只用来放文字
 不支持宽高设置
 不支持上下 margin 设置，因此 inline 型标签需要从上到下移动，只能通过其他盒子推着它走，或者父级盒子带着它走
 水平方向上的 margin 有效，并且相互叠加
 其盒子大小只能由内部的文字大小撑开
 最长用的 inline 型标签 span  同样具有间隙问题，解决方法与 inline-block 一致
 水平居中：给父级设置 text-align：center CSS 引入的三种方式
 行内样式
 通过 style 标签嵌入
 通过 link 标签引入，注意关于@import