css精粹

最新推荐文章于 2022-04-06 11:31:29 发布

qinchao888

最新推荐文章于 2022-04-06 11:31:29 发布

阅读量421

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/GreyBearChao/article/details/83383516

15 篇文章

订阅专栏

(1)例：

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

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

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

继承样式的缺点：很难确定样式的来源。

(3) 元素框的尺寸：

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

(4) 外边距叠加：

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

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

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

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

(6) 行内框：

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

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

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

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

<div>
	some text 		<!--此处默认产生一个匿名块框-->
	<p>text</p>
</div>

<div>
	some text		<!--此处默认产生一个匿名行框-->
	<em>text</em>
</div>

（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') {
	...
}