html和css的面试知识点总结（附示例）

概述html和css的面试知识点总结（附示例） 本篇文章给大家带来的内容是关于HTML和CSS的面试知识点总结（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

CSS优先级算法

优先级就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准
优先级为: !important > ID > class > tag important 比 内联优先级高
important声明比Js的优先级要高

第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为0100。第三等：代表类，伪类和属性选择器，如.content，权值为0010。第四等：代表类型选择器和伪元素选择器，如p p，权值为0001。通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。继承的样式没有权值。

CSS定义的权重

/ 以下是权重的规则：标签的权重为1，class的权重为10，ID的权重为100，以下/// 例子是演示各种定义的权重值：/*权重为1*/div{}/*权重为10*/.class1{}/*权重为100*/#ID1{}/*权重为100+1=101*/#ID1 div{}/*权重为10+1=11*/.class1 div{}/*权重为10+10+1=21*/.class1 .class2 div{}// 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

CSS3新增伪类

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled
:Disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中

居中一个浮动元素

给div设置一个宽度，然后添加margin:0 auto属性div{    wIDth:200px;    margin:0 auto; }//确定容器的宽高 宽500 高 300 的层//设置层的外边距 .div {      wIDth:500px ; height:300px;//高度可以不设      margin: -150px 0 0 -250px;      position:relative;         //相对定位      background-color:pink;     //方便看效果      left:50%;      top:50%; }

让绝对定位的div居中

  position: absolute;  wIDth: 1200px;  background: none;  margin: 0 auto;  top: 0;  left: 0;  bottom: 0;  right: 0;

CSS3有新特性

新增各种css选择器 （: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
阴影和反射 （ShadowReflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
线性渐变 （gradIEnt）
旋转 （transform）
增加了旋转,缩放,定位,倾斜,动画，多背景
transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:

新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}d性盒模型 display: flex;多列布局 column-count: 5;媒体查询 @media (max-wIDth: 480px) {.Box: {column-count: 1;}}个性化字体 @Font-face{Font-family: borderWeb; src:url(borderW0.eot);}颜色透明度 color: rgba(255, 0, 0, 0.75);圆角 border-radius: 5px;渐变 background:linear-gradIEnt(red, green, blue);阴影 Box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);倒影 Box-reflect: below 2px;文字装饰 text-stroke-color: red;文字溢出 text-overflow:ellipsis;背景效果 background-size: 100px 100px;边框效果 border-image:url(bt_blue.png) 0 10;转换    旋转 transform: rotate(20deg);    倾斜 transform: skew(150deg, -10deg);    位移 transform: translate(20px, 20px);    缩放 transform: scale(.5);平滑过渡 Transition: all .3s ease-in .1s;动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

用纯CSS创建一个三角形

// 把上、左、右三条边隐藏掉（颜色设为 transparent）#demo {  wIDth: 0;  height: 0;  border-wIDth: 20px;  border-style: solID;  border-color: transparent transparent red transparent;}

浏览器的兼容性

png24位的图片在ie6浏览器上出现背景，解决方案是做成PNG8.

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一

IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;firefox下,只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性

IE下,even对象有x,y属性,但是没有pageX,pageY属性.firefox下,event对象有pageX,pageY属性,但是没有x,y属性

BFC

块级格式化上下文（内部元素不会影响外部元素）

渲染规则：
1.bfc元素的垂直方向边距发生重叠
2.bfc区域不会与浮动元素重叠
3.独立容器
4.计算bfc高度时，浮动元素也会参与计算

创建bfc：
1.overflow
2.浮动不为none
3.position不是static
4.display与table有关

display:inline-block 什么时候会显示间隙

移除空格、使用margin负值、使用Font-size:0、letter-spacing、word-spacing

清除浮动

.clearfix:after {  visibility: hIDden;  display: block;  Font-size: 0;  content: " ";  clear: both;  height: 0;}

