css 代码片段

一、清除浮动的更好方式(浏览器支持情况：100%)

1
2
3
4
5
<div class="clearfix">
  <div class="floated">float a</div>
  <div class="floated">float b</div>
  <div class="floated">float c</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
.clearfix {
  border: solid 1px red;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.floated {
  float: left;
  margin-left: 20px;
}

二、不变宽高比

给定宽度可变的元素，它将确保其高度以响应方式保持成比例（即，其宽高比保持不变）。

1
<div class="constant-width-to-height-ratio"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.constant-width-to-height-ratio {
  background: #333;
  width: 50%;
}
.constant-width-to-height-ratio::before {
  content: "";
  padding-top: 100%;
  float: left;
}
.constant-width-to-height-ratio::after {
  content: "";
  display: block;
  clear: both;
}

1、width:50% 只设置父级元素的宽度
2、::before 为父级元素定义一个伪元素
3、padding-top: 100%; 设置伪元素的内上边距，这里的百分比的值是按照宽度计算的，所以会呈现为一个响应式的元素块。
4、此方法还允许将内容正常放置在元素内。

三、display:table 居中

使用 display:table 替代 flexbox 使子元素在其父元素中水平垂直居中。

1
2
3
<div class="container">
  <div class="center"><span>Centered content</span></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  border: 1px solid #333;
  height: 250px;
  width: 250px;
}
.center {
  display: table;
  height: 100%;
  width: 100%;
}
.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

display：table 使.center 元素的行为类似于<table> HTML 元素;
设置.center 的宽高为 100%，使其填满父元素;
display：table-cell, 设置’.center > span’的 table-cell 允许元素表现得像 HTML 元素;
text-align: center 使子元素水平居中;
vertical-align: middle 使子元素垂直居中;

外部父级必须有固定的宽高。

四、子元素均匀分布

1
2
3
4
5
<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>
1
2
3
4
.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}

display: flex :启动 flex 布局

justify-content: space-between：

均匀地水平分配子元素。 第一个子元素位于左边缘，而最后一个子元素位于右边缘。 或者，使用 justify-content：space-around 来分配子节点周围的空间，而不是它们之间。

五、图片在容器中显示的更舒适

1
2
<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.image {
  background: #34495e;
  border: 1px solid #34495e;
  width: 200px;
  height: 200px;
}
.image-contain {
  object-fit: contain;
  object-position: center;
}
.image-cover {
  object-fit: cover;
  object-position: right top;
}

object-fit: contain 容器内显示整个图像，并且保持宽高比
object-fit: cover 用图像填充容器，并保持宽高比
object-position: [x] [y] 对图像的显示部位进行调整

六、flexbox 居中(常用)

1
<div class="flexbox-centering"><div class="child">Centered content.</div></div>
1
2
3
4
5
6
.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

display: flex 启用 flex 局部
justify-content: center 子元素水平居中
align-items: center 子元素垂直居中

七、将元素垂直居中于另一个元素

1
2
3
4
5
<div class="ghost-trick">
  <div class="ghosting">
    <p>Vertically centered without changing the position property.</p>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ghosting {
  height: 300px;
  background: #0ff;
}
.ghosting:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
p {
  display: inline-block;
  vertical-align: middle;
}

使用 ：before 伪元素的样式垂直对齐内联元素而不更改其 position 属性。

八、grid 居中

1
<div class="grid-centering"><div class="child">Centered content.</div></div>
1
2
3
4
5
6
.grid-centering {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}

display: grid 启用网格布局
justify-content: center 使子元素水平居中
align-items: center 使子元素垂直居中

九、使最后一项占满剩余高度

1
2
3
4
5
<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
html,
body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container > div:last-child {
  background-color: tomato;
  flex: 1;
}

height: 100% 将容器的高度设为视口的高度
display: flex 启用 flex
flex-direction: column 将项目的顺序设置成从上到下
flex-grow: 1 flexbox 会将容器的剩余可用空间应用于最后一个子元素。 父级必须具有视口高度。 flex-grow：1 可以应用于第一个或第二个元素，它将具有所有可用空间。

十、屏外隐藏元素

1
2
3
<a class="button" href="https://www.baidu.com">
  Learn More <span class="offscreen"> about baidu</span>
