CSS中的display

display; 块级元素(块状元素)#

　特点:

• 独占一行,在所在父元素内依次向下排列,从左上角开始
• 宽度在不设置的情况下,宽度继承父级元素内容的宽,高度由本身内容决定
• 可以直接设置盒子模型的所有属性(width,height,padding,border,margin)
• 可以嵌套其他元素(p,dt,h1-h6不能嵌套块级)
  • dt/p 不能嵌套其他块级元素,可以嵌套行内元素等
• 永远会在父级盒子的左上角开始排布,从上到下排.

人为设置的样式要比自带的样式权重高 块级元素这些特点,我们将其称作BFC(Block Fomatting Context—>块级盒子在上下文中的渲染模式)

display; 行内元素#

　特点:

• 在一行显示
• 不能设置宽度 高度
• padding margin的上下值设置不生效,左右值生效
• 默认宽度高度是本身内容的宽高
• 几个行内元素默认的垂直方向的对齐方式是基线对齐
• 在编辑代码时,如果行内元素之间有回车或者空格,那么在页面显示的时候,就会默认有间隙()
• 将父级的font-size设置为0,可以解决这个问题.
• 行内元素不能嵌套块级元素

display; 行内块级元素#

特点:

• 在一行显示
• 可以直接设置宽度高度padding、margin值
• 默认宽度高度是本身内容的宽高
• 几个行内元素默认的垂直方向对齐方式是基线对齐
• 在编辑代码时,如果行内元素之间有回车或者空格,那么在页面显示的时候,就会默认有间隙
• 将父级的font-size设置为0,可以解决这个问题.
• 行内元素不能嵌套块级元素

vertical-align改变行内元素和行内块级元素的基线对其方式#

　改变对齐方式的时候,所有元素都要添加vertical-align这个属性

display; 将这个元素在页面上隐藏起来#

如何再让设置display;的元素显示出来?

• 将none用其他的属性替换
  • 例如<重新设置display属性为>==>display;