04HTML和CSS知识点总结（四）

[目录]

1、为什么要初始化样式？

由于浏览器的兼容性问题，不同的浏览器对标签的默认样式值是不同的，若不初始化会造成不同浏览器之间的差异，但是初始化CSS会对搜索引擎优化造成影响

2、BFC是什么？

BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向会发生margin重叠的问题

BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

3、Doctype的作用，严格模式英语混杂模式有什么区别？

• Doctype用于告知浏览器该以何种模式来渲染文档
• 严格模式：页面排版及JS解析是以该浏览器支持的最高标准来执行
• 混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

4、HTML常见兼容性问题都有哪些？怎么解决？

• 双边距bug：float引起的，使用dispaly:inline解决
• 3像素问题：float引起的，使用dispaly:inline -3px;解决
• 超链接hover点击后失效：使用正确的书写顺序link visited hover active
• ie z-index问题：给父级添加position:relative
• png透明：使用js代码更改
• Min-height最小高度：用!important解决
• select在ie6下被遮盖：使用iframe嵌套
• 没办法定义1px左右的宽度容器：在ie6默认的行高造成的，使用over:hidden,zoom:0.08,line-height:1px解决
• IE5——8不支持opacity：

.opacity{
    opacity:0.4;
    filter:alpha(opacity=60);/*for IE5——7*/
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";/*for IE8*/
}

• IE6不支持PNG透明背景：IE6下使用GIF图片解决

5、对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链CSS和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性

6、前端页面有哪三层构成，分别是什么？

结构层HTML、表示层CSS、行为层js

7、空元素有哪些？

<br> <hr> <img> <input> <link> <meta> <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

8、文档的不同注释方式是什么？

• HTML：<!--注释内容-->
• CSS：/*注释内容*/
• JavaScript：/* 多行注释方式 */ //单行注释方式

9、disabled和readonly的区别？

• disabled指当input元素加载时禁用此元素，input内容不会随着表单提交
• readonly规定输入字段为只读，input内容会随着表单提交
• 无论设置readonly还是disabled，通过js脚本都能改正input的value

10、主浏览器内核私有属性CSS前缀是什么？

• mozilla内核（firefox，flock等） -moz
• webkit内核（safari，chrome等） -webkit
• opera内核（opera浏览器） -o
• trident内核（ie浏览器） -ms

11、前端性能优化

前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验

• 页面的内容方面优化
  • 通过文件合并、CSS雪碧图、使用base64等方式来减少HTTP请求数，避免过多的请求造成等待的情况
  • 通过DNS缓存等机制来减少DNS的查询次数
  • 通过设置缓存策略，对常用不变的资源进行缓存
  • 使用延迟加载的方式，来减少页面首屏加载时需要请求的资源，延迟加载的资源当用户需要访问时，再去请求加载
  • 通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度
• 服务器方面优化
  • 使用CDN服务，来提高用户对于资源请求时的响应速度
  • 服务器端启用Gzip、Deflate等方式对于传输的资源进行压缩，减小文件的体积
  • 尽可能减小cookie的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的cookie
• CSS和JavaScript方面优化
  • 把样式表放在页面的head标签中，减少页面的首次渲染时间
  • 避免使用@import标签
  • 尽量把js脚本放在页面底部或者使用defer或async属性，避免脚本的加载和执行阻塞页面的渲染
  • 通过对JavaScript和CSS的文件进行压缩，来减小文件的体积

12、扫描二维码登录网页是什么原理，前后两个事件是如何联系的？

核心过程应该是：浏览器获得一个临时ID，通过长链接等待客户端扫描带有此ID的二维码后，从长链接中获取客户端上报给server的账号信息进行展示，并在客户端点击确认后，获得服务器授信的令牌，进行随后的信息交互过程。在超时、网络断开、其他设备上登录后，此前获得的令牌或丢失、或失效，对授权过程形成有效的安全防护

二维码登录网页的基本原理是，用户进入登录网页后，服务器生成一个 uid 来标识一个用户。对应的二维码对应了一个对应 uid 的链接，任何能够识别二维码的应用都可以获得这个链接，但是它们没有办法和对应登录的服务器响应。比如微信的二维码登录，只有用微信识这个二维码才有效。当微信客户端打开这个链接时，对应的登录服务器就获得了用户的相关信息。这个时候登录网页根据先前的长连接获取到服务器传过来的用户信息进行显示。然后提前预加载一些登录后可能用到的信息。当客户端点击确认授权登陆后，服务器生成一个权限令牌给网页，网页之后使用这个令牌进行信息的交互过程。由于整个授权的过程都是在手机端进行的，因此能够很好的防止 PC 上泛滥的病毒。并且在超时、网络断开、其他设备上登录后，此前获得的令牌或丢失、或失效，对授权过程能够形成有效的安全防护。

13、CSS选择符有哪些？

