html u0026css精粹,css精粹

基础汇总

(1)例：css

a:link:hover {background-color:red} // 未访问连接鼠标悬停背景色为red

a:visited:hover {background-color:blue} // 访问连接后鼠标悬停背景色为blue

(2) 设置的继承样式在子元素上不生效：html

缘由：浏览器为该元素设置了默认的样式，致使继承的样式无效。继承的样式没有特殊性。web

继承样式的缺点：很难肯定样式的来源。浏览器

(3) 元素框的尺寸：svg

即为调试时选中元素时显示的宽高：由 (border + padding + 内容) 构成。布局

(4) 外边距叠加：调试

普通文档流的块框的垂直外边距才会发生外边距叠加，行内框、浮动框、绝对定位框之间的外边距不会叠加。code

外边距叠加的应用：使得段落文本之间的间距一致。xml

(5) css中三种基本定位机制：htm

普通流、浮动和绝对定位。

(6) 行内框：

①修改行框尺寸的方法：修改行高、水平边框、内边距和外边距。

②行内框竖直方向上的内边距无效吗？

在给行内框添加背景色后，设置竖直方向上的内边距时发现确实生效了，但事实上设置的内边距并不占据实际的空间，即不影响其余的元素布局。所以能够认为给行内框设置竖直方向上的内边距无效。

(7) 匿名块框和匿名行框：

some text

text

some text

text

平滑滚动

(1)设置属性：scroll-behavior: smooth;

之前使用锚点跳转时老是快速的定位到指定位置，而使用平滑滚动后，页面会有一个滚动的过程，效果更好。

设置时只须要给滚动的盒子设置scroll-behavior: smooth属性便可，也能够在 css reset 时给 body, html 设置。

(2)除此以外，也能够使用JS提供的scrollIntoView()，传入参数behavior: ‘smooth’ 。

target.scrollIntoView({

behavior: 'smooth'

})

若是在css中设置了scroll-behavior: smooth 直接调用 target.scrollIntoView便可，不须要再传入参数。

// 判断是否支持scroll-behavior属性

if (typeof window.getComputedStyle(document.body).scrollBehavior == 'undefined') {

...

}