资讯专栏INFORMATION COLUMN

css&html面试知识点

Bamboy / 711人阅读

摘要:第二等代表选择器,如,权值为。接收端收到后,回传一个带有标志的数据包以示传达确认信息。第四次挥手主动关闭方收到后,发送一个给被动关闭方,确认序号为收到序号,至此,完成四次挥手。

CSS优先级算法

参考:http://www.bslxx.com/a/miansh...
http://www.bslxx.com/a/miansh...
http://www.bslxx.com/a/miansh...
http://www.bslxx.com/a/miansh...

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

</>复制代码

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

</>复制代码

  1. / 以下是权重的规则:标签的权重为1class的权重为10id的权重为100,以下/// 例子是演示各种定义的权重值:
  2. /*权重为1*/
  3. div{
  4. }
  5. /*权重为10*/
  6. .class1{
  7. }
  8. /*权重为100*/
  9. #id1{
  10. }
  11. /*权重为100+1=101*/
  12. #id1 div{
  13. }
  14. /*权重为10+1=11*/
  15. .class1 div{
  16. }
  17. /*权重为10+10+1=21*/
  18. .class1 .class2 div{
  19. }
  20. // 如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现
CSS3新增伪类

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。
p:only-child 选择属于其父元素的唯一子元素的每个

元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

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

居中一个浮动元素

</>复制代码

  1. 给div设置一个宽度,然后添加margin:0 auto属性
  2. div{
  3. width:200px;
  4. margin:0 auto;
  5. }
  6. //确定容器的宽高 宽500 高 300 的层
  7. //设置层的外边距
  8. .div {
  9. width:500px ; height:300px;//高度可以不设
  10. margin: -150px 0 0 -250px;
  11. position:relative; //相对定位
  12. background-color:pink; //方便看效果
  13. left:50%;
  14. top:50%;
  15. }

让绝对定位的div居中

</>复制代码

  1. position: absolute;
  2. width: 1200px;
  3. background: none;
  4. margin: 0 auto;
  5. top: 0;
  6. left: 0;
  7. bottom: 0;
  8. 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:

</>复制代码

  1. 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
  2. 弹性盒模型 display: flex;
  3. 多列布局 column-count: 5;
  4. 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
  5. 个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
  6. 颜色透明度 color: rgba(255, 0, 0, 0.75);
  7. 圆角 border-radius: 5px;
  8. 渐变 background:linear-gradient(red, green, blue);
  9. 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
  10. 倒影 box-reflect: below 2px;
  11. 文字装饰 text-stroke-color: red;
  12. 文字溢出 text-overflow:ellipsis;
  13. 背景效果 background-size: 100px 100px;
  14. 边框效果 border-image:url(bt_blue.png) 0 10;
  15. 转换
  16. 旋转 transform: rotate(20deg);
  17. 倾斜 transform: skew(150deg, -10deg);
  18. 位移 transform: translate(20px, 20px);
  19. 缩放 transform: scale(.5);
  20. 平滑过渡 transition: all .3s ease-in .1s;
  21. 动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
用纯CSS创建一个三角形

</>复制代码

  1. // 把上、左、右三条边隐藏掉(颜色设为 transparent)
  2. #demo {
  3. width: 0;
  4. height: 0;
  5. border-width: 20px;
  6. border-style: solid;
  7. border-color: transparent transparent red transparent;
  8. }
浏览器的兼容性

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

清除浮动

</>复制代码

  1. .clearfix:after {
  2. visibility: hidden;
  3. display: block;
  4. font-size: 0;
  5. content: " ";
  6. clear: both;
  7. height: 0;
  8. }
  9. 1.可用a标签 设置display:inline-block;width:100%, 把含浮动元素的div撑起来(div不用设计高度)
  10. 2.overflowhidden(BFC)
  11. 3.可用a标签 设置display:block;width:100%,clear:both
  12. 4.div=》display:table
  13. 5.div=》display:table-cell
  14. 6.div=》display:flow-root(触发BFC)
  15. 7.div::after代替a标签=》content:’’ display:block; clear:both;(最下方存在一个没有高度的元素)
  16. 8.使用.clearfix:after{content:’’ display:block; clear:both;}
  17. 9.让div也浮动(BFC)
盒子模型

</>复制代码

  1. 盒子模型构成:内容(content)、内填充(padding)、 边框(border)、外边距(margin)
  2. IE8及其以下版本浏览器,未声明 DOCTYPE,内容宽高会包含内填充和边框,称为怪异盒模型(IE盒模型)
  3. 标准(W3C)盒模型:元素宽度 = width + padding + border + margin
  4. 怪异(IE)盒模型:元素宽度 = width + margin
  5. 标准浏览器通过设置 css3 的 box-sizing: border-box 属性,触发“怪异模式”解析计算宽高
  6. box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
  7. box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
  8. box-sizing: inherit; // 继承父元素 box-sizing 属性的值
继承

</>复制代码

  1. 可以继承的样式:font-size、font-family、color、list-style、cursor
  2. 不可继承的样式:width、height、border、padding、margin、background
隐藏元素的方法

