每日思考（2019/12/26）

题目概览

• 对html中的置换元素和非置换元素的理解
• css的属性content有什么作用呢？有哪些场景可以用到?
• "attribute"和"property"有什么不同？

题目解答

对html中的置换元素和非置换元素的理解

• 含义：置换元素是指一个 内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。w3c并没有给出明确的非置换元素的解释，但能确定的是除置换元素之外，所有的元素都是非置换元素
• 行内级置换和非置换元素的宽度定义
  • 对于行内级非置换元素，宽度设置是不适用的
  • 对于行内级置换元素来说，其宽度的设置需遵循以下几点
    • 若宽高的计算值都为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度；典型的例子是：拥有默认宽高的 input 当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度
    • 若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度
    • 若宽度的计算值为 auto 且高度有 非auto 的计算值，并且元素有固有宽高比，则 width 的使用值为 高度使用值 * 固有宽高比；典型的例子：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置
    • 除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px典型的例子：比如iframe, canvas
  • 其它类型的置换元素，其宽度的定义都参照行内置换元素的定义
• 行内级置换和非置换元素的高度定义
  • 对于行内级非置换元素，高度设置是不适用的
  • 对于行内级置换元素来说，其高度的设置需遵循以下几点
    • 若宽高的计算值都为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
    • 若高度的计算值为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
    • 若高度的计算值为 auto 且宽度有 非auto 的计算值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；
    • 若高度的计算值为 auto 且上述条件完全不符，则 height 的使用值 不能大于150px，且宽度不能大于长方形高度的2倍
  • 其它类型的置换元素，其高度的定义都参照行内置换元素的定义

css的属性content有什么作用呢？有哪些场景可以用到

• 定义：content 属性与 :before 及 :after 伪元素配合使用，在元素头或尾部来插入生成内容。该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的盒子类型可以用属性 display 控制

  content: normal                                /* Keywords that cannot be combined with other values */
  content: none
  
  content: 'prefix'                              /* <string> value, non-latin characters must be encoded e.g. 0A0 for &nbsp; */
  content: url(http://www.example.com/test.html) /* <uri> value */
  content: chapter_counter                       /* <counter> values */
  content: attr(value string)                    /* attr() value linked to the HTML attribute value */
  content: open-quote                            /* Language- and position-dependant keywords */
  content: close-quote
  content: no-open-quote
  content: no-close-quote
  
  content: open-quote chapter_counter            /* Except for normal and none, several values can be used simultaneously */
  
  content: inherit
  

• content: <string> value 字符串

  • 可以加入任何字符，包括 Unicode 编码等各种字符

    <a class="demo" href="#" title="content">content</a>
    <style>
    	.demo:after{
    		content: "↗"
    	}
    </style>
    

  • 可以通过 content 内字符串的变化，实现类似 加载中... 的动画效果

    .demo:after{
    	animation: dot 1.6s linear both;
    }
    @keyframe dot{
    	0%{ content: "." }
    	33%{ content: ".." }
    	66%{ content: "..." }
    	100%{ content: "." }
    }
    

  • steps阶梯函数实现元素位移

    <a class="demo" href="#" title="content">content<dot>...</dot></a>
    <style>
    dot {
       display: inline-block;
        height: 1em;
        line-height: 1;
        text-align: left;
        vertical-align: -.25em;
        overflow: hidden;
    }
    
    dot::before {
        display: block;
        content: '...A..A.';
        white-space: pre-wrap;
        animation: dot2 1.6s infinite step-start both;
    }
    
    @keyframes dot2 {
        33% {
            transform: translateY(-2em);
        }
    
        66% {
            transform: translateY(-1em);
        }
    }
    </style>
    

• content: <url> value 外部资源

  • 用于引用媒体文件，图片，图标，SVG等

    .demo:after{
    	content: url(https://img.png);
    }
    

  • 受 background-image: url() 可以用渐变实现背景启发，类似的，一些函数是不是可以放在 content 中来实现

    .demo:after {
      content: radial-gradient(circle at 35% 35%, white 10%, pink 70%);
      display: inline-block;
      border-radius: 50%;
       100px;
      height: 100px;
      overflow: hidden;
    }
    

• content: attr() value 属性值的引用：调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来

  .demo:after{
  	content: attr(href);
  }
  .demo:after{
  	content: attr(class);
  }
  

• content: <counter> values：调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法

  <h1>大标题</h1>
  <h2>中标题</h2>
  <h3>小标题</h3>
  <h3>小标题</h3>
  <h2>中标题</h2>
  <h3>小标题</h3>
  <h3>小标题</h3>
  <h1>大标题</h1>
  <h2>中标题</h2>
  <h3>小标题</h3>
  <h3>小标题</h3>
  <h2>中标题</h2>
  <h3>小标题</h3>
  <h3>小标题</h3>
  

  h1::before{
      content:counter(h1)'.';
  }
  h1{
      counter-increment:h1;
      counter-reset:h2;
  }
  h2::before{
      content:counter(h1) '-' counter(h2);
  }
  h2{
      counter-increment:h2;
      counter-reset:h3;
      margin-left:40px;
  }
  h3::before{
      content:counter(h1) '-' counter(h2) '-' counter(h3);
  }
  h3{
      counter-increment:h3;
      margin-left:80px;
  }
  

• 引用符号：属于引用符号的取值有 4 种，共 2 对，在 CSS 中用了语义较为清晰的关键词来表示： open-quote、 close-quote、no-open-quote、no-close-quote

  • 默认

    .demo::before {
      content: open-quote;
    }
    .demo::after {
      content: close-quote;
    }
    

  • 自定义引用符号

    .demo {
      quotes: "『" "』";
    }
    .demo::before {
      content: open-quote;
    }
    .demo::after {
      content: close-quote;
    }
    

  • quotes 可以设置多组引用符号，用以应对次级引用

    .demo {
      quotes: "«" "»" "‹" "›";
    }
    .demo::before {
      content: no-open-quote open-quote;
    }
    .demo::after {
      content: close-quote;
    }
    

• 总结：CSS 的 content 一般用在 ::before/after 这类的伪元素中。并且如果 ::before 和 ::after 元素如果不设置 content 属性的话，也是没有效果的

  序号	属性	用法
  1	'字符串'	content: 'xxx' 单纯显示内容。一般在文字的前后添加内容或者图标。
  2	attr()	content: attr(attributes) 动态显示对应标签的属性
  3	url()	content: url(url) 插入图片
  4	counter()	content: counter(name) counter 的 name 可以自己定义。需要配合 counter-increment 和 counter-reset 一起使用。
  5	open-quote 和 close-quote	content: open-quote; 实现自定义的引号，一般用来匹配多语言的情况。

"attribute"和"property"有什么不同？

• 在操作 DOM 时，我们经常会操作 attribute 和 property。不过从两者的所属关系上来说： property 属于 DOM Object，而 atrribute 属于 HTML
• property 通常比较容易获取，并且有固定的值（当然，类似 JavaScript 的对象，我们可以添加自定义的值，只是这些不会被 DOM 所认识）。比如 el.id、el.value、el.style 都是 property 而设置也只需要 el.id=newId 即可。attribute 的值不是固定的，我们可以自己为 DOM 添加需要的属性（以前常常用来存放数据或者标志位，在 HTML5 有了 data-* 的属性后，一般就利用 data-* 来存放数据了）。对于 attribute 的设定和获取我们使用 setAttribute 和 getAttribute 两个方法
• 在书写方面 property 对于大小写敏感；而 attribute 对于大小写不敏感
• 总的来看 property 的值更偏向于标准而 attribute 的值更偏向于自定义和非标准