题记（CSS 篇）

smile_逸仙
130 阅读4分钟

1. css 盒模型（标准盒模型，怪异盒模型）

  • 盒模型：content padding border margin
  • 标准：width = content
  • 怪异：width = content + padding + border

设置：box-sizing: content-box | border-box

2. 设置/获取两种盒模型下对应的宽高

  • el.offsetHeight/offsetWidth：content + padding + border 只读
  • el.offsetParent：当前元素最近的父级定位元素，或父级 tabel、table-cell、html 只读
  • el.offsetLeft/offsetTop：当前元素的左/上外边框离 offsetParent 的左上内边框的距离
  • el.clientWidth/clientHeight：content + padding 且不包含滚动条 只读
  • el.clientLeft/clientTop：当前元素 content 距当前元素上/左外边框的距离 只读
  • window.innerWidth/innerHeight：浏览器视口宽高，包含滚动条 只读
  • window.outerWidth/outerHeight：浏览器窗口宽高，包含导航条及工具栏 只读
  • el.scrollLeft/scrollTop：当前元素的左/上外边框距离滚动容器的左上内边框的距离 读写
  • el.scrollWidth/scrollHeight：content + padding 只读
  • window.scrollX/scrollY：页面在水平/垂直方向上已滚动的距离
// 兼容写法
window.scrollX ? window.scrollX : (document.documentElement || document.body).scrollLeft

window.scrollY ? window.scrollY : (document.documentElement || document.body).scrollTop

3. css 的可继承样式与不可继承样式

  • 可继承：font-x，text-align，text-indext，line-height，word-spaceing，letter-spacing，direction，color
  • 不可继承：vertical-align，text-shadow，white-space，合模型属性，定位属性，轮廓样式属性

4. css 权重

5. 水平垂直居中一个元素

// 定宽高

// 1. 绝对定位 + (- margin)
{
  with: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

// 2. 绝对定位 + margin

{
  with: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

// 不定宽高

// 1. flex 布局
{
  ...
}

// 2. grid 布局
.box {
  display: grid;
}

.inner {
  margin: auto;
}

// 3. table-cell
.box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.inner {
  margin: auto; // display: inline-block;
}

// 4. 绝对定位 + transform
{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

// 5. 伪元素
.box::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

img {
  vertical-align: middle;
}

6. BFC，IFC

  • BFC：块级格式化上下午文
  • IFC：行内格式化上下文，行内框一个接一个的顺序排列，排列方向由 writing-mode 决定，单行空间不够时会自定换行，行级上下文的高度由内部最高的内联级盒子决定
  • FFC：自适应格式化上下文
  • GFC：网格布局格式化上下文
  • TFC：表格布局格式化上下文

7. flex 布局

flex 布局又称，弹性盒子布局，flex 布局会在内部形成一个 BFC。flex 布局的架构可以分为两部分，一部分是关于 轴，一部分是关于 容器和项。

轴：flex 容器内默认存在两根 轴，一根是水平向右的 主轴，一根是竖直向下的 交叉轴。

定义轴的属性：

  • flex-direction：规定轴的向性方向

容器和项：定义了 display: flex 的元素称之为 flex 容器，flex 容器 内的所有子级元素称之为该 flex 容器 的项。

定义容器的属性：

  • flex-warp：定义项的换行规则
  • flex-flow：flex-direction 和 flex-warp 的合并简写
  • justify-content：定义了项在主轴上的对齐方式
  • align-items：定义了单行项在交叉轴上的对齐方式
  • align-content：定义了多行项在交叉轴上的对齐方式，align-content 生效大的前提是 flex-warp: warp

定义项的属性：

  • order：定义项的排列顺序，可以为负值
  • flex-grow：项的剩余空间分配比，最大值为 1
  • flex-shrink：容器的溢出空间承重比，当所有项的空间总和大于容器空间时，溢出的值会根据 flex-shrink 的值进行空间分摊
  • flex-basis：定义了项在主轴方向上的初始大小，优先级高于自身宽度
  • flex：flex-grow flex-shrink flex-basis 的简写
  • align-self：允许单个项与其他项有不一样的对齐方式，可以覆盖容器属性 align-items

8. css 三角形及其原理

  1. 文字溢出缺省
  2. css 圣杯布局，品字布局 11. display: none，visibility: hidden 和 opicity: 0;
  • display: none：不会被渲染，不占据空间，动态修改会引起重排和重绘，开销最大，不支持 transition
  • visiable: hidden：会被渲染，占据空间，动态修改会引起重绘，开销较大，transition 时，visible 会立即显示，hidden 会过渡
  • opicity: 0：会被渲染，占据空间，被提升为合成层，动态修改不=会引起重排重绘，开销较小，隐藏和显示都可以过渡

12. 清除浮动的几种方式

// clear

// 1. 直接使用
{
  clear: both;
}

// 2. 容器尾部加垫片
.chip {
  clear: left;
}

// 3. 伪元素垫片
.box::after {
  content: '.';
  display: block;
  clear: left;
}

// 4. BFC（内部 ｜ 外部）

13. 网页中使用奇数字体还是偶数字体

windows 字体库的点阵都是偶数点阵

14. chrome 支持小于 12px 的字体

  • transfrom
  • zoom

15. IOS 上让字体变清晰

-webkit-font-smoothing: antialiased

16. position: fixed 在 Android 上无效

meta 设置禁用缩放

17. position 可选值及意义

avatar
文章
阅读
粉丝