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

MySQL scheduled full database backup

Table of contents 1. MySQL data backup 1.1, mysql...

JavaScript commonly used array deduplication actual combat source code

Array deduplication is usually encountered during...

How to set up the terminal to run applications after Ubuntu starts

1. Enter start in the menu bar and click startup ...

JavaScript implements fireworks effects with sound effects

It took me half an hour to write the code, and th...

Analysis and description of network configuration files under Ubuntu system

I encountered a strange network problem today. I ...

Analysis of the Principle of MySQL Index Length Limit

This article mainly introduces the analysis of th...

Detailed explanation of the working principle of nginx+php execution request

How PHP works First, let's understand the rel...

Detailed explanation of when javascript scripts will be executed

JavaScript scripts can be embedded anywhere in HT...

Software Testing - MySQL (VI: Database Functions)

1.MySQL functions 1. Mathematical functions PI() ...

Semantics, writing, and best practices of link A

The semantics, writing style, and best practices ...

Reasons and solutions for multiple executions of the watch method when Vue monitors route changes

Table of contents Requirement description: Requir...

Html sample code for reading and displaying pictures in a local folder

One purpose Select a local folder on the Html pag...

MySQL character set garbled characters and solutions

Preface A character set is a set of symbols and e...

How to deploy Oracle using Docker on Mac

How to deploy Oracle using Docker on Mac First in...

How to understand JS function anti-shake and function throttling

Table of contents Overview 1. Function debounce 2...