CSS實用技巧（上）

時間 2021-01-28

標籤 html 前端佈局字體 this spa code orm htm 圖片欄目 CSS 简体版

原文原文鏈接

前言

張鑫旭的《CSS世界》這本書，強烈推薦前端er仔細閱讀下，裏面詳細說明了許多不怎麼被注意的CSS特性，對前端進階頗有幫助。
本文簡要列舉書中前四章比較實用的知識點，書中乾貨不少，值得一讀。html

實用技巧

文字少的時候居中顯示，多的時候居左顯示

利用元素的包裹性，元素的尺寸由內部元素決定，且永遠小於容器的寬度。前端

具備包裹性的元素：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的值。this

<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爲準。spa

不可忽略的幽靈空白節點

以下代碼，div沒有設置寬高，span爲空白標籤，可是div的高度卻爲18px，這個高度是由字體大小和行高決定的，要想去除這個影響，須要將font-size設置爲0。code

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

圖片根據寬高自適應

指定圖片寬高，使圖片自適應寬高，經常使用的兩種方式，第一種是background，第二種是object-fit。經常使用屬性以下：orm

background-size	object-fit	CSS屬性	說明
cover	cover	覆蓋	會存在圖片展現不全
contain	contain	包含	等比縮放，空白自動填充
--	fill（默認）	填充	不符合尺寸，橫向、縱向壓縮

功能強大的content

CSS content屬性結合before/after僞類，能實現不少意想不到的效果。htm

...動態加載效果

<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>