htmlcss面试基础题

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根字号及适配方案

• 1. 通用方案：
  • 1. 设置根 font-size: 625%(或其他自定的值，但换算规则 1rem 不能小于 12px)
  • 2. 通过媒体查询分别设置每个屏幕的根 font-size
  • 3. 直接除以 2 再除以 100 即可换算为 rem。(原理：移动端 浏览器根元素默认是 16px，6.25 X 16 = 100，即设置根元素大小为 100px, 通常设计稿会以 750px 的宽度进行设计，所以在换算时，需再除以 2。)

  优： 有一定适用性，换算也较为简单
  劣： 有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同手机，单某款手机尺寸不在设置范围之内，会导致无法适配。

• 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 屏没有做适配，导致对一些手机的适配不是很到位

• 3. 手淘方案：
  • 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引入的样式
  xml里面用的(了解)

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’];

• 瀑布流布局

• 预加载
  提前把图片加载好, 放在缓存数据列表内
  提高用户体验
  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(选中文本的样式)