乐趣区

关于前端:前端知识体系6css篇

jiezi

以下内容为 css 根底篇（1）

1. 如何解决 a 标点击后 hover 事件生效的问题？

扭转 a 标签 CSS 属性的排列程序：
（爱恨准则）link -> visited -> hover -> active

  1. a:link：未拜访的款式
  2. a:visited：曾经拜访的款式
  3. a:hover：鼠标移上去时的款式
  4. a:active：鼠标按下的款式

依照这样书写：
能够解决 a:link 款式被 a:visited 款式笼罩问题。
在 CSS 中，如果对于雷同元素针对不同条件的定义，合适将最个别的条件放在最下面，顺次向下，保障最上面的是最非凡的条件（能够了解为款式笼罩）。

这样，浏览器显示元素的时候，才会从非凡到个别、逐级向上验证条件。

举例说明：

我想让未拜访链接色彩为蓝色，悬浮链接为绿色，已拜访链接为红色：

第一种状况：我定义的程序是a:visited- 红色、a:hover- 绿色、a:link: 蓝色，这时会发现：把鼠标放到未拜访过的蓝色链接上时，它并不变成绿色，只有放在已拜访的红色链接上，链接才会变绿。

第二种状况：我把 CSS 定义程序调整为：a:link、a:visited、a:hover，这时，无论你鼠标通过的链接有没有被拜访过，它都会变成绿色啦。

这是因为，一个鼠标通过的 未拜访链接 同时领有 a:link、a:hover 两种属性。

  1. 在第一种状况下，a:link 离它最近，所以它优先满足同时领有【a:link，a:hover】中的 a:link，而放弃 a:hover 的反复定义（hover 款式被 link 给笼罩了）。
  2. 在第二种状况，无论链接有没有被拜访过，它首先要查看是否合乎 a:hover 的规范（即是否有鼠标通过它），满足，则变成绿色，不满足，则持续向上查找，始终找到满足条件的定义为止。

奇淫技巧 – 记住正确排序：（l v h a）==》LV 好啊（取的首字母)

2. 响应式布局

从目前理解的状况，pc 和 h5 应用一套响应式的代码的场景比拟少了，大多是 pc,h5 各自保护一套代码。

1. 应用 CSS3 媒体查问 @media 查问

@media screen and (max-width:980px) {
 body{background-color: red;}
}

2.flex 布局

弹性盒布局模型是 css3 标准中提出的一种新的布局形式。

目标：提供一种更加高效的形式来对容器中的条目进行布局、对齐和调配空间

劣势：这种布局模式已被支流浏览器所反对，能够在 web 利用开发中应用。

3. Flex 布局

Flex（Flexible Box）布局 称为 “ 弹性布局 ”，能够为网页的布局提供最大的灵活性，取代了平常的 浮动（float）布局，并且任何一个容器都能够设置 Flex 布局。
注：设置 Flex 布局后，子元素的 Float 布局将生效

3-1 Flex 中的四大概念

  • 容器：如果给一个标签增加 display:flex;，那么这个标签就是一个容器
  • 我的项目：在容器中的间接子元素叫我的项目（肯定是 间接 子元素）
  • 主轴：我的项目的默认排序方向就是主轴（默认横向排列，一个容器能够有多根主轴）
  • 穿插轴：和主轴垂直的那个轴，就是穿插轴

图 1

图 2

3-2 容器的属性

  • Flex-direction – 属性决定 主轴 的方向
  • Flex-wrap — 属性决定我的项目排不下时如何 换行
  • Flex-flow — flex-direction 和 flex-wrap 的 简写 模式
  • justify-content — 程度 对齐
  • align-items — 垂直 对齐
  • align-content — 决定了 多根主轴 的对齐形式

1.Flex-direction（属性决定主轴的方向）

  • row（默认值）：主轴为程度方向，终点在 左端
  • row-reverse：主轴为程度方向，终点在 右端
  • column：主轴为垂直方向，终点在 上端
  • column-reverse：主轴为垂直方向，终点在 下端

