css3-moz -, -ms, -webkit, -o represent respectively, and WeChat browser kernel analysis

//-ms "ie" kernel identification code
// -moz "firefox" kernel identification code
//-webkit "Chrome/safari" kernel identification code
//-o "opera OPEN" kernel identification code

Why add an identification code:

Before the standard was finalized, some browsers had already implemented some functions based on the initial draft. In order to be compatible with the standards that were later determined, each browser used its own private prefix to distinguish it from the standard. When the standard was established, , major browsers will gradually support new CSS3 attributes without prefixes.

WeChat browser kernel:

The IOS version of WeChat all uses the webkit kernel, including the Android version of the X5 kernel. It uses the webkit kernel but has some compatibility issues, such as not prohibiting flex.

Calc() usage in css3

Dynamically calculate the length value.

One thing that needs special attention: in the calc function, a space must be reserved on both sides of the operator, otherwise the function will report an error.

.box { width: 1920px;/*Written for browsers that do not support calc()*/ width:-moz-calc(100% -20px); width:-webkit-calc(100% - 20px); width: calc(100% - 20px); margin: 0 calc(50% - 960px); //The large picture only shows the middle area}

transparent

This attribute is used to specify a fully transparent color, similar to rgba (0, 0, 0, 0).

css implements single-line and multi-line text overflow to display ellipsis (...)

-->css single-line text overflow display display:block; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

-->css multi-line text overflow display display: block;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;//Write multiple lines of numbers here -webkit-box-orient: vertical;

< pre>

-->jquery Exceeded part...display(function () {//Teacher introduction-Exceeded part ellipsis var teachersContent="There are always good and bad things in this world. Since you are born as a human being, please be positive , please be kind!";var text;teachersContent.each(function (index, item) { text = $(item).html(); if (text.length > 10) { $(item).html(text. substr(0, 10) + '...'); } }); })();

Pseudo element

I particularly like the use of pseudo elements. Just my humble opinion record of some of the things I used~

Pseudo elements can help achieve certain CSS effects without changing the HTML structure, which is the icing on the cake for the project.

The color of the origin of li cannot be modified, but the requirement requires that the origin and text remain the same color.

html code

<!-- The color of li's own dots cannot be modified--><ul class="c-defind-liststyle"> <li>Coffee</li>< li>Tea</li><li>Milk</li></ul>

css code

.c-defind-liststyle li { list-style: none; position: relative;}.c-defind-liststyle li::before { content: ""; display: inline-block; width: 5px ; height: 5px; background: #ccc; border-radius: 50%; position: absolute; top: -4px; left: -14px;}

Use of ::selection selector
Requirement: The color and background of selected text need to be red for the background and blue for the font.

p::selection,textarea::selection{ color: blue; background: red;}::-moz-selection{ color: blue; background: red;}::selection selector Matches the selection selected by the user. Only a few css attributes can be applied to the ::selection selector: color, background, cursor and outline

Mobile end filling Fill the screen

<style> .mask-pop::before{ content:" "; position:absolute; left:0; right:0; top:0; bottom:0; background -color:rgba（0,0,0,0.6）;/* Color customization*/ z-index:-10; }</style><body> <div class="mask-pop"> Content on the mask</div></body>

Find some time to study pseudo-elements carefully and sharpen your sword before chopping wood.

Example-->Usage code of commonly used pseudo-elements: such as the selected state: .header-link a.active::after,.header-link a:hover::after { content: ''; width: 24px; height: 4px; background-color: #005BAC; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); border-radius: 2px;}
Slide up the mobile H5 page on the browser and the address search bar will disappear. 
The solution is as follows:
html,body { height:100%; overflow-y:auto;}
css There are empty gaps
Sometimes some elements directly have a strange blank element that we don't know about, which is very difficult to control. We can solve the problem by setting font-size: 0 on their parent elements.
Horizontal sliding effect when on mobile devices. 
Scenario: Categories need to be horizontally slidable / Some sections of the h5 page, such as tables, need to be horizontally slidable / Douban video layout
<ul> <li> <a>Category 1</a> </li> ......</ul> ul { white-space: nowrap; /* Important: The definition of the parent element can be scrolled horizontally*/ overflow-x: auto; list-style: none; padding: 0; }ul li { /* The width and height of the child element are arbitrary*/ margin-left: 20px; width: 100px; height : 100px; display: inline-block; vertical-align: top; text-align: center;}
Sprite Use positioning for multiple images of images
 background-image: url(../../icons.jpg); background-repeat: no-repeat; background-size: 50px; // For example, if icons.jpg has a width of 100px and the icon size is 2 times the image, set it to 50px background-position: 0 -100px or center or top center
Horizontal and vertical divs with variable width and height
Best implementation: transform for element offset.
<body> <style> body,html { margin:0; width:100%; height:100%; } #box { width:100%; height:100%; background:rgba( 0,0,0,0.7); position:relative; } #content{ position:absolute; background:pink; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); } </style> <div id="box"> <div id="content">div is supported by its content Starting width and height</div> </div> </body>
The code is the simplest:
<body> <style> body,html { margin:0; width:100%; height:100%; } #box { width:100%; height:100%; background:rgba( 0,0,0,0.7); display:flex; justify-content:center; align-items:center; } #content {width:50%; height:50%; background:pink; } </style> < ;div id="box"> <div id="content">The div is supported by the content in its width and height</div> </div> </body>
Best compatible with:
<style> body,html { margin:0; width:100%; height:100%; } #box { width:100%; height:100%;background:rgba(0,0, 0,0.7); position:relative;} #content { width:50%; height:50%; background:pink; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto ; } </style> <div id="box"> <div id="content">The div is supported by the content in its width and height</div> </div>  
Vertically center multi-line text:
<style> .bg_box { width: 300px; height: 300px; margin-top: 20px; background-color: #BBBBBB} /*Method 1*/ .span_box { display: table; } .words_span { display: table-cell; vertical-align: middle;} /*Method 2*/ .p_box { line-height: 300px; } .words_p { display: inline-block; line-height: 20px; /*Give subtitles separately The element sets the row height, covering the row height of the parent element*/ vertical-align: middle; /*Baseline center alignment*/} </style> <div class="span_box bg_box"> <span class=" words_span"> Method 1: The parent element uses display:table and the child element uses the display:table-cell attribute to simulate a table. The child element can be vertically centered by setting vertical-align:middle</span> </div> < div class="p_box bg_box"> <p class="words_p"> Method 2: Set the display:inline-block attribute on the child element to convert it into an inline block element and simulate a single line of text. The parent element sets the corresponding height and line-height. Set the vertical-align:middle attribute on child elements to align their baselines. Add the line-height attribute to override the line height inherited from the parent element. Disadvantage: The height of the text cannot exceed the height of the outer box. </p> </div> </body>

css common style dictionary

css3-moz -, -ms, -webkit, -o represent respectively, and WeChat browser kernel analysis

Why add an identification code:

WeChat browser kernel:

Calc() usage in css3

transparent

css implements single-line and multi-line text overflow to display ellipsis (...)

Pseudo element

Mobile end filling Fill the screen

Slide up the mobile H5 page on the browser and the address search bar will disappear.

css There are empty gaps

Horizontal sliding effect when on mobile devices.

Sprite Use positioning for multiple images of images

Horizontal and vertical divs with variable width and height

发表回复

评论列表（196条）

css common style dictionary

css3-moz -, -ms, -webkit, -o represent respectively, and WeChat browser kernel analysis

Why add an identification code:

WeChat browser kernel:

Calc() usage in css3

transparent

css implements single-line and multi-line text overflow to display ellipsis (...)

Pseudo element

Mobile end filling Fill the screen

Slide up the mobile H5 page on the browser and the address search bar will disappear.

css There are empty gaps

Horizontal sliding effect when on mobile devices.

Sprite Use positioning for multiple images of images

Horizontal and vertical divs with variable width and height

Related Suggestion

New version: PPT scientific research drawing complete guide and material collection

The most complete PPT scientific research drawing tutorial and materials in history (second edition)

[Practical tutorial] PPT scientific research drawing tutorial (001) - schematic diagram of photocatalytic mechanism

"Scientific Research PPT Production Skills (001): Drawing a Photocatalytic Mechanism Diagram"

"Guidelines for Making Scientific Research PPT Illustrations"

发表回复

评论列表（196条）