content box

• 替换元素

  内容可替换的元素，如：
  <img>,<object>,<video>,<iframe>,<input>,<textarea>,<select>

  有如下特性：

  1. 外观不受 css 影响
  2. 有自己的尺寸
  3. 很多 css 属性有自己的一套表现规则。如 vertical-align ，替换元素的baseline是元素的下边缘，非替换元素是x的下边缘

  替换元素默认 dispay 值

  都是inline或inline-block
  主要记:
  <img>是inline
<input>是inline-block（火狐是 inline）

  <input>和<button>区别：

  前者white-space是 pre，后者是 normal

  white-space:

  • normal (默认)
    连续的空白符会被合并，换行符会被当作空白符来处理。填充 line 盒子时，必要的话会换行

  • nowrap
    和 normal 一样，连续的空白符会被合并。但文本内的换行无效

  • pre
    连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。

  • pre-wrap
    连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充 line 盒子时才会换行。

  • pre-line
    连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充 line 盒子时会换行。

    	换行符	空格和 tap	文字转行
    normal	空白符	合并	yes
    nowrap	空白符	合并	no
    pre	换行	保留	no
    pre-wrap	换行	保留	yes
    pre-line	换行	合并	yes

  替换元素尺寸

  • 固有尺寸

    原本尺寸，无法改变

  • HTML 尺寸

    通过 HTML 属性改变的尺寸，如：
    img的width,height
    input的size属性
    textarea的cols和rows

  • CSS 尺寸

    通过 CSS 改变的尺寸

  从下都上，优先级递减

• Firefox 中没有src属性的img元素是inline元素

• css 之所以可以改变图片的大小，是因为图片中的 comtent 默认的object-fit是fill

替换元素离非替换元素有多远？

• 只隔了一个src
  Firefox 直接就行，Chrome 要有一个不为空的 alt 值
• 只隔了一个content属性
  counter:url('...')

content 计数器

• counter-reset

  给计数器起名，和从那个数字开始计数
  .xxx{ counter-reset:name 2}
  名字就是 name ，从 2 开始，默认 0，数字不合符当 0 处理
  可以多个计数器同时命名
  .xxx{ counter-reset:name 2 name2 3}

• counter-increment

  key 为 counter-reset 的名字，值是每次增加的值，没有则默认 1，也可以有多个 key 用空格如同 counter-reset

  .counter {
      counter-reset: szx 2;
      counter-increment: szx 1;
  }
  .counter::before {
      content: counter(szx);
  }
  

  counter-increment 在父元素或子元素都有效

• 方法counter( ) / counters( )

  counter(name[,style])

  • style 支持的值就是list-style-type支持的值，作用是增减可以是英文字母或罗马文
  • 一个 content 可以有多个 content( )方法

  counters(name,string[,style])

  • string 必须，表示子序号的链接字符,style 同上
  • reset 不要和 counter 同级