CSS Skills Collection - Classics among Classics

CSS Skills Collection - Classics among Classics
Remove the dotted box on the link

Copy code
The code is as follows:

a:active, a:focus {
outline:none;
}

By default, Firefox will add a dotted border when a link is focused (or clicked), which can be removed using the above properties.

The simplest CSS reset

Copy code
The code is as follows:

* {
margin: 0; padding: 0
}

Do not wrap links

Copy code
The code is as follows:

a {
white-space:nowrap;
}

The above setting can avoid link wrapping, but I personally recommend that long links have a corresponding line (for discussion on line wrapping, see the record of the center of the circle).

Always show scroll bars in Firefox

Copy code
The code is as follows:

html {
overflow:-moz-scrollbars-vertical;
}

More Mozilla/Firefox private CSS properties can be found here. Need cross-browser support, you can also use

Copy code
The code is as follows:

body, html {
min-height:101%;
}

Use line-height to center vertically

line-height:24px;

When using a fixed-width container and need to vertically center a line, use line-height (the height is the same as the parent container). For more vertical centering summary, see here.

Clear container float

Copy code
The code is as follows:

#main {
overflow:hidden;
}

Centers a block element horizontally
margin:0 auto;
In fact,

Copy code
The code is as follows:

margin-left: auto;
margin-right: auto;

This technique is explained in almost all CSS textbooks. Don't forget to add a width to it. You can also use it in Exploer

Copy code
The code is as follows:

body{
text-align: center;
}

Then define the inner container

text-align: left;

recover.

Hide the scroll bar of Exploer textarea

Copy code
The code is as follows:

textarea {
overflow:auto;
}

Exploer By default, textarea will have a vertical scrollbar (don't ask me why).

Set print pagination

Copy code
The code is as follows:

h2 {
page-break-before:always;
}

The page-break-before attribute can set the paging when printing a web page.

<<:  JavaScript function call classic example code

>>:  Detailed explanation of CSS label mode display property

Recommend

Javascript to achieve the effect of closing advertisements

Here is a case study on how to close ads using Ja...

Summary of pitfalls in virtualbox centos7 nat+host-only networking

Table of contents 1. Problem Background 2. What a...

jQuery achieves breathing carousel effect

This article shares the specific code of jQuery t...

Detailed explanation of the use of Linux seq command

01. Command Overview The seq command is used to g...

Application scenarios and design methods of MySQL table and database sharding

Many friends have asked in forums and message are...

MySQL installation and configuration tutorial for win10 free installation version

I searched a lot online and found that many of th...

Native js to implement drop-down box selection component

This article example shares the specific code of ...

Why I recommend Nginx as a backend server proxy (reason analysis)

1. Introduction Our real servers should not be di...

Detailed explanation of COLLATION examples in MySQL that you may have overlooked

Preface The string types of MySQL database are CH...

JavaScript canvas to load pictures

This article shares the specific code of JavaScri...

Mini Program natively implements left-slide drawer menu

Table of contents WXS Response Event Plan A Page ...

Several situations that cause MySQL to perform a full table scan

Table of contents Case 1: Case 2: Case 3: To summ...

How to use axios to filter multiple repeated requests in a project

Table of contents 1. Introduction: In this case, ...

Solution to Ubuntu 18.04 not being able to connect to the network in VMware virtual machine

The solution to the problem that Ubuntu 18.04 in ...

CSS to achieve dynamic secondary menu

Dynamically implement a simple secondary menu Whe...