Code Better

切换日光/暗黑模式

元素显示模式 ​

元素显示模式的转换 ​

css
display: block | inline | inline-block;

block 块级元素：独占一行，可设宽高。
inline 行内元素：可在同行显示，宽高无效。
inline-block 行内块元素：可在同行显示，宽高有效。行内块元素对齐是指内容对齐。

目的：
	改变元素的默认显示特点，让元素符合布局要求。

常见块元素 ​

css
h系列、div、p、ul、ol、li、dl、dt、dd、form、header、nav、footer等

特点：
	独占一行，可设宽高，宽度默认是父元素宽度，高度默认由内容撑开。
	块级元素是一个容器及盒子，里面可以嵌套文本、块级元素、行内元素或者行内块元素等等。

注意：
	p标签主要用于存放文字，因此里面不能放div、p、h等块级元素。

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

css
a、span、b、u、i、s、strong、ins、em、del、code等

特点：
	一行可显多个，宽高由内容撑开，不可设置宽高。
	行内元素只能容纳文本或其他行内元素。

注意：
	a标签内可以嵌套除a标签外的任意元素。

常见的行内块元素 ​

css
img、input、textarea、button、select、td等

特点：
	一行可显多个，彼此间有空隙。宽高可设，宽度默认由内容撑开。
	浏览器解析行内元素和行内块元素，如果标签换行书写会产生一个空格的距离。

注意：
	img标签有行内块元素特点，但是chrome调试工具显示结果为行内元素。
元素模式元素排放设置样式默认宽度包含
块级元素一行只能放一个可设宽高容器的100%容器里可以包含任何标签
行内元素一行可以放多个不可设宽高本身内容的宽度容纳文本或其他行内元素
行内块元素一行放多个可设宽高本身内容的宽度

元素的显示与隐藏 ​

display 显示（重点） ​

css
display: none 隐藏对象
display: block 除了转换为块级元素之外，同时还有显示元素的意思。
  • display 设置或检索对象是否及如何显示。
  • 特点：
    • display 隐藏元素后，不再占有原来的位置。

visibility 可见性 （了解） ​

css
visibility：visible ; 元素可视
visibility：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值。

©2024 Dancy Su