Html+css frequently used small notes (continuous update)

First, remove the blue border when input is clicked

Outline:none;

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Ii. Prohibition of text selection

-webkit-touch-callout:none;/*IOS Safari*/-webkit-user-select:none;/*Chrome/safari/opera*/-khtml-user-select:none;/*Konqueror*/-moz-user-select:none;/*Firefox*/-ms-user-select:none;/*Internet Explorer/edge*//*Description: This property does not prefix all browsers currently supported*/User-select:none;/*non-prefixed version, currently not supported by any browser*/

Attention:

In IE < 10 and Opera < 15, we need to add a property to the element that we need to disallow the selection.

Unselectable= "On", otherwise it may not be effective oh ~ But modern browsers do not have to be compatible with some old browsers.

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Third, CSS prefix

• Trident kernel: prefix to-ms
• Gecko Kernel: prefix to-moz
• presto kernel: prefix to-o
• webkit kernel: prefix to-webkit

These are the four main core.

Konqueror kernel: prefix-khtml-Note: The kernel is not mainstream, interested can Baidu do understand.

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Four, textarea (text field) prohibit drag and drop (no change in size)

There are two ways of doing this:

1) Disable the drag button at the bottom right. (recommend this)

Resize:none;

2) fixed size. (But the button in the lower right corner is still there, just dragging doesn't change the size)

width:350px;height:150px;max-width:350px;max-height:150px;

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

The block-level element background diagram (BACKGROUND-IMG) stretches the entire element.

    Background:url ("Your Image url");    Background-repeat:no-repeat;    background-size:100% 100%;

background-size handles auto contain cover general values you can also fill in percentages or dimensions. The first value is the background wide chart The second is the height of the background graph.

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Six, the background map super long does not destroy the original proportion of the center alignment.

Background-repeat:no-repeat;background-position:center;

Background-position set the background graph alignment, you can set two values, the first x-axis second y-axis.

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Seven, absolute element Center (horizontal, vertical center)

Method One

  Margin:auto;  Position:absolute;  top:0; left:0; bottom:0; right:0;

Applicable to unknown dimension elements.

Method Two

position:absolute;width:200px;height:400px;left:50%;top:50%;margin-left:-100px;   /* set to half the width */ margin-top:-200px;    /* set to half the height */

For known dimension elements

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Add a border to thead and tbody in table.

Thead and Tbodytbody So add border is not working, the general practice is to give thead and tbody inside of the TD plus frame, obviously this is not a good solution.

{    border-collapse: collapse;} /* set the table label's border-collapse style so that you can set the border style for thead. */

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Nine, JS mention Chinese characters (can also extract numbers, replace the regular on the line)

var str= "How do I extract all Chinese characters from an HTML page?" There can be no other HTML code. ";  Alert (str.replace (/[^\u4e00-\u9fa5]/gi, ""));  

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

X. A group of tags that are ignored--group box

< fieldset >    < legend > Group title </legend>    <!-- content --   </fieldset>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Html+css frequently used small notes (continuous update)