CSS 元素的显示模式

块元素

常见的有"p"，"h1"---"h6"，"div"，"ul"，"ol"，"li"......

1.块元素独占一行

2.高度，宽度，外边距离，内边距离都可以控制

3.默认是容器内的100%

4.自己作为一个容器，里面可以放置块元素和行内元素

ps:文字类的块元素里，不能放置其他块元素，例如"p"，"h1"--"h6"

行内元素

常见的有 "a"，"strong"， "b" , "em" , "i" ," del " , "s" , "ins" , "spen"..........

"spen"是最常见的行内元素，有的地方也可以称为内联元素

1.行内元素一行可以有多个，相邻的会放置在一起

2.高与宽直接设置都是无效的

3.默认宽度为他本身内容的宽度

4.其中只能容纳文本和其他的行内元素

行内块元素

常见的有"td" , "img" , "input" 他们同时具有行内元素和块元素的特点

1.行内元素一行可以有多个，相邻的会放置在一起，并且中间会有空白缝隙

3.默认宽度为他本身内容的宽度

2.高度，宽度，外边距离，内边距离都可以控制

重点来了!!!

块元素，行内元素以及行内块元素的转换

转换成块元素：display:block;

转换成行内元素:display:inline;

转换成行内块元素:display:inline-block;

为什么我们要转换，因为这个页面布局的时候，我们想要设置行内元素容器宽高就要用到转换

那么我们又如何实现单行文字垂直居中呢？

单行文字垂直居中

让文字的高度等于盒子的高度 就可以实现这个功能

简单理解一下

就是:行高=上空隙+文本高度+下空隙

所以如果要实现垂直居中效果使用：

 a {

height:  'x' px;

line-height:  'x' px;

}

如果希望文本偏上展示，那么行高<盒子高度；如果希望文本偏下展示，那么行高＞盒子高度