当前位置: 首页 > Web前端 > HTML5

html&css面试笔记

时间:2023-04-05 01:51:47 HTML5

1.什么是CSS选择器?他们的优先事项是什么?选择器类型:id选择器(#myid)类选择器(.myclassname)标签选择器(div,h1,p)相邻选择器(h1+p)子选择器(ul>li)后代选择器(lia)通配符选择器(*)属性selector(a[rel="external"])伪类选择器(a:hover,li:nth-child)选择器优先级:就近原则,同等权重下的样式定义,以最接近的为准;加载方式以最后一次加载的位置为准;优先级为:!important>id>class>tag,important规则的权重高于inline优先级:tag的权重为1,class的权重为10,id的权重为100;如果粗细相同,则上次定义的样式生效;em:相对单位,相对于父元素的字体大小,如果当前对象没有设置字体大小,则相对于浏览器默认的字体大小,em的值不固定,em会继承父元素的字体大小;rem:相对单位,相对于HTML根元素的字体大小;浏览器的默认字体高度是16px。所以未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。3、写一个两列等高的布局,左列固定宽度200px,右列自适应浏览器布局

父元素flex布局,左子元素flex-basis:200px,右子元素flex:1;
id="right"style="flex:1;height:200px;background-color:green;">
4.您在哪些浏览器中测试了页面?常见浏览器的内核有哪些?浏览器内核:IE-Trident、Firefox-Gecko、Opera-Blink、Chrome-Webkit、Safari-Webkit、360-兼容模式Trident+speed模式Webkit5,可变宽高的img水平垂直居中在一个容器中固定宽高,写出html和css。盒子{宽度:200px;高度:200px;边框:1px实心#06C;显示:表格单元格;文本对齐:居中;垂直对齐:中间;*字体系列:simsun;*font-size:200px;}.boximg{vertical-align:middle;}6.清除不给定高度的浮动父元素的原理及实现方法,父元素中的整体浮动元素无法展开父元素,并且需要清除浮动元素为parent添加属性overflow:hidden.parent{overflow:hidden;}在最后一个子元素后添加一个空的div,并赋予其样式属性clear:both(不推荐)1212121212121212使用成熟的清晰浮动样式类,clearfix.clearfix:after{content:"";显示:表格;clear:both;}7、rgba()和opacity的透明效果有什么区别效果不同:opacity方案,子元素文字内容同时透明;rgba方案,子元素内容不透明8、css实现,鼠标放在div上时,元素在2s内旋转180°#lamp{width:400px;高度:40px;背景:#ff0000;}#lamp:hover{动画:旋转2s;-webkit-动画:旋转2s;/*Safari和Chrome*/}@keyframesrotate{从{transform:rotate(0deg);}到{transform:rotate(180deg);}}@-webkit-keyframesrotate/*Safari和Chrome*/{from{transform:旋转(0度);}to{transform:rotate(180deg);}}9.什么是盒子模型?在网页中,一个元素所占的空间由几部分组成,包括元素的内容、元素的padding、元素的边框和元素的外边距。在这四个部分所占的空间中,有的部分可以显示相应的内容,有的部分只是用来分隔相邻的区域或区域。这4部分共同构成了css中元素的盒模型。10.什么是行内元素?什么是块级元素?什么是空(void)元素?行内元素:a、b、span、img、input、strong、select、label、em、button、textarea块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote空元素:即没有内容的HTML元素,如:br、meta、hr、link、input、img11、CSS实现垂直和水平居中的方法有很多种,下面是其中一种实现方式://HTML结构://CSS:.wrapper{position:relative;宽度:500px;高度:500px;边框:1px纯红色;}.content{位置:绝对;宽度:200px;高度:200px;/*上、下、左、右都设置为0*/top:0;底部:0;左:0;右:0;/*margin设置为自动*/margin:auto;边框:1px纯绿色;}12.简述src和href的区别。建立src之间的关系意味着引用资源并替换当前元素。它用于img、script和iframe。src是页面内容不可或缺的一部分。补充:link和@import的区别都是对CSS的外部引用,但是有一定的区别:区别一:link是一个XHTML标签,除了加载CSS外,还可以定义RSS等其他东西;@import属于CSS的范畴,只能加载CSS。区别二:当链接引用CSS时,在页面加载时同时加载;@import需要在页面完全加载后加载。区别三:link是一个XHTML标签,没有兼容性问题;@import是CSS2.1提出的,低版本浏览器不支持。区别四:ink支持使用Javascript控制DOM改变样式;而@import没有。13、什么是优雅降级和渐进增强?渐进增强:为低版本浏览器构建页面,保证最基本的功能,然后为高级浏览器改进和添加效果、交互等功能,以达到更好的用户体验。优雅降级:从一开始就构建完整的功能,然后使其兼容低版本浏览器。区别:A.优雅降级从复杂的现状出发,试图减少用户体验的供给b.渐进式增强从一个非常基本的工作版本开始,然后扩展以满足未来环境的需求c。退化(功能衰减)意味着回头看;而progressiveenhancement意味着向前看,同时确保其根在安全区内14.html中的title属性和alt属性有什么区别?图片不输出信息时,会显示alt信息,鼠标放在上面没有任何信息。图片正常读取时,不会出现alt信息图片不输出信息时,会显示alt信息。当鼠标放在上面时,会出现标题信息。图片正常输出时,不会有alt信息。标题信息将显示在顶部。title属性可以用在除base、basefont、head、html、meta、param、script和title之外的所有标签中。title属性的作用是提示。对于额外的描述信息和非必要信息,请使用title属性。title属性值可以设置得比alt属性值长。title属性的一个很好的用途是在链接中添加描述性文本,尤其是当链接本身没有明确表达链接的目的时。15.标准框模型和IE怪异框模型当没有定义doctype时,会触发怪异模式。在标准模式下,一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)在weird模式下,一个块的总宽度=width+margin(左右)右)(即width已经包含padding和border值)当CSS3的box-sizing设置为box-sizing:content-box时,会使用标准模式进行分析计算,也是默认模式;当设置为box-sizing:border-box时,会使用weird模式分析计算;16、CSS3有哪些新特性?分为边框、背景、渐变、阴影、2D转换、3D转换、转场、动画、弹框等。例如:border(border-radius,border-shadow,border-image)等。17.什么是CSSHack?一般来说,就是针对不同的浏览器编写不同的CSS,也就是CSSHack。IE浏览器hack一般分为三种,conditionalhack,attribute-levelhack,selectorhack(详见CSS文档:cssdocument)。例如://1.ConditionHack//2.AttributeHack.test{颜色:#090\9;/*对于IE8+*/*color:#f00;/*对于IE7和更早版本*/_color:#ff0;/*对于IE6和更早版本*///3.选择器Hack*html.test{color:#090;}/*ForIE6andearlier*/*+html.test{color:#ff0;}/*ForIE7*/18,bootstrap响应式实现+媒体查询的原理百分比布局19.请简单描述一下marginoverlap的问题,解决方法和marginoverlap一样:最外层div添加overflow:hidden;zoom:1最外层添加padding:1px;在最外层添加属性:border:1pxsolid#cacbcc;不同方向重叠问题:float:left(只解决IE6浏览器不同方向重叠问题,IE8及以上、chorme、firefox、opera下可以解决同方向重叠问题)20.position的取值,relative,absolute和fixed相对于谁定位有什么区别?absolute生成绝对定位的元素,相对于静态定位以外的第一个父元素定位。fixed生成绝对定位的元素,相对于浏览器窗口定位。relative生成??相对定位的元素,相对于其正常位置定位。因此,"left:20"将向元素的左侧位置添加20个像素。静态默认。没有定位,元素出现在正常流中(忽略顶部、底部、左侧、右侧或z-index声明)。inherit指定位置属性的值应该从父元素继承。21.浏览器如何渲染页面?渲染过程如下:1.解析HTML文件,创建DOM树。从上到下,任何样式(link、style)和脚本(script)都会被阻塞(外部样式不会阻塞后续外部脚本的加载)。2.解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式标签的理解是什么?标签提供有关HTML文档的元数据。它不会显示在页面上,但是机器可读。可由浏览器(如何显示内容或重新加载页面)、搜索引擎(关键字)或其他网络服务使用。另一个目的是添加服务器发送给浏览器的http头内容。23.h5的新特性新的语义标签和属性形式的新特性视频和音频Canvas绘图SVG绘图Geolocation显示:none完全消失,不在文档流中占据一席之地,浏览器不会解析该元素;visibility:hidden在视觉上消失,可以理解为透明度为0的效果,在文档流中占有一席之地,浏览器会解析该元素;使用visibility:hidden比较好,display:none用于切换可见性,页面会重排(当页面中的某些元素需要改变大小、布局、显示和隐藏等时,会重新构建页面,而这就是回流,所有页面在第一次加载时都需要产生回流),visibility在切换是否显示时不会造成回流。