htmlcss面试基础题
1. 用css画一条长100px, 宽0.5px的细线;(移动端)
思路: transform: scaleX()
2. 给body设置背景色, 背景色会影响到body默认的margin区域吗?
会
3. 页面body标签内设置一个盒子,其宽度是屏幕宽的40%,其高度是其宽度的60%(css写);
4. 有关定位(position)的理解:
- 当父级元素(含祖先元素)没有设置position的relative和absolute属性值时;子元素设置了position: absolute,且子元素没有设置left right top bottom属性,那么子元素相对于哪个元素定位(精确到: 是其margin的左上角 还是 padding的左上角 还是 content的左上角)
**父级元素的content左上角**
- 当父级元素(含祖先元素)没有设置position的relative和absolute属性值时,子元素设置了position: absolute,且子元素设置了left right top bottom属性,那么子元素相对于哪个元素定位(精确到: 是其margin的左上角 还是 padding的左上角 还是 content的左上角)
**html,body的margin区域的左上角**
- 当父级元素(含祖先元素)设置了position的relative和absolute属性值时;子元素设置了position: absolute,且子元素没有设置left right top bottom属性,那么子元素相对于哪个元素定位(精确到: 是其margin的左上角 还是 padding的左上角 还是 content的左上角)
**父级元素content的左上角 且 子元素没有把父元素撑开**
- 当父级元素(含祖先元素)设置了position的relative和absolute属性值时,子元素设置了position: absolute,且子元素设置了left right top bottom属性,那么子元素相对于哪个元素定位(精确到: 是其margin的左上角 还是 padding的左上角 还是 content的左上角)
**父级元素padding的左上角**
- 了解 粘性定位 (表格 表头固定; 吸顶)
5. 如何使一个盒子水平垂直居中(至少5种)
6. 如何让一个容器中的一张img图片垂直居中?
7. 用css写一个三角形
8. 列举10个以上的h5事件 不是 HTML5
- onblur 当失去焦点时运行脚本
- onchange 当元素改变时,并失去焦点运行脚本
- onclick 当点击鼠标时运行脚本
- ondrop 当被拖动元素正在被拖放时运行脚本
- onended 当媒体已抵达结尾时运行脚本
- onerror 当在元素加载期间发生错误时运行脚本
- onfocus 当获得焦点时运行脚本
- oninput 当元素获得用户输入时运行脚本
- onkeydown 当按下按键时运行脚本(还没松开时就触发)
- onkeypress 当按下并松开时运行脚本(必须经历按下、松开这一过程才触发)
- onkeyup 当松开按键时运行脚本(松开时即触发)
- onload 当加载时运行脚本(文档 css 图片 js)
- onmousedown 当按下鼠标按钮时运行脚本
- onmousemove 当鼠标指针移动时运行脚本
- onmouseout 当鼠标指针移出元素时运行脚本
- onmouseover 当鼠标指针移至元素之上时运行脚本
- onmouseup 当松开鼠标按钮时运行脚本
9. 列举10个以上的input的type属性值,并写明其含义
- color:用于指定颜色的控件dao
- date:用于输入日期的控件(年,月,日,不包括时间)
- datetime:基于 UTC 时区的日期时间输入控件(时,分,秒及几分之一秒)
- datetime-local:用于输入日期时间控件,不包含时区
- email:用于编辑 e-mail 的字段
- month:用于输入年月的控件,不带时区
- number: 用于输入浮点数的控件
- range:用于输入不精确值控件
- search:用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除
- tel:用于输入电话号码的控件
- time:用于输入不含时区的时间控件
- url:用于编辑URL的字段
- week:用于输入一个由星期-年组成的日期,日期不包括时区
10. rem适配方法如何计算HTML根字号及适配方案
-
- 通用方案:
-
- 设置根 font-size: 625%(或其他自定的值,但换算规则 1rem 不能小于 12px)
-
- 通过媒体查询分别设置每个屏幕的根 font-size
-
- 直接除以 2 再除以 100 即可换算为 rem。(原理:移动端 浏览器根元素默认是 16px,6.25 X 16 = 100,即设置根元素大小为 100px, 通常设计稿会以 750px 的宽度进行设计,所以在换算时,需再除以 2。)
优: 有一定适用性,换算也较为简单
劣: 有兼容性的坑,对不同手机适配不是非常精准;需要设置多个媒体查询来适应不同手机,单某款手机尺寸不在设置范围之内,会导致无法适配。 -
- 网易方案:
- 1、拿到设计稿除以 100,得到宽度 rem 值 x = 7.5
- 2、通过给 html 的 style 设置 font-size,把 步骤 1 里面得到的宽度 rem 值代入 x, document.documentElement.style.fontSize = document.documentElement.clientWidth / x + ‘px’;
- 3、设计稿 px / 100 即可换算为 rem;
某元素 50px
1rem iphone6(375) 50px;
1rem iphone6 plus(414) 55.2;设计稿 给的尺寸是: 750px * 1334px
优:通过动态根 font-size 来做适配,基本无兼容性问题,适配较为精准,换算简便
劣:无 viewport 缩放,且针对 iPhone 的 Retina 屏没有做适配,导致对一些手机的适配不是很到位 -
- 手淘方案:
- 1、拿到设计稿除以 10,得到 font-size 基准值
- 2、引入 flexible
- 3、不要设置 meta 的 viewport 缩放值
- 4、设计稿 px/ font-size 基准值,即可换算为 rem
优:通过动态根 font-size、viewpor、dpr 来做适配,无兼容性问题,适配精准。
劣:需要根据设计稿进行基准值换算,在不使用 sublime text 编辑器插件开发时,单位计算复杂
2020.12.19 作业题 1 ~ 10题 end
11. CSS中link和@import的区别?
css解析从右往左解析
css 层级结构不要写太深
原则上是不要超过三层, 层越多解析越慢, 页面性能就越不好
文档在浏览器中解析过程
文件下载结束 => CSSTree + domTree => CSSTree 和 domTree合并成一个tree => layout(布局) => paint(绘制)
// 尽量避免下面层级过多及用大量标签来选择元素
.container > .box > p > span > i {
}
-
适用范围不同
- @import可以在网页页面中使用,也可以在CSS文件中使用,用来将多个 CSS文件引入到一个CSS文件中;而link只能将CSS文件引入到网页页面中
-
功能范围不同
- link属于XHTML标签,而@import是CSS提供的一种方式,link标签除了可以加载CSS外,还可以定义RSS(定义到达项目的超链接),定义rel连接属性等,@import就只能加载CSS
-
加载顺序不同
- 当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显
-
兼容性
- 由于@import是css2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题
-
控制样式时的差别
- 使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari 都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同 的风格),当然你还可以使用Javascript使得IE也支持用户更换样式
-
权重区别
- link引入的样式权重大于@import引入的样式
12. display: none 与 visibility: hidden的区别
-
display:none 的元素不占据原来的位置, 会导致回流。
-
visibility:hidden 的元素仍会占据原来的位置,只是在页面不显示,会导致重绘。
-
概念补充:
- 重绘: 当元素的一部分属性发生改变,如外观、背景、颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制,使元素呈现新的外观叫做重绘。
- 回流: 当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程(最耗费性能)
重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置)
13. 什么会导致元素浮动? 浮动元素会引起什么问题? 如何清除浮动?
-
浮动定位将元素排除在普通流之外,即元素讲脱离文档流,不占据空间。浮动元素碰到含它的边框或者浮动元素的边框停留
-
浮动带来的主要问题: 父元素的高度无法被撑开,影响与父元素同级的元素
-
如何清除浮动:
1、使用CSS中的clear:both;(放一个空的div,并设置上述css)
2、给父元素添加clearfix样式:
.clearfix:after{content: “.”;display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
14. 如何解决 margin ‘塌陷’?
- 外边距塌陷共有两种情况:
- 两个同级元素,垂直排列,上面的盒子给margin-bottom 下面的盒子给margin-top,那么他们两个的间距会重叠,以大的那个计算
- 两个父子元素,内部的盒子给margin-top,其父级也会受到影响,同时产生上边距,父子元素会进行粘连,决绝这种情况的方法为:父级添加一个css属性,overflow: hidden,禁止超出
- 解决方案:
- 1、为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合 (可以设置成透明:border:1px solid transparent)。
- 2、为父盒子添加overflow:hidden;
- 3、为父盒子设定padding值;
- 4、为父盒子添加position:fixed;
- 5、为父盒子添加 display:table;
- 6、利用伪元素给子元素的前面添加一个空元素
- .son:before{ content:""; overflow:hidden; }
15. img的 alt 和 title 有啥区别, 图片懒加载的原理
-
alt 是图片加载失败时,显示在网页上的替代文字; title 是鼠标放上面时显示的文字,title
是对图片的描述与进一步说明; -
严格上讲,alt是img必要的属性,而title不是
-
对于网站seo优化来说,搜索引擎对图片意思的判断,主要是靠alt属性
-
懒加载原理: (应用场景: 大量的图片列表,初始化显示一屏多)
- 先设置图片的data-set属性值为其图片路径,由于不是src,然后我们计算出页面scrollTop的高度和浏览器的高度之和, 如果图片举例页面顶端的坐标Y(相对于整个页面,而不是浏览器窗口)小于前两者之和,就说明图片就要显示出来了,这时候我们再将 data-set 属性替换为 src 属性即可,这个时候再去请求图片资源。
var arr = [‘https://500px.com.cn/community/photo-details/500px1026448044’, ‘https://500px.com.cn/community/photo-details/500px1026448044’];
- 先设置图片的data-set属性值为其图片路径,由于不是src,然后我们计算出页面scrollTop的高度和浏览器的高度之和, 如果图片举例页面顶端的坐标Y(相对于整个页面,而不是浏览器窗口)小于前两者之和,就说明图片就要显示出来了,这时候我们再将 data-set 属性替换为 src 属性即可,这个时候再去请求图片资源。
-
瀑布流布局
-
预加载
提前把图片加载好, 放在缓存数据列表内
提高用户体验
new Image() -
作业要求: 实现一个图片懒加载的案例和 一个图片预加载的案例
-
了解下按需加载的概念
16. BFC是什么? (据说是高薪必问)
-
block formatting context (块级格式化上下文),是一个独立的渲染区域
-
布局规则:
- 内部的box会在垂直方向,一个接一个地放置
- box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的margin会发生重叠
- 每一个元素的margin的盒子,与包含边框的盒子的左边相接触
- BFC的区域不会与浮动的盒子重叠
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素
- 计算BFC的高度时,浮动元素也参与计算
-
哪些元素会生成BFC
- float属性值不为 none
- position属性值为 absolute 或 fixed
- display为 inline-block table-cell table-caption(此元素会作为一个表格标题显示) flex等
17. style标签写在body后与body前有什么区别?
资源加载进来 => CSSDOM + DOM => render tree(css html合成一个tre,然后渲染) => layout => paint
- 由于浏览器以逐行方式对html文档进行解析;
- 当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待
- 加载且解析样式表完成之后重新渲染;
- k在windows的IE下可能会出现FOUC现象(即样式失效导致的页面闪烁问题);
18. 如何用css在chrome(PC端)中输出小于12px的字体大小(chrome PC端 默认最小字体是12px)
针对谷歌浏览器内核,加webkit前缀,用 transform:scale()
这个属性进行缩放
19. 雪碧图(精灵图)是如何使用的,它的优缺点?
-
使用:
- 是把网站上用到的一些小图片(如小图标之类的)整合到一张单独的较大图片中,通过背景定位的方式,显示当前所需要的小图片
-
优点:
- 1、减少网页的http请求,从而加快了网页加载速度,提高用户体验
- 2、减少图片的体积,因为每个图片都有一个头部信息,把多个图片放到一个图片里,就会 共用同一个头信息,从而减少了字节数
- 3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名
- 4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变
-
缺点:
- 1、在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂
- 2、CSS Sprites在开发的时候,要通过photoshop或其他工具测量计算每一个背景单元的精确位置
- 3、在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片
- 4、精灵图不能随意改变大小和颜色。改变大小会失真模糊,降低用户体验,CSS3新属性可以改变精灵图颜色,但是比较麻烦,并且新属性有兼容问题
现在一般用 字体图标 代替 精灵图
20. CSS中选择器的优先级以及CSS权重如何计算?
!important > 行内样式(1000) > ID选择器(100) > 类、属性和伪类选择器(10) > 标签和伪元素选择器(1) > 通配符
实例: div#app.child[name=“appName”]
权重: 1+100+10+10 = 121
-
伪类选择器 只有一个冒号,作用是:用于向某些选择器添加一些特殊的效果
常见的有: a:hover a:link a:visited a:active; :first-child :last-child :nth-child() -
伪元素选择器 表示元素中的一些特殊的位置,常见的有:
fist-line first-letter before after placeholder selection(选中文本的样式)