复习-css

是洋柿子啊
121 阅读6分钟

CSS面试要点复习

本次复习内容有：

  • HTML 块级元素、行内元素、行内块元素
  • 选择器
  • BFC
  • 定位 （居中定位）
  • flex 布局
  • 盒子模型
  • 移动端响应式（自适应）
  • H5 各个浏览器的兼容性问题（尤其安卓机型）

块级元素、行内元素、行内块元素

元素是文档结构的基础，在 css 里面，每个元素生成了包含内容的框（box）, 大家都叫“盒子”。但是不同的元素显示方式是不同的，有占据一整行的，有水平一个挨着一个的。 这就有了块级元素、行内元素、行内块元素的区分

块级元素 block

  • 每个块级元素都是独自占一行；高度、宽度、外边距（margin）以及内边距（padding）都可以控制；
  • 元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）；
  • 多个块状元素标签写在一起，默认排列方式为从上至下；

常见块级元素

  1. div
  2. section
  3. ul、li 无序列表
  4. ol、li 有序列表
  5. dl、dd、dt 定义列表中
  6. p
  7. table、thead、th、tr、td
  8. 等

行内元素 inline

  • 相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行；
  • 设置宽高无效，宽度和高度由内容觉得大小，对外边距（margin）和内边距（padding）仅设置左右方向有效 上下无效；
  • 设置行高有效，等同于给父级元素设置行高；

常见行内元素

  1. a
  2. em
  3. span
  4. textarea
  5. sub
  6. sup
  7. i
  8. br
  9. 等

行内块级元素 inline-block

  • 它既具有块级元素的特点，也有行内元素的特点，
  • 它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素
  • 高度、行高、外边距以及内边距都可以控制；
  • 默认宽度就是它本身内容的宽度，不独占一行

常见行内块级元素

  • button
  • input
  • textarea
  • select
  • img

选择器

CSS选择器具有高效的继承性，引用 Steve Souders 的话， CSS 选择器效率从高到低的排序如下：（具体文档）

选择器用法
id选择器#myid
类选择器.myclassname
标签选择器div,h1,p
相邻选择器h1+p
子选择器ul > li
后代选择器li a
通配符选择器*
属性选择器a[rel="external"]
伪类选择器a:hover, li:nth-child

对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高

css 类执行顺序

这是最近面试遇到的题目：

<div class="red blue green">1111</div>

<style>
.green {
    color: green
}
.red {
    color: red
}
.blue {
    color: blue
}
</style>

这最终显示的颜色是 blue

BFC(块级格式化上下文)

bfc(块级格式化上下文)，bfc 其实是页面中一个单独渲染区域，并且有自己的渲染规则

如何触发BFC

元素模式触发属性
position为absolute或者为fixed
displayblock、list-item、table、inline-block、 table-cell、flex、inline-flex
overflow不为visible
float不为 none

BFC 作用有啥

  1. 清除浮动
  2. 解决外边距合并问题

居中定位

居中定位的分法有很多种：flex布局、position、grid；这里就不一一赘述了，详细可以看看（blog.csdn.net/qq_44848480… 这个文章写得不错哟

flex（弹性布局）

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 image.png 以下6个属性设置在容器上。

  • flex-direction
    • 决定主轴的方向（即项目的排列方向）
  • flex-wrap
    • 如果一条轴线排不下，如何换行
  • flex-flow
    • 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
  • justify-content
    • 项目在主轴上的对齐方式
  • align-items
    • 交叉轴上如何对齐
  • align-content
    • 多根轴线的对齐方式。
    • 如果项目只有一根轴线，该属性不起作用

推荐查看阮一峰的：（Flex 布局教程：语法篇）

经典面试题

画骰子：

响应式

前端开发常用的自适应方法如下：

  • px和视口
  • 媒体查询
    • 使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。
  • 百分比
    • 灵活好用，可以用在很多场景，兼容性不错
    • 各个属性中如果使用百分比，相对父元素的属性并不是唯一的。
      • 比如width和height相对于父元素width和height
      • margin、padding不管垂直还是水平方向都相对比父元素的宽度
      • border-radius则是相对于元素自身等等
      • 造成我们使用百分比单位容易使布局问题变得复杂
  • 自适应场景下的rem解决方案
    • rem单位都是相对于根元素html的font-size来决定大小的
  • vw、vh、vmin、vmax
    • vw：视窗宽度的百分比
      • （1vw 代表视窗的宽度为 1%）
    • vh：视窗高度的百分比
      • （1vh 代表视窗的宽度为 1%）
    • vmin：当前 vw 和 vh 中较小的一个值
    • vmax：当前 vw 和 vh 中较大的一个值

H5 各个浏览器的兼容性问题（尤其安卓机型）

  1. 苹果safari浏览器对中横线分割符（-）日期转换有问题
    • safari浏览器中使用new Date转换日期格式时（将字符串格式转换成格式日期）只能识别‘／’，所以yyyy-mm-dd格式的要先转换成yyyy/mm/dd格式才能转换成功。
    • 具体参考：苹果手机 safari 浏览器对 new Date().getTime()的不兼容
  2. 移动端 HTML5 audio autoplay 失效问题 -由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
  3. IOS键盘唤起，输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑
    • 固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失但是还是占位的。
    • position: fixed的元素在IOS里，收起键盘的时候会被顶上去，特别是第三方键盘。导致input框不能再次输入 在失去焦点的时候给一个事件
avatar
文章
阅读
粉丝