2.Flex-wrap(属性决定我的项目排不下时如何换行)

  • norwrap（默认）：不换行
  • wrap：换行，第一行在上方
  • wrap-reverse：换行，第一行在下方

3.Flex-flow（属性是 flex-direction 和 flex-wrap 的简写模式）

  • flex-flow: flex-direction || flex-wrap;

4.justify-content(沿着主轴的方向 – 个别是程度对齐)

  • flex-start；（默认值），我的项目左对齐
  • flex-end：我的项目右对齐
  • center: 居中对齐
  • space-between：我的项目两端对齐，我的项目之间的距离都相等
  • space-around：每个我的项目两侧的距离相等

5.align-items(属性决定我的项目在穿插轴上如何对齐 – 个别是垂直对齐)

  • flex-start 从上而下
  • flex-end 从下到上
  • center 挤在一起居中显示
  • stretch 拉伸（设置拉伸这个属性的时候，不能给子元素设置高度, 基线对齐）
    注: 必须给以后的容器设置高度才会起作用

6.align-content（属性决定了多根主轴的对齐形式）

  • stretch（默认值）：轴线占满整个穿插轴
  • flex-start：与穿插轴的终点对齐
  • flex-end：与穿插轴的起点对齐
  • center：与穿插轴的中点对齐
  • space-between：与穿插轴两端对齐，轴线之间的距离平均分
  • space-around：每根轴线两侧的距离都相等

3-3 我的项目属性

我的项目的属性

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

（1）order（属性定义我的项目的排列程序。数值越小，排列越靠前，默认为 0）

（2）flex-grow（属性定义我的项目的放大比例，默认为 0，即如果存在残余空间，也不放大）

（3）flex-shrink（属性定义了我的项目的放大比例，默认为 1，即如果空间有余，该我的项目将放大）

（4）flex-basis(属性定义了在调配多余空间之前，我的项目占据的主轴空间。浏览器依据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即我的项目的原本大小, 也能够设置 xx px, 我的项目将占据固定空间)

（5）flex（属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选）

flex: none | [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>];

（6）align-self（属性容许单个我的项目有与其余我的项目不一样的对齐形式，可笼罩 align-items 属性。默认值为 auto，示意继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch）

align-self: auto | stretch | flex-start | flex-end | center | baseline;

4. 使元素隐没的办法

  • visibility:hidden 该元素暗藏起来了，但 不会 扭转页面 布局 ，然而 不会触发 该元素曾经绑定的 事件
  • display:none 把元素暗藏起来，并且会 扭转 页面 布局 ，能够了解成在页面中把 该元素删掉
  • z-index=-1 把元素遮盖起来，并且 不会 扭转页面 布局 ，能够了解被其它元素 压在上面 了
  • opacity：0, 该元素暗藏起来了，但 不会 扭转页面 布局 ，并且，如果该元素曾经绑定了一些事件，如 click 事件 也能触发，罕用于设置图片透明度为 0，而后加个点击事件，点击上传文件
  • position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见 区域之外；
  • transform: scale(0); 将一个元素设置为 缩放 无限小，元素将不可见，元素原来所在的地位将被保留；
  • < div hidden=”hidden” > HTML5 属性, 成果和 display:none; 雷同，但这个属性用于记录一个元素的状态；
  • height: 0 ; 将元素高度设为 0，并打消边框；
  • filter: blur(0) ; CSS3 属性，括号内的数值越大，图像高斯含糊的水平越大，达到肯定水平可使图像消

奇淫技巧：暗藏通明区域外，缩放压住高度 0

rgba 和 opacity 通明有何不同:

  • rgba()只作用于元素本身的 色彩或背景色 ， 对元素的内容没有影响。
  • opacity 在作用于元素本身的色彩或背景色的同时，也作用于元素内的内容的透明度。

5. css 盒模型

