css精粹

爱被打了一巴掌 2022-05-13 18:18 190阅读 0赞

#### 基础汇总 ####

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

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关《Javascript 语言精粹》读书笔记

《Javascript 语言精粹》读书笔记语法标识符 JavaScript不允许使用保留字命名变量或参数。数字 JavaScript只有一个数字

迈不过友情╰/ 2023年10月12日 07:29/ 0 赞/ 21 阅读

相关 GDB调试方法精粹

http://blog.chinaunix.net/uid-26000296-id-3499802.html 一、多线程调试 1. 多线程调试,最重要的几个命令:

青旅半醒/ 2022年08月14日 05:00/ 0 赞/ 151 阅读

相关《JavaScript语言精粹》笔记

0、JavaScript的简单数据类型包括数字、字符创、布尔值（true/false）、null和undefined值，其它值都是对象。 1、JavaScript只有一个数字

待我称王封你为后i/ 2022年08月06日 11:24/ 0 赞/ 146 阅读

相关 JavaScript精粹---使用数字

JavaScript的內建对象–Math 最常用的几个函数： Math.ceil 向上取整所以Math.ceil(2.4)返回 3。 Math.floor

川长思鸟来/ 2022年06月16日 09:20/ 0 赞/ 173 阅读

相关 JavaScript语言精粹

读书笔记 1. if中被当成假的情况(if到底是怎么判断的) false null undefined

矫情吗；*/ 2022年06月04日 00:11/ 0 赞/ 182 阅读

相关 Java垃圾回收精粹

串行、并行、并发、CMS、G1、年轻代（Young Gen）、新生代（New Gen）、旧生代（Old Gen）、持久代（Perm Gen）、伊甸区（Eden）、年老区（Ten

电玩女神/ 2022年05月19日 02:51/ 0 赞/ 105 阅读

相关 css精粹

基础汇总 (1)例： a:link:hover {background-color:red} // 未访问链接鼠标悬停背景色为red a:vis

爱被打了一巴掌/ 2022年05月13日 18:18/ 0 赞/ 191 阅读

相关 UML精粹之类图

UML精粹之类图本博客源自《UML精粹》一书，向Martin Fower致敬。UML图使用PlantUML的DSL绘制。类的属性：形如：visibi

落日映苍穹つ/ 2022年05月12日 13:08/ 0 赞/ 281 阅读

相关 JavaScript语言精粹（修订版）

![1350281496_6801.jpg][] JavaScript语言精粹（修订版）（美）克罗克福德（Crockford,D.）著赵泽欣，鄢学鹍译 ISBN97

￡神魔★判官ぃ/ 2022年04月10日 08:23/ 0 赞/ 201 阅读

相关 JavaScript语言精粹

一、语法运算符优先级 . [] () 提取属性与调用函数 delete new typeof + - 一元运算符 * / % 乘法、除法、求余 + - 加法/连结、减 ...

朱雀/ 2021年04月19日 15:04/ 0 赞/ 460 阅读