</a>
1
2
3
4
5
6
7
8
9
10
.offscreen {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

删除所有边框
使用 clip 隐藏元素
设置宽高为 1px
使用 margin：-1px 取消元素的高度和宽度
隐藏元素的溢出
移除所有的 padding
绝对定位元素，使其不占用 DOM 中的空间

十一、transform 居中子元素

1
<div class="parent"><div class="child">Centered content</div></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.parent {
  border: 1px solid #333;
  height: 250px;
  position: relative;
  width: 250px;
}
.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

十二、多行文本截断显示

1
2
3
4
<p class="truncate-text-multiline">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et.
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.truncate-text-multiline {
  overflow: hidden;
  display: block;
  height: 109.2px;
  margin: 0 auto;
  font-size: 26px;
  line-height: 1.4;
  width: 400px;
  position: relative;
}
.truncate-text-multiline:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: 36.4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
}

overflow: hidden 防止内容溢出
width: 400px 确保元素有尺寸
height: 109.2px 计算的高度值，它等于 font-size line-height numberOfLines（在这种情况下为 26 1.4 3 = 109.2）
height: 36.4px 渐变容器的计算值，它等于 font-size line-height（在这种情况下为 26 1.4 = 36.4）
background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50% 渐变从 透明到渐变从透明到＃f5f6f9

十三、CSS 列表计数器

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
  <li>List item</li>
  <li>List item</li>
  <li>
    List item
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>
1
2
3
4
5
6
7
ul {
  counter-reset: counter;
}
li::before {
  counter-increment: counter;
  content: counters(counter, ".") " ";
}

counter-reset 初始化计数器，该值是计数器的名称。默认情况下，计数器从 0 开始。此属性还可用于将其值更改为任何特定数字。
counter-increment 用于可数的元素。 一旦计数器重置初始化，计数器的值可以增加或减少。
counter(name, style)显示节计数器的值。通常用于内容属性。此函数可以接收两个参数，第一个作为计数器的名称，第二个参数表示占位内容，例如 3.1 的小数点。
CSS 计数器对于制作轮廓列表特别有用，因为计数器的新实例是在子元素中自动创建的。使用 counters（）函数，可以在不同级别的嵌套计数器之间插入分隔文本。

十四、自定义滚动条

1
2
3
4
5
6
7
8
<div class="custom-scrollbar">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.custom-scrollbar {
  height: 70px;
  overflow-y: scroll;
}
/* To style the document scrollbar, remove `.custom-scrollbar` */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

十五、自定义文本选择的样式

1
<p class="custom-text-selection">Select some of this text.</p>
1
2
3
4
5
6
7
8
::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

十六、Focus Within 伪类

1
2
3
4
5
6
7
8
<div class="focus-within">
  <form>
    <label for="given_name">Given Name:</label>
    <input id="given_name" type="text" /> <br />
    <label for="family_name">Family Name:</label>
    <input id="family_name" type="text" />
  </form>
</div>
1
2
3
4
5
6
7
8
9
form {
  border: 3px solid #2d98da;
  color: #000000;
  padding: 4px;
}
form:focus-within {
  background: #f7b731;
  color: #000000;
}

伪类：：focus-within 将对应的样式应用于父元素（任何子元素被聚焦）。 例如，表单元素内的输入元素。

十七、指定元素的全屏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
  <p>
    <em>Click the button below to enter the element into fullscreen mode. </em>
  </p>
  <div class="element" id="element">
    <p>I change color in fullscreen mode!</p>
  </div>
  <br />
  <button
    onclick="var el = document.getElementById('element'); el.requestFullscreen();"
  >
    Go Full Screen!
  </button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.container {
  margin: 40px auto;
  max-width: 700px;
}
.element {
  padding: 20px;
  height: 300px;
  width: 100%;
  background-color: skyblue;
}
.element p {
  text-align: center;
  color: white;
  font-size: 3em;
}
.element:-ms-fullscreen p {
  visibility: visible;
}
.element:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}

:fullscreen 伪类选择器用于选择和设置以全屏模式显示的元素。

十八、：not 伪类选择器

1
2
3
4
5
6
<ul class="css-not-selector-shortcut">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.css-not-selector-shortcut {
  display: flex;
}
ul {
  padding-left: 0;
}
li {
  list-style-type: none;
  margin: 0;
  padding: 0 0.75rem;
}
li:not(:last-child) {
  border-right: 2px solid #d2d5e4;
}