css 中，有两种盒模型，通过 box-sizing 切换：

  1. 当设置为 content-box 时，属于 规范盒模型 ，在设置宽度和高度时， 只蕴含 content，不蕴含 padding 和 border；
  2. 而设为 border-box 时，属于 IE 盒模型 ，设置宽度和高度时， 蕴含 content、padding 和 border。
  • 规范（W3C）盒子模型：width = 内容宽度（content） + border + padding + margin
  • 低版本 IE 盒子模型：width = 内容宽度（content + border + padding）+ margin

6. 选择器怎么解析的

款式零碎从要害选择器开始，从右向左顺次查找 ，如果呈现未匹配的状况会放弃规定，否则会左移直至匹配实现。
因而在写款式时，应尽量抉择 ID 选择器或 class 选择器作为要害选择器，并且 缩小款式的层级，降低消耗。

7. 选择器

7-1 选择器分类

  • id 选择器(#myid)
  • 类选择器(.myclass)
  • 标签选择器(div, h1,p)
  • 通配符选择器(*)
  • 相邻选择器（h1 + p）
  • 子选择器(ul > li)
  • 后辈选择器(li a)
  • 属性选择器(a[rel=”external”])
  • 伪类选择器(:link, :visited, :active , :hover, :before, :after)

7-2 选择器优先级

选择器类别 阐明 权重 权值
!important 强制应用此款式 权重最高 权值最高
行内款式 style = “” （1.0.0.0） 1000
id 选择器 #id （0.1.0.0） 100
类选择器 .id （0.0.1.0） 10
元素选择器 div （0.0.0.1） 1

通配符 > 继承 > 浏览器默认

7-3 css3 新增的伪类

  • :first-child 匹配父元素中第一个子元素
    E:first-child 它示意 ：只有 E 元素是它的父级的第一个子元素，就选中。它须要同时满足 两个条件 ，一个是 第一个子元素 ，另一个是 这个子元素刚好是 E 。
    以下 2 中解读都是谬误的:

    • 误会一：认为 E:first-child 选中 E 元素的第一个子元素。
    • 误会二：认为 E:first-child 选中 E 元素的父元素的第一个 E 元素。
  • :last-child 匹配父元素中最初一个子元素

  • :nth-child(n) 匹配父元素中第 n 个子元素（n 能够是一个数字，一个关键字，或者一个公式）

    • 参数 n 时选中所有行
    • 参数为 n+i 时示意从第 i 行开始上面的都被选中，如 n+3，从第 3 行开始上面全副选中
    • 参数为 -n+i 时示意选中前 i 个元素，如 -n+6 示意选中前 6 个
    • 2n 示意 2 的倍数行被选中，选中偶数行
    • 2n+1 示意选中奇数行
    • 3n 示意每个 3 行选中一次
    • odd 示意奇数，even 示意偶数
  • :nth-last-child(n) 匹配倒数第 n 个同级兄弟元素
  • :nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素
  • :root 根元素
  • :not(selector)

7-4 选择器如何工作的

从右向左顺次查问

8. 伪类和伪元素的区别

两者都是形容不在文本流中的货色。

  • 其中伪类用 单冒号 示意，当元素处于某种 状态 时，为该元素增加 款式，如 a 标签的 hover；
  • 伪元素用 双冒号 示意，为了兼容老浏览器，有时候也会用单冒号示意，作用是 创立 不在文本流中的 元素，并为其增加款式，如 ::before，在指定元素前增加元素。

9. BFC

BFC 指的是格式化上下文

9-1 当一个元素造成 BFC 后:

  • 其外部元素的布局不会影响内部元素
  • 内部元素的布局不会影响外部元素。

9-2 如何造成 BFC

  • 根元素
  • 浮动元素：float 除 none 以外的值
  • 相对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • 表格类元素
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)【最罕用】

9-3 BFC 的原理 /BFC 的布局规定

  • BFC 外部的子元素，在 垂直 方向，边距会产生 重叠。
  • BFC 在页面中是 独立 的容器，里面的元素不会影响外面的元素，反之亦然。
  • BFC 区域不与旁边的 float box 区域重叠。（能够用来革除浮动带来的影响）。
  • 计算 BFC 的高度时，浮动 的子元素也参加计算。

