题目概览
对 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. \00A0 for */
- 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%;
- width: 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 的值更偏向于自定义和非标准
每日思考(2019/12/26)
来源: http://www.bubuko.com/infodetail-3352058.html