• id选择器（#myid）
• 类选择器（.myclassname）
• 标签选择器（div,h1,p）
• 后代选择器（h1p）
• 相邻后代选择器（ul>li）
• 兄弟选择器（li~a）
• 相邻兄弟选择器（li+a）
• 属性选择器（a[rel="external"]）
• 伪类选择器（a:hover,li:nth-child）
• 伪元素选择器（::before、::after）
• 通配符选择器（*）

14::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。

在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号来表示伪元素。

伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。

15、伪类与伪元素的区别

• css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素
• 伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态
• 伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中
• 有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览
  器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素

16、CSS 中哪些属性可以继承？

• 字体系列属性：

font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

• 文本系列属性：

text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、
text-transform、direction、color

• 表格布局属性：

caption-sideborder-collapseempty-cells

• 列表属性：

list-style-type、list-style-image、list-style-position、list-style

• 光标属性：

cursor

• 元素可见性：

visibility

• 还有一些不常用的；speak，page，设置嵌套引用的引号类型quotes等属性

注意：当一个属性不是继承属性时，可以使用inherit关键字指定一个属性应从父元素继承它的值，inherit关键字用于显式地指定继承性，可用于任何继承性/非继承性属性。

17、CSS 优先级算法如何计算？

判断优先级时，首先我们会判断一条属性声明是否有权重，也就是是否在声明后面加上了!important。一条声明如果加上了权重，那么它的优先级就是最高的，前提是它之后不再出现相同权重的声明。如果权重相同，我们则需要去比较匹配规则的特殊性

一条匹配规则一般由多个选择器组成，一条规则的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性可以分为四个等级，第一个等级是行内样式，为1000，第二个等级是id选择器，为0100，第三个等级是类选择器、伪类选择器和属性选择器，为0010，第四个等级是元素选择器和伪元素选择器，为0001。规则中每出现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等级的叠加，不会产生进位。选择器特殊性值的比较是从左向右排序的，也就是说以1开头的特殊性值比所有以0开头的特殊性值要大。比如说特殊性值为1000的的规则优先级就要比特殊性值为0999的规则高。如果两个规则的特殊性值相等的时候，那么就会根据它们引入的顺序，后出现的规则的优先级最高

18、关于伪类 LVHA 的解释?

a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active

当链接未访问过时：

• 当鼠标滑过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明
• 当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序

当链接访问过时，情况基本同上，只不过需要将:link换成:visited：只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题

19、CSS3 新增伪类有那些？

• elem:nth-child(n)选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数值，也可以接受函数
• elem:nth-last-child(n)作用同上，不过是从后开始查找
• elem:last-child选中最后一个子元素
• elem:only-child如果elem是父元素下唯一的子元素，则选中之
• elem:nth-of-type(n)选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数
• elem:first-of-type选中父元素下第一个elem类型元素
• elem:last-of-type选中父元素下最后一个elem类型元素
• elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选中该元素
• elem:empty选中不包含子元素和内容的elem类型元素
• elem:target选择当前活动的elem元素
• :not(elem)选择非elem元素的每个元素
• :enabled 控制表单控件的禁用状态
• :disabled 控制表单控件的禁用状态
• :checked单选框或复选框被选中

20、如何居中 div？

一般常见的几种居中的方法有：

对于宽高固定的元素

1. 我们可以利用margin:0auto来实现元素的水平居中
2. 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中
3. 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心
4. 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心
5. 使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中

对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中

• 水平居中：给 div 设置一个宽度，然后添加 margin:0auto 属性

div {
  width: 200px;
  margin: 0auto;
}

• 水平居中，利用 text-align:center 实现

.container {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}

• 让绝对定位的 div 居中

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /*方便看效果*/
}

• 水平垂直居中一

/*确定容器的宽高宽500高300的层设置层的外边距div{*/
position:absolute;/*绝对定位*/
width:500px;
height:300px;
top:50%;
left:50%;
margin:-150px00-250px;/*外边距为自身宽高的一半*/
background-color:pink;/*方便看效果*/
}

• -水平垂直居中二

/*未知容器的宽高，利用`transform`属性*/
div {
  position: absolute; /*相对定位或绝对定位均可*/
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink; /*方便看效果*/
}

• 水平垂直居中三

/*利用flex布局实际使用时应考虑兼容性*/
.container {
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.containerdiv {
  width: 100px;
  height: 100px;
  background-color: pink; /*方便看效果*/
}

• 水平垂直居中四

/*利用text-align:center和vertical-align:middle属性*/
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}

.container::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
  white-space: normal;
  vertical-align: middle;
}

21、display 有哪些值？说明他们的作用

• block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示
• none 元素不显示，并从文档流中移除
• inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示
• inline-block默认宽度为内容宽度，可以设置宽高，同行显示
• list-item 像块类型元素一样显示，并添加样式列表标记
• table 此元素会作为块级表格来显示
• inherit 规定应该从父元素继承display属性的值