9-4 BFC 的利用

  • 解决 margin 重叠
  • 当父元素和子元素产生 margin 重叠时，解决办法：给子元素或父元素创立 BFC
  • BFC 区域不与 float 区域重叠
  • 革除浮动

10. 定位

10-1 根本含意

  • 绝对定位，将元素的 position 设为 relative，元素绝对于 本身 content box 定位，仍 占据 原来地位 空间；
  • 相对定位，将元素的 position 设为 absolute，元素绝对于 第一个 position 不为 static 的先人元素的 padding box 定位，元素 不占据 原来地位 空间；
  • 固定定位，将元素的 position 设为 fixed，元素绝对于 浏览器窗口顶部 定位，不占据 原来地位空间

10-2 程度居中

通用计划：

  • 行内元素：父元素是块级元素，给父元素设置 text-align:center，父元素不是块级元素，先将父元素设置为块级元素，再给父元素设置 text-align:center
  • 图片：给图片设置 clear:both; display:block; margin:auto;

具体计划：

  • 计划一：

    1. 宽度定，须要谁居中，就给谁设置 margin:0 auto;
    2. 宽度不定，默认子元素宽度与父元素宽度一样，给子元素设置 display:inline-block; 或 display:inline, 将其转换成行内块级元素 / 行内元素，给父元素设置 text-align:center

  • 计划二：应用定位属性

    1. 子元素设置相对定位，父元素设置绝对定位，left: 50%; margin-left: 50px(子元素的宽度的一半 – 宽度定), 或者 transform: translateX(-50%)(宽度不定)

  • 计划三：应用 flexbox 布局实现（宽度定不定都行）

    1. 父元素设置 display: flex; justify-content: center;

10-3 垂直居中

  • 单行的行内元素：设置 行高 = 父元素的高
  • 多行的行内元素：父元素设置 display:table-cell; vertical-align:middle（行级、块级、图片都通杀）

  • 块级元素：

    1. 计划一：子元素设置相对定位，父元素设置绝对定位，子元素设置：top:50% 并且 margin-top: 子元素高度的一半(高度定)，或者transform:translateY(-50%);(高度不定)
    2. 计划二：flex 布局，给父元素设置 display:flex; align-items:center;（行级、块级、图片都通杀）

10-4 程度垂直居中

已知高度和宽度的元素

  1. 计划一：子元素设置相对定位，父元素设置绝对定位，子元素设置 left:0; right:0; top:0; bottom:0; margin:auto
  2. 计划二：子元素设置相对定位，父元素设置绝对定位，子元素设置 top:50%;left:50%(左上角垂直居中)，margin-top:- 子元素高的一半,margin-left:- 子元素宽的一半

未知高度和宽度的元素

  1. 计划一：（定位属性）子元素设置相对定位，父元素设置绝对定位，子元素设置 top:50%;left:50%(左上角垂直居中)，transform:translate(-50%,-50%)(依据本身定位实现偏移)
  2. 计划二：（flex 布局）父元素定义 display:flex; justify-content:center; align-items:center;

10-4 浮动

革除浮动的办法：

  • 父级盒子定义 高度（height）;
  • 最初一个浮动元素前面 加一个 div 空标签，并且增加款式 clear: both;
  • 蕴含浮动元素的 父级标签 增加款式 overflow 为 hidden/both;
  • 父级 div 定义 zoom;

最好的办法：

