2020-11-30

前端面试题 --HTML+CSS篇

• HTML常用的语义化标签有哪些？优点是什么？
  Header 头部
  Nav 导航条
  Aside 侧边栏
  Article 主要内容 文章 帖子 博客等
  Section 区块
  Footer 页脚
• 优点
  让页面结构化，便于浏览器、搜索引擎解析
  有利于SEO
  便于团队开发与维护
• 让一个元素垂直居中的6种方法
  1当不需要指定元素高度时，可以直接给一个相同的 padding-top和padding-bottom，让元素和padding一起撑起容器
  2不需要严格兼容，可以使用flexbox
  3需要指定元素高度时，或不能使用padding时，设置元素display：table-cell 和vertical-align:middle
  4内容是一行文本时，设置行高等于高
  5以上都不适用，可以使用定位（容器和元素高度已知）
  6元素和高度不知，定位结合transform一起用
• 清除浮动的方法
  给受影响的元素加 clear：both
  浮动元素父元素加高
  浮动元素父元素加overflow：hidden|auto
  空DIV法
  伪对象法
• Position有哪些值？
  答：static 静态定位 默认值
  Relative 相对定位 想对自己位置定位 定位后位置保留
  Absolute 绝对定位相对于已经定位的父元素定位 若父元素无定位 逐级往上找 最后相对于 body定位 定位 后原位置不保留
  Fixed 固定定位 相对于浏览器窗口定位 定位后原位置不保留
• 在css中哪些属性可以同父元素继承？
  所有元素可继承：visibility和cursor。
  内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
  块状元素可继承：text-indent和text-align
  列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
  表格元素可继承：border-collapse。
• 描述css reset的作用和用途
  每个浏览器都有一些自带的或者共有的默认样式，或造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致；
  为了让页面获得浏览器跨浏览器的兼容性，需要用重置文件css代码覆盖浏览器默认的样式来统一样式。
• alt和title分别表示什么含义以及具体应用体现；
  使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。
  使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息
• CSS3有哪些新特性？
  第 1 选择器
  第 2 RGBA和透明度
  第 3 多栏布局
  第 4 多背景图
  第 5 Word Wrap
  第 6 文字阴影
  第 7 @font-face属性
  第 8 圆角(边框半径)
  第 9 边框图片
  第 10 盒阴影
  第 11 盒子大小
  第 12 媒体查询
  第 13 语音
• 盒模型
  css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
  盒模型是有两种标准的，一个是标准模型，一个是IE模型。
  在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。那么，元素框的总宽度 = 元素（element）的width + margin的左边距和右边距的值

怪异盒模型
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度。