Skip to content

CSS 实践

[]

不使用 @import

在 iframe 中插入 CSS

js
var css = document.createElement('link')
css.href = 'style.css'
css.rel = 'stylesheet'
css.type = 'text/css'
frames['frame-id'].document.body.appendChild(css)

未知宽度下的水平居中

  • 方案一,需要父子配合
    html
    <div class="wrap">
      <div class="inner">html : 让 inner 居中</div>
    </div>
    css
    .wrap {
      float: left; /* 自适应内容宽度 */
      position: relative;
      left: 50%;
    }
    .inner {
      position: relative;
      left: -50%;
    }
  • 方案二,块宽度未知,绝对定位,偏移 50%,加上负的水平变形进行校正
    css
    .horizontal-center { 
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

用 flexbox 垂直居中任意元素

css
html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  align-item: center;
}

水平垂直居中:

translate 修正偏差

css
elem {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

CSS 性能

css
// 注意这条代码,会先遍历所有a链接,可能有上千个。
#social a {
}

// better
#social .social-link {
}

视觉稿中的 px 换算为 rem

background-position

控制背景图的起始点,相对于左上角为原点坐标 初始值为 0%, 0%,也就是原点 只指定一个值,表示横坐标,纵坐标未指定默认值为 50%,而不是说横纵坐标都使用给定的值 比如 background-position: center 并非指定两个值都为 center,而只是指定了第一个值

background-origin

根据盒模型,设置不同的定位参考原点 从内到外有 content-box, padding-box, border-box,初始值为 padding-box 当 background-attachment 为 fixed,也就是相对原点变为视口左上角,background-origin 无效

background-attachment

背景相对于视口的依附处理方式,如 fixed 则保持于视口中,不随内容滚动,初始值为 scroll

图片响应占位解决方案

  • 问题:不能给固定高度
  • 利用 padding 处理高度(需给定宽度)
css
.my-element {
  overflow: hidden;
  position: relative;
}
.my-element:after {
  content: '';
  display: block;
  height: 0;
  padding-top: 56.25%; /* Aspect ratio = height divided width times 100 */
}

html - how to give image a dynamic width and height when using bootstrap responsive grid system - Stack Overflow http://stackoverflow.com/questions/23771952/how-to-give-image-a-dynamic-width-and-height-when-using-bootstrap-responsive-gri

css - Keep div height while the image is loading - Stack Overflow http://stackoverflow.com/questions/21992210/keep-div-height-while-the-image-is-loading

如何用 CSS 画直角梯形?

  • 对外围容器应用斜切 -webkit-transform: skewX(-10deg)
  • 然后用 margin 负值或相对定位,隐藏局部
  • 若梯形内有内容,对内容应用反斜切和反向偏移

横向百分比布局有哪些问题?

如何渐进地将设计图还原?

  • 抽象公共类
  • 布局拆解,严格按 row-col 来写
  • 没有图片素材时,添加占位图
  • 要不断地拆解问题,我要解决一个怎样的小问题

[换算]以宽度为基准缩放,字体也会缩放吗?

线性渐变

  • 0deg 相当于 to top,90deg 相当于 to right
  • color-stop 可有多个,如果不指定百分比位置,则是均匀散开
  • 支持透明度
  • 可以搭配背景图使用
  • 至少定义两种颜色,希望呈现的平稳过渡的颜色
background: linear-gradient(to bottom, black 90%, green 95%, yellow);

background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1)), url(https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg) no-repeat;
background-size: cover;

径向渐变

  • 线性渐变是直线渐变,径向是圆形的渐变
  • 圆只是一种特殊的椭圆 -径向渐变从圆心点以椭圆形状向外扩散,渐变的实现由两部分组成:椭圆和色标。椭圆部分用来控制径向渐变的位置、大小和形状等。而色标部分包含一个颜色值和一个位置,用来控制渐变的颜色变化
  • 中心位置的值,用单词,或者都用 px,不能混用
  • 应用:切角,用透明色填充

css - Multiple gradients and radial gradient with center outside of the element - Stack OverflowRadial Gradient Recipes | CSS-Trickscss 实现平角切角和弧形切角效果 - 小圣贤君的博客 - CSDN 博客

CSS 变量命名示例

colors-by-use.md

布局排列疑难杂症

优化

变量

  • 支持回退和设置默认值
  • 支持作用域和继承
  • CSS 变量提供了 JavaScript 与 CSS 通信的一种途径

CSS 变量教程 - 阮一峰的网络日志Everything you need to know about CSS Variables – freeCodeCamp

clip-path

Clippy — CSS clip-path maker

ios safari 100 vh 计算会包括导航底栏,解决

css
  min-height: 100vh;
  /* mobile viewport bug */
  min-height: -webkit-fill-available;

4 things in web development I've learned in 2020, so far - DEV Community

CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content - 小火柴的蓝色理想 - 博客园

相当于 fit-content ?

https://caniuse.com/?search=fill-available