CSS 高频场景 Review！

麦芒kid
139 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情 俗话说的好，基础不牢，地动山摇。

当设计在你旁边要求当场改样式时，是不是应该体现一下前端写样式的专业性啦~

孔乙己说，“茴”有四种写法，面对 css 千奇百怪的组合，我们杜绝选择恐惧症 🙅🏻‍♀️，本文将带你复习最使用频率较高的 css 场景。开始吧 🧙🏼。

场景一：文字和图标对齐（icon 😀）

  • inline-flex

Example1: align text and icon[1]

<span class="center-icon">
  <i class="icon"></i>
  text
</span>

.center-icon {
  font-size: 20px;
  display: inline-flex;
  align-items: center;
}
.icon {
  inline-size: 20px;
  height: 20px;
  margin-right: 4px;
  background: url(https://raw.githubusercontent.com/lijie33402/picGo/main/20210525230657.svg)
    no-repeat center;
  background-size: contain;
}

场景二：单行文字垂直居中

  • 设置父级的 height 和 inline-height 相等

Example2: align text single line[2]

span {
  display: inline-block;
  height: 40px;
  padding: 4px;
  background-color: black;
  color: #FFF;
  line-height:  40px;
}

<span>text</span>

场景三：可滚动区

  • overflow

    • 注意其默认值是 visible，auto 值又浏览器决定是否将内容可滚动化
    • 两个方向 overflow-x 和 overflow-y 可以分别设置

  • scroll-bar

    • 伪元素使用 ::webkit-scroll-bar

Example3: scroll area[3]

<div class="scroll">
  <ul class="list">
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ul>
</div>

.scroll{
 width: 400px;
  max-height: 200px;
  overflow-y: overlay;
  background-color: grey;
}
.scroll::-webkit-scrollbar{
  width: 8px;
   background-color:#F5F5F5;
}
.scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    border-radius:10px;
    background-color:#F5F5F5;
}
.scroll::-webkit-scrollbar-thumb
{
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    background-color:#555;
}
ul.list,li {
  list-style: none;
  marign: 0px;
  padding: 0px;
  color: #FFF;
}
.list li {
  margin-bottom: 10px;
}
.list li::last-child {
  margin-bottom: 0px;
}

场景四：多行文字超出部分省略

  • display: -webkit-box
  • overflow-wrap 处理过长单词不换行

Example4: paragragh overflow[4]

<p>
  sometextsometextsometext
  some text some text
  some text some text
  some text some text
  some text some text
</p>

p {
  inline-size: 100px;
  height: 40px;  
  border: 1px solid;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow : hidden;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
}

场景五：单行文字超出省略

  • 三句话，我让单行文字超出 😅…

Example5: text overflow[5]

<p>longlonglonglonglonglong</p>

p{
  width: 100px;
  overflow: hidden; 
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid;
}

场景六：圆形头像

Z8Q%}XU)9H5Y0B_W%AR16.png

  • border-radius 设置为 50% 即可获得一个圆形，记得还要设置等宽和等高哦

  • 使用 img 标签

    • object-fit
    • object-position

  • 使用 background 属性

    • background-size
    • backgrond-position

Example6: circle avater[6]

img {
  border-radius: 50%;
  width: 30vmin;
  heightmin;
  object-fit: cover;
  object-position: center;
  margin: 5vmin;
  transition: all 0.2s ease;
}

场景七：标题和描述

20YQ5FIQ7$~S39UQXMPYS{H.png

  • 使用 flex 中的 space-between, 计算外沿边框无需计算内部的 margin

Example7: align title and desc[7]

<div class="wrap">
  <h2 class="title">title</h2>
  <p class="desc">description</p>
</div>

h2, p{
  margin: 0;
  padding: 0;
  font-weight: normal;
}
.wrap {
  width: 200px;
  height: 100px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  background-color: grey;  
}

场景八：宫格卡片

06Q7RV}VETY12J%NHE{%1A7.png

  • 每行单个 item 则使用 flex，多见于移动端的纵向列表
  • 每行多个 item 则使用 grid

Example8: grid card[8]

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.wrap{
  width: 300px;
  height: 240px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 22px;
  padding: 4px;
  background-color: grey;
}
.item {
  width: 80px;
  height: 100px;
  border: 1px solid;
}

场景九：两栏布局

  • 使用 flex-grow 实现一侧的宽度自适应

    注意 flex 的默认值中，flex-grow 为 0，即不放大；flex-shrink 为 1，即剩余空间不足会缩小

  • 结合 min-width、max-width 以及响应式的单位（百分比、vw等）

Example9: 2 columns[9]

<div class="wrap">
  <div class="aside"></div>
  <div class="main"></div>
</div>

.wrap {
  width: 80vw;
  min-width: 310px;
  height: 250px;
  display: flex;
  margin: 0 auto;
  border: 1px solid;
}
.aside {
  min-width: 100px;
  margin-right: 10px;
  background-color: pink;
}
.main {
  flex: 1 0 200px;
  background-color: grey;
}

场景十：文字列表

Z_M@(GH[[8O7RQLWC{8KK.png

  • 另附 1 px的 border 解决方法

Example10: text item list[10]

<div class="wrap">
  <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ul>
</div>

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.wrap {
  width: 400px;
  padding: 4px;
  background-color: grey;
  color: #FFF;
}
ul li{
  line-height: 2;
}
ul li::after{
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  background-color: #FFF;
  transform: scaleY(0.5);
}

Tip1：样式的书写顺序

样式的书写顺序有两个重要的影响：

  1. css 解析时，布局的稳定性
  2. 样式代码的层次性

具体的书写规则是：从定位布局到细节展示~

  1. 定位：position z-index left right top bottom display等。
  2. 自身属性：width height min-height max-height min-width max-width等。
  3. 文字样式：color font-size color text-align等。
  4. 背景：background-image border等。
  5. 文本属性: text-align vertical-align text-overflow等。
  6. css3中属性：box-shadow、animation、border-radius、transform等

Tip2: 使用语义化标签且去除固有样式

  • h 和 p（注意这俩都是块级元素）

    • margin
    • padding
    • font-weight

  • i （设置图标可以选用）

      • display
      • width/inline-size
      • height

  • ul 和 li

    ul, li {
 list-style: none;
 margin: 0px;
 padding: 0px;
}

Tip3: 多使用 MDN 进行文档查阅

改版后的 MDN 真的美观了很多，而且增加了不少自学教程和测验，值得一试 🤩

[1]

Example1: align text and icon: codepen.io/liyaxuanliy…

[2]

Example2: align text single line: codepen.io/liyaxuanliy…

[3]

Example3: scroll area: codepen.io/liyaxuanliy…

[4]

Example4: paragragh overflow: codepen.io/liyaxuanliy…

[5]

Example5: text overflow: codepen.io/liyaxuanliy…

[6]

Example6: circle avater: codepen.io/airen/pen/E…

[7]

Example7: align title and desc: codepen.io/liyaxuanliy…

[8]

Example8: grid card: codepen.io/liyaxuanliy…

[9]

Example9: 2 columns: codepen.io/liyaxuanliy…

[10]

Example10: text item list: codepen.io/liyaxuanliy…

avatar
文章
阅读
粉丝