作者:香柏林茶业 | 来源:互联网 | 2020-08-22 17:54
本篇文章给大家带来的内容是关于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:last-of-type 选择属于其父元素的最后
元素的每个
元素。 p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。 p:only-child 选择属于其父元素的唯一子元素的每个
元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
: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)}
弹性盒模型 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); 将一个元素设置为缩放无限小,元素将不可见,元素原来所在的位置将被保留
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的面试知识点总结(附示例)的详细内容,更多请关注 第一PHP社区 其它相关文章!
推荐阅读
本文通过图解的方式介绍了redis的持久化存储机制RDB和AOF的原理和优缺点。RDB是将redis内存中的数据保存为快照文件,恢复速度较快但不支持拉链式快照。AOF是将操作日志保存到磁盘,实时存储数据但恢复速度较慢。文章详细分析了两种机制的优缺点,帮助读者更好地理解redis的持久化存储策略。 ...
[详细]
蜡笔小新 2023-12-13 20:24:11
本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ...
[详细]
蜡笔小新 2023-12-13 17:08:24
web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ...
[详细]
蜡笔小新 2023-12-11 11:25:16
本文介绍了Apple发布的新一代操作系统macOS Big Sur,该系统采用全新的界面设计,包括图标、应用界面、程序坞和菜单栏等方面的变化。新系统还增加了通知中心、桌面小组件、强化的Safari浏览器以及隐私保护等多项功能。文章指出,macOS Big Sur的设计与iPadOS越来越接近,结合了去年iPadOS对鼠标的完善等功能。 ...
[详细]
蜡笔小新 2023-12-10 19:53:41
本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ...
[详细]
蜡笔小新 2023-12-09 03:01:43
CSS|网格-行-结束属性原文:https://www.gee ...
[详细]
蜡笔小新 2023-10-17 15:21:56
一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ...
[详细]
蜡笔小新 2023-10-17 14:35:15
本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容,主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ...
[详细]
蜡笔小新 2023-12-14 18:16:27
这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ...
[详细]
蜡笔小新 2023-12-14 16:19:10
本文介绍了在Centos7.6系统下安装Gitlab的详细教程,并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时,还强调了使用阿里云服务器时的特殊配置需求,以及建议至少4GB的可用RAM来运行GitLab。 ...
[详细]
蜡笔小新 2023-12-14 14:01:06
VNCViewerforMac是一款运行在Mac平台上的远程桌面工具,vncviewermac版可以帮助您使用Mac的键盘和鼠标来控制远程计算机,操作简 ...
[详细]
蜡笔小新 2023-12-14 12:55:15
本文探讨了Tomcat和Jetty选择扩展线程池而不是使用JDK原生线程池的原因。通过比较IO密集型任务和CPU密集型任务的特点,解释了为何Tomcat和Jetty需要扩展线程池来提高并发度和任务处理速度。同时,介绍了JDK原生线程池的工作流程。 ...
[详细]
蜡笔小新 2023-12-13 16:18:09
本文详细解析了Apache Shiro 身份验证绕过漏洞 (CVE202011989) 的原理和影响,并提供了相应的防范措施。Apache Shiro 是一个强大且易用的Java安全框架,常用于执行身份验证、授权、密码和会话管理。在Apache Shiro 1.5.3之前的版本中,与Spring控制器一起使用时,存在特制请求可能导致身份验证绕过的漏洞。本文还介绍了该漏洞的具体细节,并给出了防范该漏洞的建议措施。 ...
[详细]
蜡笔小新 2023-12-09 19:58:36
CentOS7系统目录LINUX有四种基本文件系统类型普通文件:如文本文件、C语言元代码、SHELL脚本、二进制的可执行文件等,可用cat、less、 ...
[详细]
蜡笔小新 2023-10-16 20:30:51
css,背景,位置,y,background, ...
[详细]
蜡笔小新 2023-10-16 16:28:38