CSS 布局及技巧

布局

奇技

吸顶

.sticky-wrapper {
  	position: sticky;
  	top: 0;
  	z-index: 99;
}

加载骨架屏

/*
* Variables
*/
:root {
  --card-padding: 24px;
  --card-height: 340px;
  --card-skeleton: linear-gradient(lightgrey var(--card-height), transparent 0);
  --avatar-size: 32px;
  --avatar-position: var(--card-padding) var(--card-padding);
  --avatar-skeleton: radial-gradient(circle 16px at center, white 99%, transparent 0
  );
  --title-height: 32px;
  --title-width: 200px;
  --title-position: var(--card-padding) 180px;
  --title-skeleton: linear-gradient(white var(--title-height), transparent 0);
  --desc-line-height: 16px;
  --desc-line-skeleton: linear-gradient(white var(--desc-line-height), transparent 0);
  --desc-line-1-width:230px;
  --desc-line-1-position: var(--card-padding) 242px;
  --desc-line-2-width:180px;
  --desc-line-2-position: var(--card-padding) 265px;
  --footer-height: 40px;
  --footer-position: 0 calc(var(--card-height) - var(--footer-height));
  --footer-skeleton: linear-gradient(white var(--footer-height), transparent 0);
  --blur-width: 200px;
  --blur-size: var(--blur-width) calc(var(--card-height) - var(--footer-height));
}

/*
* Card Skeleton for Loading
*/
.card {
  width: 280px;
  height: var(--card-height);
}
.card:empty::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  box-shadow: 0 10px 45px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(90deg, rgba(211, 211, 211, 0) 0, rgba(211, 211, 211, 0.8) 50%, rgba(211, 211, 211, 0) 100%), var(--title-skeleton), var(--desc-line-skeleton), var(--desc-line-skeleton), var(--avatar-skeleton), var(--footer-skeleton), var(--card-skeleton);
  background-size: var(--blur-size), var(--title-width) var(--title-height), var(--desc-line-1-width) var(--desc-line-height), var(--desc-line-2-width) var(--desc-line-height), var(--avatar-size) var(--avatar-size), 100% var(--footer-height), 100% 100%;
  background-position: -200% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0;
  background-repeat: no-repeat;
  -webkit-animation: loading 1.5s infinite;
          animation: loading 1.5s infinite;
}

@-webkit-keyframes loading {
  to {
    background-position: 350% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0;
  }
}

@keyframes loading {
  to {
    background-position: 350% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0;
  }
}
/* 
* Demo Stuff
*/
body {
  min-height: 100vh;
  background-color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

利用 CSS 穿透覆盖默认样式

img {
  pointer-events: none;
}

实现自定义原生 select 控件的样式

select {
  /* 禁用原生的样式 */
  -webkit-appearance: none;
}

文本溢出处理

//单行
.single {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
//多行
.more {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  work-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; //指定行数
}

开启弹性滚动

body {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

注意：Android 不支持原生的弹性滚动，但可以借助第三方库 iScroll 来实现。

一像素边框设置

.folder li {
  position: relative;
  padding: 5px;
}
.folder li + li:before {
  position: absolute;
  top: -1px;
  left: 0;
  content: " ";
  width: 100%;
  height: 1px;
  border-top: 1px solid #ccc;
  -webkit-transform: scaleY(0.5);
}

兼容 IE 浏览器的透明度处理

.ui {
  width: 100%;
  height: 100%;
  opacity: 0.4;
  filter: Alpha(opacity=40); //兼容IE浏览器的处理
}

常用的全屏居中 CSS 函数

body {
  height: 100vh;
  text-align: center;
  line-height: 100vh;
}

Flex 布局 justify-content space-around 时 单个左居中

.container:after {
 content: "";
 flex: auto;
}

固定定位滚动

.container{
  position: fixed;
  overflow:scroll
}

扩大可点击区域

利用伪元素和定位达到鼠标移到边缘时候出现手型且可点击

.expand-range {
  position: relative;
}
.expand-range:after {
  content: '';
  position: absolute;
  top: -10px; right: -10px; bottom: -10px; left: -10px;
}

/* 推荐使用scss */
@mixin expand-range($top: -10px, $right: $top, $bottom: $top, $left: $right, $position: relative) {
  position: $position;
  &:after {
    content: '';
    position: absolute;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
  }
}
//使用：.test { @include expand-range($top: -5px, $position: absolute) }

巧用层叠上下文

利用层叠上下文和 z-index: -1 特性实现伪元素覆盖背景同时又不会遮挡文字。
梯形、菱形、平行四边形

div:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: cyan;
}

边框内圆角

利用伪元素实现圆角矩形并叠加在父元素的背景之上文字之下

div {
  position: relative;
  z-index: 1;
  height: 200px;
  padding: 10px;
  background: #333;
}

div::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  z-index: -1;
  border-radius: 5px;
  background: cyan;
}

自适应宽度

折角

切角

高度坍塌

.container{
  display:block;
  content:'';
  height:0;
  clear:both;
  overflow:hidden;
  visibility: hidden;
}

注意外边距折叠

只使用一个方向的 margin

更好的表格边框

/* 删除所有的双倍边框 */
border-collapse: collapse;  

短横线命名

.footer-column-left {}

不要重复设置

/* font 会被继承 */
html {
  font: normal 16px/1.4 sans-serif;
}

使用transform属性来创建动画

.ball {
    left: 50px;
    transition: 0.4s ease-out;
}

/* 建议 */
.ball.slide-out {
    transform: translateX(450px);
}

使用AutoPrefixer达到更好的兼容性

autoprefixer

压缩CSS文件

Caniuse

检查使用的属性是否得到了广泛的支持

验证

Stylelint

---

相关资料
12 个实用的前端开发技巧总结√
【CSS】470- 是时候开始用 CSS 自定义属性了
响应式布局新方案
20个让你效率更高的CSS代码技巧√
深入理解CSS background-blend-mode的作用机制
一文梳理CSS必会知识点
收藏！40 个 CSS 布局技巧
【第2022期】不定宽溢出文本适配滚动
奇妙的 CSS MASK
【CSS】333- 使用CSS自定义属性做一个前端加载骨架√
《CSS揭秘》实用技巧总结√
工作中常用的css整理√