search

zhh10 / Notes

前端中react、Vue、ES6、css3、webpack、模块化等思维导图
12 stars 1 forks source link

HTML | CSS面试题 #2

Open zhh10 opened 4 years ago

zhh10 commented 4 years ago

1. 块级元素、行内块元素、行内元素都有哪些，它们有什么区别

2. 盒子模型都有哪些

一个块的总宽度 = width + margin(左右) + padding(左右) + border(左右)

一个块的总宽度 = width + margin(左右) width包含了padding左右和border左右值

border-box:box-sizing

3. 如何让元素隐藏

display:none让整个元素直接消失，会引起页面回流。而visibility:hidden和opacity:0在网页中的位置还在，只会造成页面重绘，不会引起页面回流。两者的区别在于opacity可以用在动画transition过渡上，而visibility不可以

4. 响应式布局可以怎么做

  1. width/height设置百分比
  2. 设置vw/vh
  3. 设置flex弹性布局
  4. rem/em
  5. 使用媒体查询

5. 常用的浏览器及其内核

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
firefox Gecko
Safari webkit 从 Safari 推出之时起，它的渲染引擎就是 Webkit，一提到 webkit，首先想到的便是 chrome，Webkit 的鼻祖其实是 Safari。
chrome chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用 Blink 内核。二次开发
opera blink Opera 内核原为：Presto，现在跟随 chrome 用 blink 内核。

6. 对标签语义化的理解

  1. 合适的标签做合适的事情
  2. 方便后期开发和维护，具有可读性
  3. 丢失样式时能够让页面呈现出清晰的结构
  4. 有利于SEO和搜索引擎建立良好的沟通

7. img标签的alt和title

8. CSS如何画一个三角形

<style>
  #app{
    width:0;
    height:0;
    border:100px solid black;
    border-color:transparent transparent black black;
  }
</style>
<body>
  <div id='app'></div>
</body>

9. 对浏览器内核的理解

主要分成两部分：

  1. 渲染引擎
  2. JS执行引擎
    • 渲染引擎: 负责取得html、img、css，以及计算网页的显示方式，然后输出至显示器。由于不同内核对网页的语法解释会有不同，所以渲染的效果也不相同
    • JS执行引擎: 解释和执行JS来实现网页的动态效果

10. 什么是BFC

11. 表单可以跨域吗？

form表单可以跨域，但是ajax不可以。因为原页面用form提交到另一个域名之后，原页面的脚本无法获取新页面中的内容。所以浏览器认为是安全的。而ajax是可以读取响应内容的，因此浏览器不能允许你这样做。浏览器这个策略的本质是: 一个域名的JS，在未经允许的情况下，不得读取另一个域名的内容，但浏览器并不阻止你向另一个域名发送请求。

12. 为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有对CSS初始化往往会出现浏览器之间的页面显示差异。

13. CSS水平、垂直居中的写法，请至少写出4种

14. 如何画一条0.5px 的直线

height:1px;
transform:scale(0.5);

15. 清除浮动

  1. 使用伪元素清除浮动 
    .container::after{
 content:"";
 clear:both;
 display:block;
}
  2. 让父元素变为一个BFC，父元素overflow:auto/hidden。

16. inline-block的间隙

两个并列的inline-block中间会有一条裂缝，这个的原因是两个标签之间有空格，浏览器把这些空格当作文字中的空格，所以这两个块中间多少有间隙。 解决办法:

  1. 容器元素font-size:0; 然后再在里面重新设置字体大小
  2. 删除两个标签间的空格，但是这样html排版不好

17. 图片下面有一个缝隙是因为什么?

因为img也相当于inline的元素，inline就要遵守行高的构成，它会按照base基线对齐，基线对齐的话那么它就会和底线间又一个缝隙。

如何解决: 因为它会遵守文字对齐方案，那么就把图片的对齐方式修改为vertical-align:bottom，或者让它display:block，这样图片虽然会换行，但是没有间隙了。

18. HTML和DOM的关系

19.