CSS Practical Tips

preface

Zhang Xinxu’s “CSS World” book, the front end er is strongly recommended to read carefully, it details a lot of CSS features that are not paid attention to, very helpful to the front end. This article briefly lists the first four chapters of the book more practical knowledge points, the book is a lot of dry goods, worth reading.

Practical skills

When the text is small, center display, when it is large, left display

Taking advantage of the wrapping nature of elements, the size of an element is determined by the inner elements and is always smaller than the width of the container.

Wrapping elements: inline-block, floating element, absolutely positioned element.

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

Width /min-height, max-width/max-height

• The initial value

The default value of min-width/min-height is auto, and the default value of max-height/max-width is none.

To set the min-height gradient effect, specify the value of 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>
Copy the code

• Covers the rules

Beyond important, beyond maximum. In short, min-width/min-height,max-width/max-height overwrites width/height. If the Settings of min-xxx and max-xxx conflict, the actual result prevails.

A ghost blank node that cannot be ignored

Div has no width and height, span is blank, but the height of div is 18px. This height is determined by the font size and line height. To remove this effect, you need to set font size to 0.

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

The picture ADAPTS to width and height

There are two common ways to specify the width and height of the picture and make the picture adapt to the width and height. The first is background and the second is object-fit. Common attributes are as follows:

Powerful Content

The CSS Content property combined with the before/ After pseudo class can do a lot of unexpected things.

• . Dynamic loading effect

<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>Loading in progress<dot>.</dot>
  </div>
</template>
Copy the code

• contenteditableEditable elementplaceholder

<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>
Copy the code

The padding of the use

Background-clip allows you to set the background range, and combine that with the padding to do something fun.

• Double dot

<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>
Copy the code

Margin’s bizarre techniques

• Left and right columns of contour layout

<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>
Copy the code

• One end is fixed and the other is adaptive

<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>
Copy the code

• Block-level elements are vertically and horizontally centered

<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>
Copy the code