HTML/JavaScript/CSS
CSS

高频

水平居中的方法，垂直居中的方法？

  • 内联元素居中
    • 通过text-align: center;实现水平居中，通过line-height = height实现垂直居中。
  • 块级元素居中
    • 通过flex的justify-content和align-item实现水平/垂直居中。
    • 设置margin: auto实现水平/垂直居中。如果只是水平居中则使用margin:0 atuo;。
    • 设置position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);实现水平/垂直居中。
    • 设置position: absolute; top: calc(50% - height/2px); left: (50% - width/2px);实现水平/垂直居中，但需要知道元素宽高

使元素消失的方法有哪些？

  1. display:none;能将元素隐藏起来，并且会改变页面布局，不会触发该元素已经绑定的事件。
  2. visibility:hidden;能将该元素隐藏起来，不会改变页面布局仍占据原有空间，但不会触发该元素已经绑定的事件。
  3. opacity:0;能将该元素隐藏起来，仍占据原有空间，并且会触发该元素已经绑定的事件。
  4. position:absolute;top:-1000px;left:-1000px;这个方法是通过将left和top的值设的很大，让元素定位到浏览器外面。不占据空间，不能点击。

页面导入样式时，使用link和@import有什么区别？

  • link是html标签，页面载入时同时加载，除了加载css外，还可以定义RSS等其他事务，无兼容问题；
  • @import属于CSS范畴，在页面完全加载以后加载，只能加载CSS；
  • link方式的样式的权重高于@import的权重

文字换行有什么办法？

  • 使用word-wrap属性，可以控制文本的换行方式。
    • normal: 只在合适的时候换行，不会在单词内部换行，如果一个单词长度超出了容器长度，单词将超出边界；
    • break-word: 比容器长的单词将在单词内部换行；
  • word-break属性关注单词内的换行方式，一般在设置word-wrap: break-word时使用，它有以下几种取值：
    • normal: 默认属性值，不允许在单词中间截断。
    • break-all: 表示都全部单词内换行，即便这个单词并没有长得超出了边界。处理中文则不会生效。
    • keep-all: 指CJK（中/日、韩）文本超出区域不断行，但会在标点出折行。
  • white-space是用来控制文本中空格和换行的属性。
    • normal:默认属性值，表示文本中连续多个空格换行都会被合并为一个空格；
    • nowrap:表示文本不会被自动换行；
    • pre:表示文本中连续多个空格换行都会被保留，不会自动换行。
    • pre-wrap:表示文本中连续多个空格换行会被保留，超出容器宽度时，会发生换行。
    • pre-line:表示文本中连续多个空格会被合并成一个空格，但是换行会被保留，会自动换行。

如果文字不换行，可以用text-overflow:ellipsis;显示省略符号来代表被修剪的文本。

盒模型是什么？

页面中的所有元素都可以看成一个盒子，由4个属性组成的（content（内容），padding（内边距），border（边框），margin（外边距））， 有标准盒模型和ie盒模型，在标准盒模型中，元素的宽度和高度等于内容区域的宽度和高度， 在ie盒模型中，元素的宽度和高度定义为内容区域的宽度和高度加上内边距和边框的宽度和高度。 用box-sizing属性来控制元素使用哪种盒模型。box-sizing属性有两个值：content-box和border-box。content-box是标准盒模型，border-box是IE盒模型。默认值是content-box。

box-sizing: content-box
box-sizing: border-box

讲一讲css3新特点？

2001年5月23日W3C完成了CSS3的工作草案（但至今没有定稿），主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

  • 盒模型
  • 新增文字属性
    • word-wrap: normal|break-word 使用浏览器的默认换行或者允许单词内换行
    • text-overflow: clip|ellipsis 设置当前行超过指定容器的边界时如何显示，修剪文本或者显示省略符号来代表被修剪的文本
  • 新增颜色透明度/渐变
  • 新增背景属性background-size，background-origin，background-break，background-clip
  • 新增边框属性border-radius，border-image，box-shadow
  • transform 转换
  • transition 过渡，多个属性之间用逗号进行分隔，必须规定过渡效果，持续时间两个内容，语法为：transition: CSS属性, 花费时间, 效果曲线（默认ease）, 延迟时间（默认0）
  • animation 动画
  • 新增弹性布局，网格布局，多列布局
  • 媒体查询
  • 添加了伪类/伪元素/多重/属性选择器，例如:hover，::before ::after ::selection first-line/letter，ele1, ele2，[attr=value]。

css的渲染优先级？

  • 选择器都有一个权值，权值越大越优先
    • 内联样式表的权值最高 1000
    • ID 选择器的权值为 100
    • Class 类选择器的权值为 10
    • HTML 标签选择器的权值为 1
  • 当权值相等时，后出现的样式表设置要优于先出现的样式表设置
  • 网页编写者设置的CSS 样式会覆盖浏览器所设置的样式，后来指定的CSS 样式会覆盖继承的CSS 样式，后面指定的CSS样式会覆盖之前指定的CSS样式，后定义class会覆盖先定义的class
  • 在同一组属性设置中标有“!important”规则的优先级最大

clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？

BFC是什么？

BFC即块级格式化上下文(Block Formatting Contexts)，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

BFC 特性及应用

  • 避免外边距重叠，如果两个相邻元素在不同的BFC中，就能避免外边距折叠。但属于同一个BFC的两个相邻元素的外边距仍会发生重叠。
  • 可以包含浮动的元素，其高度能被其内部的浮动元素撑开，因此可以清除浮动。