clearfix:after{/* 伪元素是行内元素 失常浏览器革除浮动办法 */
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;

那么,clear:both; 到底起了什么作用？？？

  • clear 是 CSS 中的定位属性，规定元素的哪一侧不容许其余元素浮动。那么 clear:both 就是规定在左右两侧均不容许元素浮动。
  • clear 属性只能在块级元素上其作用，这就是革除浮动款式中 display:block 的作用。
  • 另外 visibility: hidden; height: 0; 只有 content 的值为空, 写不写都无所谓。

11. 布局

11-1 两侧定宽，两头自适应

  1. 浮动 左侧设置左浮动，右侧设置右浮动即可，两头会主动地自适应。
  2. 相对定位 左侧设置为相对定位，left：0px。右侧设置为相对定位，right：0px。两头设置为相对定位，left 和 right 都为 300px，即可。两头的宽度会自适应。
  3. flexbox 布局 将左中右所在的容器设置为 display: flex，设置两侧的宽度后，而后让两头的 flex = 1，即可。
  4. 表格布局 设置整个容器的宽度为 100%，设置三个局部均为表格(display:table-cell)，而后右边的单元格为 300px，左边的单元格为 300px，即可。两头的单元格会自适应。
  5. 网格布局 grid 设置容器为网格布局，宽度为 100%，设置网格为三列，并设置每列的宽度，即可。

12. margin 重叠

margin 重叠的规定

  • 当两个 margin 都是正值 的时候，取两者的最大值；
  • 当 margin 都是负值 的时候，取的是其中绝对值较大的，而后，从 0 地位，负向位移；
  • 当 有正有负 的时候，先取出负 margin 中绝对值中最大的，而后，和正 margin 值中最大的 margin 相加, 即取和的绝对值

margin 重叠次要有四种状况的解决：

  • 相邻兄弟元素 margin-bottom 和 margin-top 重叠。能够将其中一个设为 BFC；
  • 父子元素 margin-top 重叠。能够给父元素增加 border-top | padding-top 来分隔父子元素，也可将父元素设为 BFC；
  • 父元素高度 auto，父子元素 margin-bottom 重叠，在第二种状况的解决方案上，还能够给父元素设置 height、min-height、max-height；
  • 无内容元素本身 margin-top 与 margin-bottom 重叠。能够给元素设置 border | padding | height

13. 用 css 画三角形

.triangle {
  width: 0;
  height: 0;
  border-width: 100px;
  border-style: solid;
  border-color: tomato transparent transparent transparent;  // 3 边通明，一边不通明
}

奇淫技巧 – 记住通明边框的数量： 3 点一线 (总共 4 条线，有 3 条变成点了，即变通明了，另外一条边还是线，即不通明)

14. 实现单行和多行文本溢出增加省略号

  • 单行溢出：
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  • 多行溢出：
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;  // 3 行溢出

15. 常见单位

  • px：相对单位，页面按准确像素展现
  • em：绝对单位，基准点为父节点字体的大小，如果本身定义了 font-size 按本身来计算（浏览器默认字体是 16px），整个页面内 1em 不是一个固定的值
  • rem：绝对单位，可了解为”root em”, 绝对根节点 html 的字体大小来计算，CSS3 新加属性，chrome/firefox/IE9+ 反对
  • vw：viewpoint width，视窗宽度，1vw 等于视窗宽度的 1%
  • vh：viewpoint height，视窗高度，1vh 等于视窗高度的 1%
  • vmin：vw 和 vh 中较小的那个
  • vmax：vw 和 vh 中较大的那个
  • %: 百分比

16. CSS 有哪些属性能够继承？

  1. 字体 系列属性：如 font，font-family，font-size，font-weight，font-style
  2. 文本 系列属性：如 color，text-indent(文本缩进)，text-align(文本程度对齐)，line-height，word-spacing(字距离)
  3. 元素 可见性：visibility
  4. 表格 布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
  5. 列表 属性：list-style-type、list-style-image、list-style-position

17. CSS3 有哪些新个性？

  • 选择器（E:last-child 匹配父元素的最初一个子元素 E。）;
  • 圆角（border-raduis）;
  • 多列布局（multi-column layout）;
  • 暗影（shadow）和反射（reflect）;
  • 文字特效（text-shadow）;
  • 文字渲染（text-decoration）;
  • 线性突变（gradient）;
  • 旋转（rotate）/ 缩放（scale）/ 歪斜（skew）/ 挪动（translate）;
  • 媒体查问（@media）;
  • RGBA 和透明度 ;
  • @font-face 属性;
  • 多背景图 ;
  • 盒子大小;

奇淫技巧：媒体查问盒模型，旋转圆角变（突变）暗影

18. 为什么要初始化 CSS 款式？

因为浏览器的 兼容 问题，不同浏览器对 标签 的默认值 是不同的，如果没有对浏览器的 CSS 初始化，会造成雷同页面在不同浏览器的显示存在差别。

19.CSS 优化、进步性能的办法有哪些？

  • 多个 css 可合并，并尽量减少 http 申请
  • 属性值为 0 时，不加单位（margin: 0）
  • 将 css 文件放在页面最下面（CSS 会阻塞渲染，在 CSS 文件申请、下载、解析实现之前，浏览器将不会渲染任何已解决的内容。如果放在上面，当 html 构造渲染完当前，解析 css，又会从新渲染一次，导致页面闪动）
  • 防止后辈选择符，防止链式选择符过长
  • 应用紧凑的语法（margin: 8px 6px 7px 5px;）
  • 应用语义化命名，便于保护（属于优化）
  • 尽量少的应用!impotrant，能够抉择其余选择器
  • 恪守盒子模型规定

奇淫技巧：合并简写缩短链，语义恪守盒模型

20. 回流（重排）和重绘区别？

回流（重排），reflow: 当 render tree 中的一部分（或全副）因为元素的规模 尺寸 ， 布局 ， 暗藏 等扭转时而须要从新构建；

重绘（repaint）: 当 render tree 中的一些元素须要更新属性，而这些属性只影响元素的 外观 ， 格调 ，而 不会影响布局时，称其为重绘，例如色彩扭转等。

留神：每个页面 至多须要引发一次 重排 + 重绘，而且 重排（回流）肯定 会引发 重绘。

触发重排（回流）的条件：

  • 减少或者删除可见的 dom 元素；
  • 元素的地位产生了扭转；
  • 元素的尺寸产生了扭转，例如边距，宽低等几何属性扭转；
  • 内容扭转，例如图片大小，字体大小扭转等；
  • 页面渲染初始化；
  • 浏览器窗口尺寸扭转，例如 resize 事件产生时等；

奇淫技巧：回流了解为流动，流动天然会引起布局的变动；重绘能够了解为表层绘画，那么只是外观的扭转。

21.border:none 与 border:0 的区别？

首先是性能差别：

  • {border：0;}: 把 border 设置为 0 像素，尽管在页面上看不到，然而按 border默认值了解 ，浏览器仍然对 border-width/border-color 进行了 渲染 ，即曾经 占用内存值；
  • {border：none；}被了解为 border-style:none。boder:0; 比 border:none多渲染了一个 border-width:0, 也就是为什么 border:none 的 性能 要比 border:0高；

兼容性差别：

{border:none;}当 border 为“none”时仿佛对 IE6/7 有效, 边框仍然存在, 当 border 为“0”时，所有浏览器都统一把边框暗藏。

21. BFC、IFC、GFC、FFC 是什么？

  • Block formatting context(BFC)–块级 格式化上下文；
  • Inline formatting context(IFC)–内联 格式化上下文；
  • Grid formatting context(GFC)–网格布局 格式化上下文；
  • Flex formatting context(FFC)–自适应 格式化上下文

22. CSS 属性 overflow 属性定义溢出元素内容区的内容会如何解决?

  • scroll: 肯定会出滚动条；
  • auto: 子元素内容大于父元素时呈现滚动条；
  • visible: 溢出的内容呈现在父元素之外；
  • hidden: 溢出暗藏；

23. style 标签写在 body 前后的区别？

个别状况下，页面加载时 自上而下 的。
将 style 标签至于 body 之前，为的是先 加载款式 。
若是写在 body 标签之后，因为浏览器以 逐行形式 对 html 文档进行解析，当解析到写在文档尾部的样式表时，
会导致浏览器 进行之前的渲染 ，期待 加载且解析样式表 实现之后会 从新渲染 ，在 windows 的 IE 下可能会呈现 FOUC 景象（ 页面闪动）。

24. 垂直百分比是绝对于容器高吗？

一般来说，子元素的百分比单位都是以父元素为根据。
然而 margin 和 padding 例外。元素的 height 是绝对于容器的 高度 ，然而元素的 margin 和 padding 是绝对于容器的 宽度。

25.clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop 区别

  • 网页可见区域高：document.body.clientHeight
  • 网页注释全文高：document.body.scrollHeight
  • 网页可见区域高（包含边线的高）：document.body.offsetHeight
  • 网页被卷去的高：document.body.scrollTop
  • 屏幕分辨率高：window.screen.height

每个 HTML 元素都具备clientHeight offsetHeight scrollHeight offsetTop scrollTop 这 5 个和元素高度、滚动、地位相干的属性，单凭单词很难搞分明别离代表什么意思之间有什么区别。

通过浏览它们的文档总结出法则如下：

clientHeight 和 offsetHeight属性和元素的滚动、地位没有关系 它代表元素的高度，其中：

(1)clientHeight：

  • 包含 padding 但不包含 border、程度滚动条、margin 的元素的高度。对于 inline 的元素这个属性始终是 0，单位 px，只读元素。

(2)offsetHeight：

  • 包含 padding、border、程度滚动条，但不包含margin 的元素的高度。对于 inline 的元素这个属性始终是 0，单位 px，只读元素。

接下来探讨呈现有滚动条时的状况：

当本元素的 子元素 比本元素高 且overflow=scroll时，本元素会 scroll，这时：

(3)scrollHeight:

  • 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中 本元素有局部被暗藏 了，scrollHeight包含 以后不可见局部 的元素的 高度。
  • 可见局部的高度其实就是 clientHeight，也就是 scrollHeight>=clientHeight 恒成立。在有滚动条时探讨 scrollHeight 才有意义，在没有滚动条时 scrollHeight==clientHeight 恒成立。单位 px，只读元素。

(4)scrollTop:

  • 在 有滚动条时 ， 滚动条向下滚动 的间隔也就是 元素顶部被遮住局部 的高度。在 没有滚动条 时scrollTop==0恒成立。单位 px，可读可设置。。

(5)offsetTop:

  • 以后 元素顶部 间隔 最近父元素顶部 的间隔, 和有没有滚动条没有关系。单位 px，只读元素。

26. 在一个未知宽度的父元素内如何创立一个等边正方形

1. 利用 padding

<html>
    <head>
        <meta charset="utf-8" />
        <title> 新标签页 </title>
    </head>
    <script></script>

    <body>
        <div class="content">
            <div class="son"> 包裹内容 </div>
        </div>
    </body>
        <style>
        .content {
            /* width: 100px;
            height: 100px; */
        }
        .son {
            width: 10%;
            padding-bottom: 10%; /* padding 百分比绝对父元素宽度计算 */
            height: 0;
            border: 1px solid red;
        }
    </style>
</html>

成果如下：


效果图

2.padding-bottom+:after+absolute

<html>
    <head>
        <meta charset="utf-8" />
        <title> 新标签页 </title>
    </head>
    <body>
        <div class="content">
            <div class="son"> 包裹内容 </div>
        </div>
    </body>
    <style>
        .content {
            width: 10%;
            background: #ccc;
        }

        .content:after {
            content: '';
            display: block;
            padding-bottom: 100%;
        }

        .son {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
    <script></script>
</html>

成果如下：

27. css 动画

属性 含意
animation（动画） 用于设置动画属性，他是一个简写的属性，蕴含 6 个属性
transition（过渡） 用于设置元素的款式适度，和 animation 有着相似的成果，但细节上有很大的不同
transform（变形） 用于元素进行旋转、缩放、挪动或歪斜，和设置款式的动画并没有什么关系，就相当于 color 一样用来设置元素的“表面”
translate（挪动） translate 只是 transform 的一个属性值，即挪动。

退出移动版