</>复制代码

  1. visibility: hidden; 这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在
  2. opacity: 0; CSS3属性,设置0可以使一个元素完全透明
  3. position: absolute; 设置一个很大的 left 负值定位,使元素定位在可见区域之外
  4. display: none; 元素会变得不可见,并且不会再占用文档的空间。
  5. transform: scale(0); 将一个元素设置为缩放无限小,元素将不可见,元素原来所在的位置将被保留
  6. height: 0; 将元素高度设为 0 ,并消除边框
  7. filter: blur(0); CSS3属性,将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中
rgba() 和 opacity

</>复制代码

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

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

</>复制代码

  1. 当前样式:getComputedStyle(el, null) VS el.currentStyle
  2. 事件对象:e VS window.event
  3. 鼠标坐标:e.pageX, e.pageY VS window.event.x, window.event.y
  4. 按键码:e.which VS event.keyCode
  5. 文本节点:el.textContent VS el.innerText
li与li之间有看不见的空白间隔

</>复制代码

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

</>复制代码

  1. px 相对于显示器屏幕分辨率,无法用浏览器字体放大功能
  2. em 值并不是固定的,会继承父级的字体大小: em = 像素值 / 父级font-size
FOUC(Flash of Unstyled Content)

</>复制代码

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

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

全屏滚动

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

响应式设计ie

</>复制代码

  1. $(window).resize(function () {
  2. screenRespond();
  3. });
  4. screenRespond();
  5. function screenRespond(){
  6. var screenWidth = $(window).width();
  7. if(screenWidth <= 1800){
  8. $("body").attr("class", "w1800");
  9. }
  10. if(screenWidth <= 1400){
  11. $("body").attr("class", "w1400");
  12. }
  13. if(screenWidth > 1800){
  14. $("body").attr("class", "");
  15. }
  16. }
a标签上四个伪类的执行顺序

link > visited > hover > active

Chrome支持小于12px 的文字

</>复制代码

  1. .shrink{
  2. -webkit-transform:scale(0.8);
  3. -o-transform:scale(1);
  4. display:inline-block;
  5. }
TCP传输的三次握手四次挥手策略

</>复制代码

  1. 为了准确无误地把数据送达目标处,TCP协议采用了三次握手策略。用TCP协议把数据包送出去后,TCP不会对传送 后的情况置之不理,它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志:SYN和ACK
  2. 发送端首先发送一个带SYN标志的数据包给对方。接收端收到后,回传一个带有SYN/ACK标志的数据包以示传达确认信息。 最后,发送端再回传一个带ACK标志的数据包,代表“握手”结束。 若在握手过程中某个阶段莫名中断,TCP协议会再次以相同的顺序发送相同的数据包
  3. 断开一个TCP连接则需要“四次握手”:
  4. 第一次挥手:主动关闭方发送一个FIN,用来关闭主动方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方:我已经不 会再给你发数据了(当然,在fin包之前发送出去的数据,如果没有收到对应的ack确认报文,主动关闭方依然会重发这些数据),但是,此时主动关闭方还可 以接受数据。
  5. 第二次挥手:被动关闭方收到FIN包后,发送一个ACK给对方,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号)。
  6. 第三次挥手:被动关闭方发送一个FIN,用来关闭被动关闭方到主动关闭方的数据传送,也就是告诉主动关闭方,我的数据也发送完了,不会再给你发数据了。
  7. 第四次挥手:主动关闭方收到FIN后,发送一个ACK给被动关闭方,确认序号为收到序号+1,至此,完成四次挥手。
HTTP和HTTPS

</>复制代码

  1. HTTP协议通常承载于TCP协议之上,在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候,就成了我们常说的HTTPS
  2. 默认HTTP的端口号为80,HTTPS的端口号为443

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

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

</>复制代码

  1. GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符
  2. POST:一般用于修改服务器上的资源,对所发送的信息没有限制。
  3. GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值,也就是说Get是通过地址栏来传值,而Post是通过提交表单来传值。
  4. 然而,在以下情况中,请使用 POST 请求:
  5. 无法使用缓存文件(更新服务器上的文件或数据库)
  6. 向服务器发送大量数据(POST 没有数据量限制)
  7. 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
七层模型

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114016.html

相关文章

  • 前端资源系列(4)-前端学习资源分享&amp;前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0
  • css&amp;html面试识点

    摘要:第二等代表选择器,如,权值为。接收端收到后,回传一个带有标志的数据包以示传达确认信息。第四次挥手主动关闭方收到后,发送一个给被动关闭方,确认序号为收到序号,至此,完成四次挥手。 CSS优先级算法 参考:http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...

    JeOam 评论0 收藏0
  • html&amp;css面试笔记

    摘要:什么叫优雅降级和渐进增强渐进增强针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果交互等改进和追加功能达到更好的用户体验。优雅降级一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 1、CSS选择器有哪些?它们的优先级是怎样的? 选择器类型: id选择器 ( # myid) 类选择器 (.myclassname) 标签选择器 ...

    maochunguang 评论0 收藏0
  • html&amp;css面试笔记

    摘要:什么叫优雅降级和渐进增强渐进增强针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果交互等改进和追加功能达到更好的用户体验。优雅降级一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 1、CSS选择器有哪些?它们的优先级是怎样的? 选择器类型: id选择器 ( # myid) 类选择器 (.myclassname) 标签选择器 ...

    zhangwang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<