只要元素满足下面任一条件即可触发 BFC 特性：

  • html根标签
  • float: left|right
  • overflow: hidden|auto|scroll，就是不能为visible
  • display: table-cell|table-caption|inline-block|inline-flex|flex
  • position: absolute|fixed

了解float浮动布局吗？

float 属性早期用于图文混排, 实现文字环绕的效果。

元素一旦浮动后（即float: left），脱离文档流，朝着向左或向右方向移动，不占据原来的位置，但会影响其他元素的文本。

当父元素一行内显示不下所有浮动元素时，显示不下的会会换行。被挤落下来的元素，会躲开被上一层元素占据的最大高度。

div1
内部文本被影响，这种特性常常被用于实现网页中的多列布局、图像与文本的并排显示等效果。div2(f)
div3(f)
span3.1
div4
div5
div6(f)

清除浮动的方法？

在文档流中，父元素的高度默认是由子元素撑开的。当父元素如果不设置高度，而且父元素内所有的子元素都设置了浮动，没有了子元素来撑起父元素的高度， 父元素的高度将会是0，引起高度坍塌。导致页面布局混乱。

浮动元素会脱离正常的文档流，可能导致父元素的高度塌陷，然后会影响下一个元素的文本（本段预期应在下一行展示），清除浮动就是这个问题。

  • 转成BFC，其高度能被其内部的浮动元素撑开。
  • 在浮动元素后面添加一个元素，并为其添加clear: both;样式。这个元素可以是实际的DOM元素，也可以是一个看不见的元素。缺点是它需要在你的HTML中添加额外的元素。
  • 使用::after或::before伪元素并为其添加clear: both;样式来清除浮动。这种方法的优点是不需要在HTML中添加额外的元素，但缺点是它可能会影响到其他样式（如背景和边框的渲染）。

外边距合并是什么意思？

当两个外边距相邻时，它们会合并为较大的那一个。 合并会发生在普通文档流的相邻块级元素的垂直外边距上。阻止外边距合并的方法有：

  • 使用内边距或透明边框代替外边距
  • 触发BCF（但两个相邻的块级盒子的垂直外边距会触发重叠）

width=device-width以及1rem、1em的含义？

设备像素（device pixels）是指与硬件设备直接相关的像素，是真实的屏幕设备中的像素点。比如说，一个电脑显示器的参数中，最佳分辨率是1920x1080，那么指的就是这个显示器在屏幕上用于显示的实际像素点，也就是设备像素。

另一个概念是css像素（css pixels）。css像素是指网页布局和样式定义所使用的像素，也就是说，css代码中的px，对应的就是css像素。 那么，css像素和设备像素有什么区别呢？简单地说，css像素比设备像素要更“虚拟”一些。下面来解释这一点。

css像素和设备像素之间是一种可变的转化关系。在100%缩放比例下，1个css像素等于1个设备像素。 在表示某一数目的css像素时，在放大状态下使用了更多的设备像素，而在缩小状态下使用了更少的设备像素。这就是css像素和设备像素的概念。

视口（viewport），指的是浏览器窗口中用来显示网页的区域。以浏览器来说，就是浏览器的窗口内容区域（除去标题栏，菜单栏，地址栏，状态栏等等浏览器的“周边”的东西）。 视口表现得像是之上的一个块元素，它限制并确定的宽度，但却不属于html结构，不能被设置样式。 而且，任何时候，视口的尺寸都会随着浏览器窗口的大小变化而变化。桌面电脑中的视口，就是这样的一个概念。

相比桌面电脑，在手机上浏览网页，最大的差异在于屏幕尺寸。电脑端的页面到手机上，很容易出现水土不服（一些流体布局的网页会在过窄的视口中变得一团乱）， 为了让用户在手机上也获得最佳的网页浏览体验，应该让视口更宽，超越屏幕的宽度。所以，在手机浏览器中，视口被划分为了两个：可见视口（visual viewport）和布局视口（layout viewport）。

  • 可见视口是指当前在手机屏幕上显示的部分。当你做缩放的时候，可见视口的尺寸（css像素值）也会变化。
  • 和可见视口不同，布局视口则是整个页面的窗口，用于元素布局和尺寸计算（比如百分比的宽度值），而且比可见视口明显要更宽。无论你缩放，或者滑动页面，甚至翻转手机屏幕，布局视口始终不变。 布局视口的宽度是由手机浏览器定义的，随浏览器不同而不同。比如Safari是980px，Android Webkit是800px。这都远比屏幕宽度值要大。

手机中的布局视口是可以更改的。你一定在很多移动版网页中见到过下边这个标签元素。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

这其中有一句width=device-width，它的意思是，把手机浏览器的布局视口的宽度，更改为当前设备的宽度，也就是等于可见视口。

  • em，是一个相对单位。相对于当前对象内文本的font-size，如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px。
  • rem，是一个相对单位。是相对HTML根元素，通过rem既可以做到只修改根元素就可以成比例的调整所有字体。

动画？

中级

无样式内容闪烁（FOUC）Flash of Unstyle Content 如何解决？

@import导入CSS文件会等到文档加载完后再加载CSS样式表。因此，在页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式的。

解决方法：使用link标签加载CSS样式文件。因为link是顺序加载的，这样页面会等到CSS下载完之后再下载HTML文件，这样先布局好，就不会出现FOUC问题。

说说CSS渐变？

CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。

参数：其共有三个参数，第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

中频

低频

JavaScriptTS