li:not(:last-child) 设置除 last：child 之外的所有 li 元素的样式，所以最后一个元素右侧没有 border.

十九、斑马条纹列表

1
2
3
4
5
6
7
<ul>
  <li>Item 01</li>
  <li>Item 02</li>
  <li>Item 03</li>
  <li>Item 04</li>
  <li>Item 05</li>
</ul>
1
2
3
li:nth-child(odd) {
  background-color: #eee;
}

二十、弹跳 loading 动画

1
2
3
4
5
<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

二十一、按钮边框动画

1
<div class="button-border"><button class="button">Submit</button></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.button {
  background-color: #c47135;
  border: none;
  color: #ffffff;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
}
.button:before,
.button:after {
  border: 0 solid transparent;
  transition: all 0.25s;
  content: "";
  height: 24px;
  position: absolute;
  width: 24px;
}
.button:before {
  border-top: 2px solid #c47135;
  left: 0px;
  top: -5px;
}
.button:after {
  border-bottom: 2px solid #c47135;
  bottom: -5px;
  right: 0px;
}
.button:hover {
  background-color: #c47135;
}
.button:hover:before,
.button:hover:after {
  height: 100%;
  width: 100%;
}

before 和：after 伪元素作为在悬停时设置动画的边框。

二十二、高度过度

1
2
3
4
<div class="trigger">
  Hover me to see a height transition.
  <div class="el">content</div>
</div>
1
2
3
4
5
6
7
8
.el {
  transition: max-height 0.5s;
  overflow: hidden;
  max-height: 0;
}
.trigger:hover > .el {
  max-height: var(--max-height);
}

二十三、悬停阴影动画

1
<p class="hover-shadow-box-animation">Box it!</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.hover-shadow-box-animation {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  margin: 10px;
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;
}
.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
  transform: scale(1.2);
}

二十四、悬停下划线动画

1
<p class="hover-underline-box-animation">Box it!</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}
.hover-underline-animation::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

display: inline-block 使 p 成为内联块，以防止下划线跨越整行宽度而不仅仅是文本内容。
position: relative 设置父元素为相对定位
::after 定义一个伪元素
position: absolute 将伪元素脱离文档六，并将其相对于父元素定位
width: 100% 确保伪元素和父元素的宽度一致。
transform: scaleX(0) 最初将伪元素缩放为 0，因此他是看不见的。
bottom: 0 and left: 0 将伪元素放在父元素的左下角。
transition: transform 0.25s ease-out 设置动画效果为 ease-out,并且在 0.25 秒内完成。
transform-origin: bottom right 变换中心点到父元素的右下角。
:hover::after 然后使用 scaleX（1）将宽度转换为 100％，然后将中心点更改为左下角，允许它在悬停时从另一个方向转换出来。

二十五、弹出菜单

1
2
3
<div class="reference" tabindex="0">
  <div class="popout-menu">Popout menu</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.reference {
  position: relative;
  background: tomato;
  width: 100px;
  height: 100px;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
  background: #333;
  color: white;
  padding: 15px;
}
.reference:hover > .popout-menu,
.reference:focus > .popout-menu,
.reference:focus-within > .popout-menu {
  visibility: visible;
}

left: 100% 弹出菜单从左侧偏移其父级宽度的 100％。
visibility: hidden
.reference:hover > .popout-menu 鼠标悬停时，.popout-menu 显示
.reference:focus > .popout-menu 聚焦时，.popout-menu 显示
.reference:focus-within > .popout-menu 确保在焦点位于参考范围内时显示弹出窗口。

二十六、悬停时，兄弟元素淡化

1
2
3
4
<div class="sibling-fade">
  <span>Item 1</span> <span>Item 2</span> <span>Item 3</span>
  <span>Item 4</span> <span>Item 5</span> <span>Item 6</span>
</div>
1
2
3
4
5
6
7
span {
  padding: 0 1rem;
  transition: opacity 0.2s;
}
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}

transition: opacity 0.2s 设置 0.2 秒的淡化动画。
.sibling-fade:hover span:not(:hover)当父级悬停时，选择当前未悬停的 span 子项并将其透明度更改为 0.5。