html语义化的理解
之前HTML仅是冷冰冰的结构化标签,没有语义。后HTML5加入语义化标签,使结构语义化,
在没有CSS的情况下,很好呈现内容结构,易于书写阅读理解,SEO(依赖标签及关键字权重)
header, footer, nav, hgroup, aside, section
盒子模型,以及标准情况和IE下的区别
``` box-sizing:border-box || content-box || inherit```
```content-box```
标准盒子模型/W3C盒子模型:margin、border、padding、content,并且 content 部分不包含其他部分。
```border-box```
IE盒子模型:margin、border、padding、content,content 部分包含了 border 和 padding。
```inherit```
页面将从父元素继承box-sizing的值
<b>和<strong>的区别
<b>bold, 加粗,样式/风格需求。<strong>重要,提醒注意。
<b>为了加粗而加粗,<strong>为了标明重点而加粗。
移动端适配1px的问题
知识点: 物理像素、设备独立像素和设备像素比
物理像素/设备像素/设备物理像素,它是显示器(电脑、手机屏幕)最小的物理显示单位
设备独立像素/CSS像素,是我们写CSS时所用的像素,它是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。
设备像素比/dpr,定义了物理像素和设备独立像素的对应关系:设备像素比 = 物理像素 / 设备独立像素 原因:由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px,所以在高清屏下看着1px总是感觉变胖了。(在retina屏中,像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的边框看起来比真的1px更宽。)
解决:
在ios8+中当devicePixelRatio=2的时候使用0.5px
伪元素 + transform 实现对于老项目伪元素+transform是比较完美的方法了。原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。+ viewport + rem 实现根据设备宽度动态设置根元素的font-size,使得以rem为单位的元素在不同终端上以相对一致的视觉效果呈现这种兼容方案相对比较完美,适合新的项目,老的项目修改成本过大。
使用box-shadow模拟边框利用css 对阴影处理的方式实现0.5px的效果
rem、flex的区别(root em)
rem是相对于根元素的字体大小的单位,我们可以根据设备宽度动态设置根元素的font-size,使得以rem为单位的元素在不同终端上以相对一致的视觉效果呈现。下面介绍3种根据屏幕宽度设置rem基准值的方法。(注:为了换算方便,以下三种方法都用1:100的比例,即1rem=100px。)+ 用JS设置rem基准值+ 用密集的媒体查询设置font-size+ 用单位vw设置font-size
介绍flex布局
弹性布局Flexible Box:让所有弹性盒模型对象的子元素忽略它们内部的内容更好地布局。
其他css方式设置垂直居中
居中为什么要使用transform(为什么不使用marginLeft/Top)
介绍css3中position:sticky
清除浮动
定位问题(绝对定位、相对定位等)
介绍css,xsrf
transform动画和直接使用left、top改变位置有什么优缺点
动画修改一个元素的 left 和 top会改变它的形状,而且可能引起页面上其它元素的移动和形状改变,这个过程称为布局。基于 CSS 的动画和原生支持的 Web 动画通常在称为合成器线程的线程上处理,transforms 和 opacity 都可以在合成器线程中处理;它与浏览器的主线程不同,在该主线程中执行样式,布局,绘制和 JavaScript。这意味着如果浏览器在主线程上运行一些耗时的任务,这些动画可以继续运行而不会中断;如果任何动画触发了绘制,布局,或者两者,那么主线程会来完成该工作。这个对基于 CSS 还是 JavaScript 实现的动画都一样,布局或者绘制的开销巨大,让与之关联的 CSS 或 JavaScript 执行工作、渲染都变得毫无意义;避免使用触发布局或绘制的属性动画。对于大多数现代浏览器,这意味着将动画(修改的属性)限制为 opacity 和 transform;
CSS选择器有哪些
如何实现高度自适应
如何实现H5手机端的适配
em和px的区别