网站首页 > 知识剖析正文

CSS实用技巧(上)

nixiaole 2024-11-22 18:50:30 知识剖析 20 ℃

前言

张鑫旭的《CSS世界》这本书，强烈推荐前端er仔细阅读下，里面详细说明了许多不怎么被注意的CSS特性，对前端进阶很有帮助。
本文简要列举书中前四章比较实用的知识点，书中干货很多，值得一读。

实用技巧

文字少的时候居中显示，多的时候居左显示

利用元素的包裹性，元素的尺寸由内部元素决定，且永远小于容器的宽度。

具有包裹性的元素：inline-block、浮动元素、绝对定位元素。

<style>
  .content{
    display: inline-block;
    text-align: left;
  }
  .box{
    text-align: center;
  }
</style>
<div class="box">
  <span class="content"></span>
</div>

你不知道的min-width/min-height, max-width/max-height

初始值

min-width/min-height初始值是auto,max-height/max-width初始值是none。

设置min-height渐变效果，需要指定min-height的值。

<style>
  .box{
    min-height: 20px;
    width: 200px;
    background-color: coral;
    transition: min-height .5s;;
  }
  .box:hover{
    min-height: 300px;
  }
</style>
<template>
  <div class="box"></div>
</template>

覆盖规则

超越important，超越最大。简而言之，min-width/min-height,max-width/max-height会覆盖width/height。当min-xxx与max-xxx设置相冲突时，实际结果以min-xxx为准。

不可忽略的幽灵空白节点

如下代码，div没有设置宽高，span为空白标签，但是div的高度却为18px，这个高度是由字体大小和行高决定的，要想去除这个影响，需要将font-size设置为0。

<style>
  div {
    background-color: #cd0000;
  }
  span {
    display: inline-block;
  }
</style>
<template>
 <div><span></span></div>
</template>

图片根据宽高自适应

指定图片宽高，使图片自适应宽高，常用的两种方式，第一种是background，第二种是object-fit。常用属性如下：

background-size	object-fit	CSS属性	说明
cover	cover	覆盖	会存在图片展示不全
contain	contain	包含	等比缩放，空白自动填充
--	fill（默认）	填充	不符合尺寸，横向、纵向压缩

功能强大的content

CSS content属性结合before/after伪类，能实现很多意想不到的效果。

...动态加载效果

<style>
dot {
  display: inline-block;
  height: 1em;
  line-height: 1;
  text-align: left;
  vertical-align: -.25em;
  overflow: hidden;
} 
dot::before {
  display: block;
  content: '...\A..\A.';
  white-space: pre-wrap;
  animation: dot 3s infinite step-start both;
} 
@keyframes dot {
  33% { transform: translateY(-2em); }
  66% { transform: translateY(-1em); }
}
</style>
<template>
  <div>
    正在加载中<dot>...</dot>
  </div>
</template>

contenteditable可编辑元素placeholder

<style>
.edit{
  width: 200px;
  height: 50px;
  background-color: azure;
}
.edit:empty::before{
  content: attr(data-placeholder);
}
</style>
<template>
  <div class="edit" contenteditable="true" data-placeholder="this is a placeholder"></div>
</template>

padding的妙用

background-clip可以设置background作用范围，结合padding，可以做出一些好玩的东西。

双层圆点

<style>
.icon-dot {
  display: inline-block;
  width: 100px; height: 100px;
  padding: 10px;
  border: 10px solid;
  border-radius: 50%;
  background-color: currentColor;
  background-clip: content-box;
}
</style>
<template>
  <span class="icon-dot"></span>
</template>

margin的奇淫技巧

左右两列等高布局

<style>
.column-box {
  overflow: hidden;
} 
.column-left,
.column-right {
  margin-bottom: -9999px;
  padding-bottom: 9999px;
  float: left;
}
.column-left{
  width: 100px;
  background-color: #ccc;
}
.column-right{
  width: 100px;
  background-color: aquamarine;
}
</style>
<template>
<div class="column-box">
    <div class="column-left">
      123
    </div>
    <div class="column-right">
      456    
    </div>
  </div>
</template>

一端固定，另外一端自适应

<style>
.left{
  width: 200px;
  height: 100%;
  float: left;
}
.right{
  margin-left: 200px;
}
</style>
<template>
  <body>
    <div class='left'></div>
    <div class='right'></div>
  </body>
</template>

块级元素垂直水平居中

<style>
.father{
  width: 300px;
  height: 150px;
  position: relative;
}
.son{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
</style>
<template>
  <div class='father'>
    <div class='son'></div>
  </div>
</template>

上一篇：多行内容超出...显示的JS解决方案
下一篇：手把手教你eBay商品详情页嵌入视频

网站首页 > 知识剖析 正文