CSS

盒模型

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，包括：外边距、边框、内边距、内容。

Margin (外边距) - 清除边框外的区域，外边距是透明的。
Border (边框) - 围绕在内边距和内容外的边框。
Padding (内边距) - 清除内容周围的区域，内边距是透明的。
Content (内容) - 盒子的内容，显示文本、图像等。

W3C 盒模型:
'box-sizing: content-box;'
'width = content'

IE 盒模型:
'box-sizing: border-box;'
'width = border + padding + content'

权重

编号	类型	权重
	! important	无穷
	行内样式	1000
a	id	100
b	class/属性选择器/伪类选择器:hover	10
c	标签选择器/伪元素选择器:after	1
	通配选择符、关系选择符、否定伪类	0

优先级

浏览器根据优先级来决定给元素应用哪个样式，而优先级仅由选择器的匹配规则来决定。

优先级计算规则一般为 a * 100 + b * 10 + c（a、b、c 理解为上面权重表中编号选择器的总个数）。

实际优先级还要考虑到 行内样式 和 !important 的影响。

!important 与优先级无关，但它与最终的结果直接相关，且应尽量避免使用 !important。

动画属性

@keyframes name {
  from {
  }
  to {
  }
}
@keyframes name {
  0% {
  }
  100% {
  }
}
animation: name duration timing-function delay iteration-count direction;
transition: property duration timing-function delay;
transform: translate() rotate() scale() skew();

position

/* 固定定位，相对于浏览器窗口进行定位 */
position: fixed;
/* 绝对定位，相对于除 static 定位外的第一个父元素进行定位 */
position: absolute;
/* 相对定位，相对于其正常位置进行定位 */
position: relative;
/* 没有定位，默认值，元素出现在正常的流中 */
position: static;

/* 从父元素继承属性值 */
position: inherit;
/* 默认值 */
position: initial;
/* 不设置（继承 or 默认值） */
position: unset;
/* 当元素在屏幕内，表现为relative，要滚出显示器屏幕时，表现为fixed */
position: sticky;

display

/* 隐藏，不占据文档空间 */
display: none;
/* 块元素 */
display: block;
/* 行内元素 */
display: inline;
/* 行内块元素 */
display: inline-block;
/* 弹性盒布局（设置后子元素的 float、clear 和 vertical-align 属性失效） */
display: flex;

/* 从父元素继承属性值 */
display: inherit;

flex 布局

水平垂直居中

常见居中问题汇总

@media 媒体查询

@media 媒体查询 可以针对不同的屏幕尺寸设置不同的样式，尤其是开发“响应式设计（让网站针对不同的浏览器和设备呈现不同显 示效果的策略）”页面时非常实用；

<link
  rel="stylesheet"
  media="screen and (max-device-width: 480px)"
  href="iphone.css"
  /
  > @media
  screen
  and
  (min-width:720px)
  and
  (max-width:749px) {
}

rem 适配

摘抄自：前端移动端的 rem 适配计算原理

rem：相对于根元素的字体大小的单位；

em：相对于父元素的字体大小的单位；

px

$$1rem = \frac{clientWidth}{750}$$

$$\frac{cssWidth}{clientWidth}= \frac{psdWidth}{750}$$

$$cssWidth = \frac{psdWidth * clientWidth}{750} = \frac{clientWidth}{750} * \frac{psdWidth}{1} = \frac{clientWidth}{750} * psdWidth$$

$$cssWidth = 1rem * psdWidth$$

浏览器存在最小字体 12px，设置font-size: 1rem; clientWidth/750 已经很小，这个比例不太合适了，所以一般放大一百倍

$$1rem = \frac{clientWidth * 100}{750}$$

$$cssWidth = \frac{clientWidth * 100}{750} * psdWidth$$

$$cssWidth = 1rem * psdWidth$$

<script type="text/javascript">
  function fontSize() {
    return document.documentElement.clientWidth / 750 * 100;
  }

  document.addEventListener("DOMContentLoaded", function(){
    document.querySelectorAll("html")[0].style.fontSize=`${fontSize()}px`;
  });

  window.onresize = function(){
    document.querySelectorAll("html")[0].style.fontSize=`${fontSize()}px`;
  }
</script>

vw

1vw 表示 1% 的屏幕宽度，对于 750px 设计稿 1px = 0.1333333vw，放大 100 倍后 100px = 13.333333vw；

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
  > html {
  font-size: 13.33333333vw;
  /* font-size: calc(100vw / 7.5); */
}

1 像素问题

摘自：移动端 1px 像素问题及解决办法

摘自：前端常见问题 —— 1 像素显示

dpr

JS：window.devicePixelRatio

CSS：-webkit-min-device-pixel-ratio

手机上 border 设置 1 像素无法达到我们想要的效果，是因为 devicePixelRatio 特性导致，iPhone 的 devicePixelRatio==2，而 border-width: 1px; 描述的是设备独立像素，所以，border 被放大到物理像素 2px 显示，在 iPhone 上就显得较粗。

viewport + rem

<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
}
if (window.devicePixelRatio == 2) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
}
if (window.devicePixelRatio == 3) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
}

var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;

media + transform: scale(0.5)

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-bottom::after {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .border-bottom::after {
    -webkit-transform: scaleY(0.33);
    transform: scaleY(0.33);
  }
}