22、position 的值 relative 和 absolute 定位原点是？

• absolute：生成绝对定位的元素，相对于值不为static的第一个父元素的paddingbox进行定位，也可以理解为离自己这一级元素最近的一级position设置为absolute或者relative的父元素的paddingbox的左上角为原点的
• fixed（老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位
• relative：生成相对定位的元素，相对于其元素本身所在正常位置进行定位
• static：默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right,z-index声明）
• inherit：规定从父元素继承position属性的值

23、CSS3 有哪些新特性？

• 新增各种CSS选择器 （:not(.input)：所有class不是“input”的节点）
• 圆角 （border-radius:8px）
• 多列布局 （multi-columnlayout）
• 阴影和反射 （Shadow\Reflect）
• 文字特效 （text-shadow）
• 文字渲染 （Text-decoration）
• 线性渐变 （gradient）
• 旋转 （transform）
• 缩放，定位，倾斜，动画，多背景

24、请解释一下 CSS3 的 Flexbox（弹性盒布局模型），以及适用场景？

flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目

一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式

对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例

25、用纯 CSS 创建一个三角形的原理是什么？

采用的是相邻边框连接处的均分原理，将元素的宽高设为0，只设置border，把任意三条边隐藏掉（颜色设为transparent），剩下的就是一个三角形

26、一个满屏品字布局如何设计?

简单的方式：上面的div宽100%，下面的两个div分别宽50%，然后用float或者inline使其不换行即可

27、CSS 多列等高如何实现？

• 利用padding-bottom|margin-bottom正负值相抵，不会影响页面布局的特点。设置父容器设置超出隐藏（overflow:hidden），这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差
• 利用table-cell所有单元格高度都相等的特性，来实现多列等高
• 利用flex布局中项目align-items属性默认为stretch，如果项目未设置高度或设为auto，将占满整个容器的高度的特性，来实现多列等高

28、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？

• png24位的图片在iE6浏览器上出现背景
  • 解决方案：做成PNG8，也可以引用一段脚本处理
• 浏览器默认的margin和padding不同
  • 解决方案：加一个全局的*{margin:0;padding:0;}来统一
• IE6双边距bug：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。#box{float:left;width:10px;margin:00010px;}这种情况之下IE会产生20px的距离
  • 解决方案：在float的标签样式控制中加入_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
• 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用"\9"这一标记，将IE游览器从所有情况中分离出来。接着，再次使用"+"将IE8和IE7、IE6分离开来，这样IE8已经独立识别

.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9;/*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

• IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性
  • 解决方法：统一通过getAttribute()获取自定义属性
• IE下，event对象有x、y属性，但是没有pageX、pageY属性;Firefox下，event对象有ageX、pageY属性，但是没有x、y属性
  • 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数
• Chrome中文界面下默认会将小于12px的文本强制按照12px显示
  • 解决方法：1.可通过加入CSS属性-webkit-text-size-adjust:none;解决。但是，在chrome更新到27版本之后就不可以用了;2.还可以使用-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.75);收缩的是整个span的大小，这时候，必须要将span转换成块元素，可以使用display：block/inline-block/...；
• 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了
  • 解决方法：改变CSS属性的排列顺序L-V-H-A
• 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式
  • 养成书写DTD声明的好习惯

29、li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

• 浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格。而为了美观。我们通常是一个<li>放在一行，这导致<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度
• 为<li>设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等;将所有<li>写在同一行。不足：代码不美观;将<ul>内的字符尺寸直接设为0，即font-size:0。不足：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔;消除<ul>的字符间隔letter-spacing:-8px，不足：这也设置了<li>内的字符间隔，因此需要将<li>内的字符间隔设为默认letter-spacing:normal

30、什么是包含块，对于包含块的理解

包含块（containingblock）就是元素用来计算和定位的一个框

• 根元素（很多场景下可以看成是）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小
• 对于其他元素，如果该元素的position是relative或者static，则“包含块”由其最近的块容器祖先盒的contentbox边界形成
• 果元素position:fixed，则“包含块”是“初始包含块
• 如果元素position:absolute，则“包含块”由最近的position不为static的祖先元素建立，具体方式如下：
  • 如果该祖先元素是纯inline元素，则规则略复杂。假设给内联元素的前后各生成一个宽度为0的内联盒子（inlinebox），则这两个内联盒子的paddingbox外面的包围盒就是内联元素的“包含块”
  • 如果该内联元素被跨行分割了，那么“包含块”是未定义的，也就是CSS2.1规范并没有明确定义，浏览器自行发挥否则，“包含块”由该祖先的paddingbox边界形成
  • 如果没有符合条件的祖先元素，则“包含块”是“初始包含块”

---

参考【1】：https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Html/Html.md

参考【2】：https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md