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

Detailed explanation of how a SQL statement is executed in MySQL

CSS Skills Collection - Classics among Classics

Detailed explanation of how a SQL statement is executed in MySQL

Solve the problem that the borders of the search box and the search button cannot overlap

Resolving MySQL implicit conversion issues

JS uses canvas technology to imitate echarts bar chart

Gallery function implemented by native Js

MySQL slow query pitfalls

How to build a multi-node Elastic stack cluster on RHEL8 /CentOS8

Share some key interview questions about MySQL index

Docker installs ClickHouse and initializes data testing

Getting Started with Nginx Reverse Proxy

Recommend

Tutorial on building a JMeter+Grafana+influxdb visual performance monitoring platform in docker environment

N ways to achieve two-column layout with CSS

MySQL primary key naming strategy related

Solve the problem of docker container exiting immediately after starting

vue.config.js packaging optimization configuration

Simple usage example of vue recursive component

Detailed explanation of how to adjust Linux command history

VMware Workstation 14 Pro installs CentOS 7.0

SQL Get stored procedure return data process analysis

MySQL master-slave data is inconsistent, prompt: Slave_SQL_Running: No solution

Detailed explanation of the benefits of PNG in various network image formats

Detailed steps for deploying Tomcat server based on IDEA

HTML fixed title column, title header table specific implementation code

CSS to achieve chat bubble effect

Linux hardware configuration command example