元素显示模式#

元素显示模式的转换#

1display: block | inline | inline-block;
2
3block 块级元素：独占一行,可设宽高。
4inline 行内元素：可在同行显示,宽高无效。
5inline-block 行内块元素：可在同行显示,宽高有效。行内块元素对齐是指内容对齐。
6
7目的：
8	改变元素的默认显示特点,让元素符合布局要求。

常见块元素#

1h系列、div、p、ul、ol、li、dl、dt、dd、form、header、nav、footer等
2
3特点：
4	独占一行,可设宽高,宽度默认是父元素宽度,高度默认由内容撑开。
5	块级元素是一个容器及盒子,里面可以嵌套文本、块级元素、行内元素或者行内块元素等等。
6
7注意：
8	p标签主要用于存放文字,因此里面不能放div、p、h等块级元素。

常见的行内元素（内联元素）#

1a、span、b、u、i、s、strong、ins、em、del、code等
2
3特点：
4	一行可显多个,宽高由内容撑开,不可设置宽高。
5	行内元素只能容纳文本或其他行内元素。
6
7注意：
8	a标签内可以嵌套除a标签外的任意元素。

常见的行内块元素#

1img、input、textarea、button、select、td等
2
3特点：
4	一行可显多个,彼此间有空隙。宽高可设,宽度默认由内容撑开。
5	浏览器解析行内元素和行内块元素,如果标签换行书写会产生一个空格的距离。
6
7注意：
8	img标签有行内块元素特点,但是chrome调试工具显示结果为行内元素。

元素的显示与隐藏#

display 显示（重点）#

1display: none 隐藏对象
2display: block 除了转换为块级元素之外,同时还有显示元素的意思。

• display 设置或检索对象是否及如何显示。
• 特点：
  • display 隐藏元素后,不再占有原来的位置。

visibility 可见性 （了解）#

1visibility：visible ; 元素可视
2visibility：hidden; 元素隐藏

• visibility 属性用于指定一个元素应可见还是隐藏。

• 特点：

  • visibility 隐藏元素后,继续占有原来的位置。

• display: none和visibility: hidden的区别

  • 如果隐藏元素想要原来位置,就用 visibility：hidden;
  • 如果隐藏元素不想要原来位置,就用 display：none;

overflow 溢出、超出部分（重点）#

• overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时,会发生什么。

  属性值	描述
  visible	默认值,溢出部分可见。
  hidden	溢出部分隐藏。
  scroll	无论是否溢出,都显示滚动条。
  auto	根据是否溢出,自动显示或隐藏滚动条。

• 一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局。

• 但是如果有定位的盒子,请慎用overflow:hidden 因为它会隐藏多余的部分。

  • overflow-x属性用于指定元素水平方向上的内容溢出时的处理方式
  • overflow-y属性用于指定元素垂直方向上的内容溢出时的处理方式。

    • 当overflow-x,overflow-y中任意一个属性值的定义为非 visible时,另一个属性会自动将默认值visible计算为auto。

限制文字同行显示超出部分用...代替#

1. 强制文字同行显示

   white-space

   • normal：默认处理方式。会将序列的空格合并为一个,内部是否换行由换行规则决定。
   • pre：原封不动的保留你输入时的状态,空格、换行都会保留,并且当文字超出边界时不换行。等同 pre 元素效果
   • nowrap：与normal值一致,不同的是会强制所有文本在同一行内显示。
   • pre-wrap：与pre值一致,不同的是文字超出边界时将自动换行。
   • pre-line：与normal值一致,但是会保留文本输入时的换行。

2. 超出部分隐藏

   overflow: hidden;

3. 超出部分用省略号...代替

   text-overflow

   • clip：当内联内容溢出块容器时,将溢出部分裁切掉。

   • ellipsis：当内联内容溢出块容器时,将溢出部分替换为（...）。

   • 当块容器 overflow 为非默认时,定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符 要使得 text-overflow 属性生效,块容器必须显式定义 overflow 为非默认值,同时显式或者隐式的定义 width 为非auto值, white-space 为nowrap值。