1.可用a标签 设置display：inline-block；wIDth：100%， 把含浮动元素的div撑起来（div不用设计高度）
2.overflow：hIDden(BFC)
3.可用a标签 设置display：block；wIDth：100%，clear：both
4.div=》display：table
5.div=》display：table-cell
6.div=》display：flow-root（触发BFC）
7.div::after代替a标签=》content:’’ display:block; clear:both;(最下方存在一个没有高度的元素)
8.使用.clearfix:after{content:’’ display:block; clear:both;}
9.让div也浮动（BFC）

盒子模型

盒子模型构成：内容(content)、内填充(padding)、 边框(border)、外边距(margin)
ie8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)
标准(W3C)盒模型：元素宽度 = wIDth + padding + border + margin
怪异(IE)盒模型：元素宽度 = wIDth + margin
标准浏览器通过设置 CSS3 的 Box-sizing: border-Box 属性，触发“怪异模式”解析计算宽高

Box-sizing: content-Box; // 默认的标准(W3C)盒模型元素效果Box-sizing: border-Box; // 触发怪异(IE)盒模型元素的效果Box-sizing: inherit; // 继承父元素 Box-sizing 属性的值

继承

可以继承的样式：Font-size、Font-family、color、List-style、cursor不可继承的样式：wIDth、height、border、padding、margin、background

隐藏元素的方法

visibility: hIDden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在opacity: 0; CSS3属性，设置0可以使一个元素完全透明position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外display: none; 元素会变得不可见，并且不会再占用文档的空间。transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留<div hIDden="hIDden"> HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态height: 0; 将元素高度设为 0 ，并消除边框filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

rgba() 和 opacity

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

## 浏览器的Js兼容性 ##

当前样式：getComputedStyle(el, null) VS el.currentStyle事件对象：e VS window.event鼠标坐标：e.pageX, e.pageY VS window.event.x, window.event.y按键码：e.which VS event.keyCode文本节点：el.textContent VS el.innerText

li与li之间有看不见的空白间隔

li排列受到中间空白(回车/空格)等的影响，因为空白也属于字符，会被应用样式占据空间，产生间隔
解决办法：在ul设置设置Font-size=0,在li上设置需要的文字大小

px、em

px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能
em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级Font-size

FOUC(Flash of Unstyled Content)

当使用 @import 导入 CSS 时，会导致某些页面在 IE 出现奇怪的现象： 没有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效”，简称为FOUC
产生原因：当样式表晚于结构性HTML加载时，加载到此样式表时，页面将停止之前的渲染。
等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。
解决方法：使用 link 标签将样式表放在文档 head

CSS优化、提高性能

多个CSS合并，尽量减少http请求
将CSS文件放在页面最上面
移除空的CSS规则
避免使用CSS表达式
选择器优化嵌套，尽量避免层级过深
充分利用CSS继承属性，减少代码量
抽象提取公共样式，减少代码量
属性值为0时，不加单位
属性值为小于1的小数时，省略小数点前面的0
CSS雪碧图

全屏滚动

原理类似图片轮播原理，超出隐藏部分，滚动时显示
可能用到的CSS属性：overflow:hidden; transform:translate(100%, 100%); display:none;

响应式设计IE

$(window).resize(function () {  screenRespond();});screenRespond();function screenRespond(){var screenWIDth = $(window).wIDth();if(screenWIDth <= 1800){  $("body").attr("class", "w1800");}if(screenWIDth <= 1400){  $("body").attr("class", "w1400");}if(screenWIDth > 1800){  $("body").attr("class", "");}}

a标签上四个伪类的执行顺序

link > visited > hover > active

Chrome支持小于12px 的文字

.shrink{    -webkit-transform:scale(0.8);    -o-transform:scale(1);    display:inline-block;  }

TCP传输的三次握手四次挥手策略

为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送 后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK

发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。 最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。 若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包

断开一个TCP连接则需要“四次握手”：

第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。

第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。

第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。

第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。

http和httpS

http协议通常承载于TCP协议之上，在http和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的httpS
默认http的端口号为80，httpS的端口号为443

httpS安全
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用httpS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性

GET和POST的区别，何时使用POST

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.queryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠 总结

以上是内存溢出为你收集整理的html和css的面试知识点总结（附示例）全部内容，希望文章能够帮你解决html和css的面试知识点总结（附示例）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。