5、哪个HTML属性定义内嵌的样式表？（ A ）
A. style
7、CSS中如何插入注释？（ C ）
A. // this is a comment //
9、如何为<h1>元素添加背景颜色？（ C ）
A. h1.all {background-color:#FFFFFF}
10、如何改变一个元素中的文本的颜色？（ A ）
A. color:
11、哪个CSS属性控制文字大小？（ B ）
A. font-style21、文本的white-space属性：规定如何处理元素中的空白。
<html>
<head>
<style type="text/css">
p {white-space: pre;}
</style>
</head>
<body>
<p>This paragraph has many
spaces in it.</p>
<p>注释：当 white-space 属性设置为 pre 时，浏览器不会合并空白符，也不会忽略换行符。</p>
</body>
</html>
结果：
This paragraph has many spaces in it.
注释：当 white-space 属性设置为 pre 时，浏览器不会合并空白符，也不会忽略换行符。
22、文本的text-decoration属性
<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p><a href=".html">这是一个链接</a></p>
</body>
</html>
23、链接样式的正确次序：
a:link, a:visitied, a:hover, a:focus, a:active
比如说这样写是对的：
a:link, a:visitied{ text-decoration: none; }
a:hover, a:focus, a:active{ text-decoration: underline; }
而这样写，鼠标悬停和激活样式就不起作用：
a:hover, a:focus, a:active{ text-decoration: underline; }
a:link, a:visitied{ text-decoration: none; }
24、css选择器的优先级：
行内样式（比如说：<p style=""/>） 》 id选择器 》 类选择器、伪类选择器、属性选择器 》标签选择器、伪元素选择器
25、border : none; 与 border : 0; 的区别
border : none;是border-style的简写 border : 0; 是border-width的简写
体现有两点：一是理论上的性能差异二是浏览器兼容性的差异。
性能差异：
【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。
兼容性差异：
兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。
【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在，
【border:0;】当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏，
visibility:hidden; 隐藏元素及元素内的所有内容，但是该元素的位置、宽高等属性值仍然还在。
27、回流和重绘
浏览器解析大概的工作流程大致可归纳为四个步骤：
1. 解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为 – 内容树。
2. 构建渲染树：解析CSS（包括外部CSS文件和样式元素以及js生成的样式）成样式结构体，根据CSS选择器计算出节点的样式，创建另一个树 —- 渲染树（render tree）。
注：在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而firefox会去掉_开头的样式。
3. 布局渲染树: 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
4. 绘制渲染树: 遍历渲染树，每个节点将使用UI后端层来绘制。
render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。注意 visibility:hidden隐藏的元素还是会包含到render tree中的，因为visibility:hidden 会影响布局(layout)，会占有空间。
我们可以看到Repain 和 Reflow 分别出现在了第三和第四步。因此我们给出下面的定义：
对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。
Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。
当你增加、删除、修改 DOM 结点时，会导致 Reflow 或 Repaint。
当你移动 DOM 的位置，或是搞个动画的时候。
当你修改 /删除CSS 样式的时候。
当你 Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。
当你修改网页的默认字体时。
当你设置 style 属性的值 （Setting a property of the style attribute）。
注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。
Reflow是不可避免的，只能将Reflow对性能的影响减到最小,给出下面几条建议：
1. 不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className，即将多次改变样式属性的操作合并成一次操作：
// 不好的写法var left = 10,top = 10;el.style.left = left + "px";p = top + "px";el.style.background = '#eee'; // 比较好的写法el.className += " theclassname";
2. 让要操作的元素进行”离线处理”，处理完后一起更新
- 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
- 使用display:none技术，只引发两次回流和重绘;
原理：由于display属性为none的元素不在渲染树中，对隐藏的元素操 作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。
- 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
3. 不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。
4. 尽可能的修改层级比较低的 DOM节点。当然，改变层级比较底的 DOM节点有可能会造成大面积的 reflow，但是也可能影响范围很小。
因为改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面
5. 将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素为动画的 HTML 元素，例如动画，那么修改他们的 CSS 是会大大减小 reflow 。因为,它们不影响其他元素的布局，所它他们只会导致重新绘制，而不是一个完整回流。这样消耗会更低。
6. 。不要用tables布局的一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
7. 避免使用CSS的JavaScript表达式，如果css里有expression，每次都会重新计算一遍。
本文发布于:2024-02-04 10:58:01，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170705614654961.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
