CSS world reading notes: (Ch4 - Part I)

CSS world reading notes:

For the language CSS, the difference between learning 80 points in 3 years and 90 points in 10 years is actually limited.
When you remove the veil in front of you and take a closer look, you will find that what is missing is not the front-end, but excellent, qualified and technologically in-depth front-end developers.
In the world of CSS, any seemingly simple rendering on a page is the result of the joint action of many CSS attributes.

Ch4 box size four families

4.1 in depth understanding of content

4.1.1 content and replacement elements

1. What is a replacement element

Replace element, as the name suggests, the content can be replaced. This element that can be replaced by modifying the content presented by an attribute value is called "replacement element".
(1) The appearance of the content is not affected by the CSS on the page. In professional terms, styles are expressed outside the scope of CSS.
(2) It has its own size.
(3) It has its own set of performance rules on many CSS properties.

2. Replace the default display value of the element
element Chrome Firefox IE
<img> inline inline inline
<iframe> inline inline inline
<video> inline inline inline
<select> inline-block inline-block inline-block
<input> inline-block inline inline-block
range/file <input> inline-block inline-block inline-block
hidden <input> none none none
<button> inline-block inline-block inline-block
<textarea> inline-block inline inline-block
3. Size calculation rules of replacement elements

(1) Inherent size refers to the original size of the replacement content.
(2) The concept of HTML size is slightly abstract. "HTML size" can only be changed through HTML native attributes, including < img > width and height attributes, < input > size attributes, < textarea > cols and rows attributes, etc.
(3) CSS size refers to the size that can be set through CSS width and height or max width / min width and Max height / min height, corresponding to the content box in the box size.
If there is no CSS size and HTML size, the inherent size is used as the final width and height.
If there is no CSS size, the HTML size is used as the final width and height.
If there is a CSS size, the final size is determined by the CSS properties.
If the intrinsic size has an inherent aspect ratio and only width or height is set, the element is still displayed according to the inherent aspect ratio.
If the above conditions are not met, the final width is 300 pixels, the height is 150 pixels, and the aspect ratio is 2:1.
Inline replacement elements and block level replacement elements use the same set of size calculation rules as above.
The inherent size of the replacement element in the CSS world has a very important feature, that is, "we can't change the inherent size of the content of this replacement element".

div:before {
    content: url(1.jpg);
    display: block;
    width: 200px; height: 200px;

The default adaptation method for replacing the content in the picture is fill, that is, I fill and follow the size of the external setting. The essence of size change is not to change the inherent size, but to use padding as a way to adapt HTML size and CSS size.

4. How far is the distance between the replacement element and the non replacement element

Only one attribute is replaced between src element and non src element!
Because we always use src attribute when we use pictures, we will inevitably think that < img > is equivalent to pictures. In fact, it is not at all. If we remove the src attribute, < img > is actually an ordinary inline tag similar to < span >, that is, it becomes a non replacement element.

<img alt="Beauty meditation map" data-src="1.jpg">
<p><button>set up src Property display picture</button></p>
img {
    display: inline-block;
    width: 256px; height: 192px;
    /* Hide Firefox alt text */
    color: transparent;
    position: relative;
    overflow: hidden;
img:not([src]) {
    /* Hide Chrome alt text and silver border */
    visibility: hidden;
img::before {
    /* Light blue space occupying background */
    content: "";
    position: absolute; left: 0;
    width: 100%; height: 100%;
    background-color: #f0f3f9;
    visibility: visible;
img::after {
    /* Black alt message bar */
    content: attr(alt);
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    line-height: 30px;
    background-color: rgba(0,0,0,.5);
    color: white;
    font-size: 14px;
    transform: translateY(100%);
    /* Some transition animation effects */
    transition: transform .2s;
    visibility: visible;
img:hover::after {
    transform: translateY(0);
var eleButton = document.querySelector('button'),
    eleImg = document.querySelector('img');

if (eleButton && eleImg) {
    var initValueButton = eleButton.innerHTML;
    // Picture address
    var srcImage = eleImg.getAttribute('data-src');
    // Remove this attribute
    // Button click event
    eleButton.addEventListener('click', function() {
        if (this.innerHTML == initValueButton) {
            this.innerHTML = 'remove src attribute';
            // pictures displaying
            eleImg.setAttribute('src', srcImage);
        } else {
            this.innerHTML = initValueButton;
            // src attribute removal

At this time, the image src does not exist. Therefore,:: before and:: after can take effect, and we can present the alt attribute value through the content attribute. When we click the button to add an src address to the picture, the picture changes from a common element to a replacement element. The:: before and:: after that are still supported are all invalid at this time. If we use the hover picture at this time, no information will appear.

Viewpoint 2: there is only one CSS content attribute between the replacement element and the non replacement element!
The reason why a replacement element is a replacement element is that its content can be replaced. This content is the content box in the four boxes of margin, border, padding and content, and the corresponding CSS attribute is content. Therefore, theoretically, the content attribute determines whether it is a replacement element or a non replacement element.
If the picture originally has src address, we can also use the content attribute to replace the picture content. Therefore, we can easily realize the effect of turning hover picture into another picture. In the past, we can only use the background image or two < img > elements to control the explicit and implicit.

<img class="emoji" src="laugh.png">
.emoji:hover {
    content: url(laugh-tear.png);

Then, it is also necessary to explain that the content attribute changes only the visual presentation. When we save this image by right clicking or other forms, the image corresponding to the original src is still saved.

Moreover, using the content attribute, we can also turn ordinary tag elements into replacement elements.

<h1><CSS World</h1>
h1 {
    content: url(logo.png);

< H1 > of traditional CSS code is a common element, so you need to set the size to hide the text; However, using the content attribute, < H1 > becomes a replacement element every minute, and the text is automatically replaced. At the same time, the size rule is the size rule of the replacement element, which perfectly adapts to the size of the original image.
In addition, although the visual text has been replaced, the screen reading device still reads the text content, search engine SEO
What is captured is still the original text information, so it has no impact on the accessibility of the page.

5. Analysis of the relationship between content and replacement elements

(1) The text generated by using content cannot be selected or copied, as if the user select: none declaration was set.
(2) Cannot left or right: empty pseudo class Empty is a CSS selector that matches when there is no content in the element.

<h4>Have content</h4>
<div class="box">Have content</div>
<h4>No content</h4>
<div class="box"></div>
<h4>Spaces are also content</h4>
<div class="box"> </div>
<h4>Pseudo elements are not content</h4>
<div class="box pseudo"></div>
.box { 
    width: 216px; 
    padding: 10px; 
    border: 10px solid #cd0000; 
    margin: auto; 
.box:empty { 
    border-style: dashed; 

(3) content dynamically generated value cannot be obtained.

4.1.2 content generation technology

1. content auxiliary element generation

Clear float;

.clear:after {
	content: '';
	display: table; /* It can also be 'block' */
	clear: both;

Helps achieve "align both ends" and "align vertical center / top edge / bottom edge" effects.: The before pseudo element is used to assist in bottom alignment;: The after pseudo element is used to help align both ends.

<div id="box" class="box"><i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
.box {
    width: 256px;
    height: 256px;
    border-bottom: 1px dashed #ccc;
    text-align: justify;
.box:before {
    content: "";
    display: inline-block;
    height: 100%;
.box:after {
    content: "";
    display: inline-block;
    width: 100%;
.bar {
    display: inline-block;
    width: 20px; height: 0;
2. Content character content generation

Content character content generation is to write character content directly, both in Chinese and English. A common application is to realize the effect of icon font in combination with @ font face rules. In addition to conventional characters, we can also insert Unicode characters. The classic is to insert line breaks to achieve some layout or effects.

dot {
    display: inline-block; 
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
3. content image generation

content image generation refers to the direct display of images with url function symbols. CSS3 gradient background is not supported. Setting the width and height cannot change the inherent size of the picture.

4. Understand the generation of opening and closing symbols of content

The attribute values supported by content include a pair of uncommon open quote and close quote keywords. As the name suggests, they are "open quotation marks" and "closed quotation marks". In pure Chinese, they are "upper quotation marks" and "lower quotation marks".
In the CSS world, there is an attribute called quotes, which can specify what the open quote and close quote characters are.

5. content attr attribute value generation

The attribute value name in the attr function symbol must not be enclosed in quotation marks, otherwise the browser will consider it an invalid declaration.

6. Deeply understand the content counter

The so-called CSS counter effect refers to the effect of using CSS code to increase the number of elements as the number of elements increases.
(1) Property counter reset. As the name suggests, it means "counter reset". Its main function is to give a name to the counter. The default value is 0. The count reset of counter reset can be negative. In addition, counter reset can also be set to none and inherit. Cancel reset and inherit reset.
(2) Attribute counter increment. As the name suggests, it means "counter increment". The value is one or more keywords of counterreset, which can be followed by numbers to represent the change value of each count. If omitted, the default variation value of 1 is used.
The counter reset source is unique. For every counter increment, the count value of the counter reset source is increased once. No matter where the location is, as long as there is counter increment, the value of the corresponding counter will change.
The value of the counter changes according to the HTML rendering order. When an increment counter is encountered, the counter changes. When the counter outputs, the count value at this time will be output.
Counter reset can name two counter names at a time. Counter increment naturally has corresponding settings. In terms of writing, it can be distinguished by spaces.
As mentioned at the beginning of this section, the value of this change is not necessarily 1, which can be set flexibly. The value can also be none or inherit.
(3) Method counter()/counters(). This is a method, not a property.

counter(name, style);

The function of the style parameter is: our increment and decrement can not necessarily be numbers, but also English letters or Roman.
Counter also supports cascading. That is, a content attribute value can have multiple counter() methods.
counters(name, string);
Among them, the string parameter is a string (which needs to be surrounded by quotation marks, which is a required parameter) and represents the connection string of the sub sequence number.
The DOM element that displays the content count value must be behind the counter increment element in the document flow, otherwise there is no counting effect.

        <p>My name is Wang Xiaoer. The words are like my name. The numbers to appear below are:</p>
        <p class="counter counter1"></p>
        <p>My name is Wang Xiaoer. Unexpectedly, another number will appear:</p>
        <p class="counter counter2"></p>
        <p>My real name is Wang Xiaoer. Unexpectedly, I have become Wang Xiaoer now...</p>
        <p class="counter counter3"></p>
        <p>My name is Wang Xiaoer. I didn't expect that my brothers are deeply in love. The count is increasing!</p>
        <p class="counter counter4"></p>
        <p>My name is Wang Xiaoer. Unexpectedly, I became a Roman!</p>
        <p class="counter counter5"></p>
        <p>My name is Wang Xiaoer. I didn't expect that if I was careless, the doll would roll all over the camp:</p>
        <div class="reset">
            <div class="counter6">I'm wang Xiaoer
                <div class="reset">
                    <div class="counter6">I'm the eldest son of Wang Xiaoer</div>
                    <div class="counter6">I'm the second son of Wang Xiaoer
                        <div class="reset">
                            <div class="counter6">I'm the eldest grandson of Wang Xiaoer's second son</div>
                            <div class="counter6">I'm the second grandson of Wang Xiaoer's second son</div>
                            <div class="counter6">I'm the grandson of Wang Xiaoer's second son</div>
                    <div class="counter6">I'm wang Xiaoer's third son</div>
            <div class="counter6">I'm wang Xiaosan</div>
            <div class="counter6">I'm wang Xiaosi
                <div class="reset">
                    <div class="counter6">I'm the eldest son of Wang Xiaosi</div>
        .counter {
            counter-reset: wangxiaoer 2 wangxiaosan 3;
            font-size: 32px;
            font-family: Arial black;
            color: #cd0000;
        .counter1:before {
            content: counter(wangxiaoer);
        .counter2:before {
            content: counter(wangxiaoer);
        .counter2:after {
            content: counter(wangxiaosan);
        .counter3 {
            counter-increment: wangxiaoer;
        .counter3:before {
            content: counter(wangxiaoer);
            counter-increment: wangxiaoer;
        .counter4:after {
            content: counter(wangxiaoer);
            counter-increment: wangxiaoer;
        .counter5:after {
            display: block;
            content: counter(wangxiaoer, lower-roman);
            counter-increment: wangxiaoer;
        .reset {
            padding-left: 20px;
            counter-reset: wangxiaoer;
        .counter6:before {
            content: counters(wangxiaoer, '-') '. ';
            counter-increment: wangxiaoer;
Mixed content features generated by content

Various content generation grammars can be mixed together.

4.2 mild padding attribute

4.2.1 padding and element size

The default box sizing in CSS is content box, so using padding will increase the size of the element.
Inline element padding has dual effects on visual layer and layout layer.
First, we can gracefully increase the click area size of links or buttons without affecting the current layout.
Using the padding of inline elements to realize highly controllable separation lines.

a + a:before {
    content: "";
    font-size: 0;
    padding: 10px 3px 1px;
    margin-left: 6px;
    border-left: 1px solid gray;

4.2.2 percentage value of padding

The padding percentage value is calculated relative to the width in both horizontal and vertical directions!

.box { 
    padding: 10% 50%;
    position: relative;
.box > img {
    position: absolute;
    width: 100%; height: 100%;
    left: 0; top: 0;

For inline elements, their padding is broken, that is, the padding area follows the line box in the inline box model.
The vertical padding of inline elements will make the "ghost blank node" appear, that is, the "strut s" in the specification appear. Since the default height of inline elements is completely controlled by font size, we only need: font size: 0; At this time, the height of "ghost blank node" becomes 0, the height and width will be the same, and the square like the block element will appear.

4.2.3 built in padding of label element

(1) Padding left is built in the ol/ul list, but the unit is px, not em.
(2) Many form elements have built-in padding. The implementation tips with good semantics and behavior retention, and good UI effect and compatibility effect are to use < label > elements.

4.2.4 padding and drawing

With the padding attribute and background clip attribute, you can achieve some CSS graphics rendering effects under limited labels.
Do not use pseudo elements, only one layer of labels to achieve the "three bars" classification icon effect of the team leader.

.icon-menu {
    display: inline-block;
    width: 140px; height: 10px;
    padding: 35px 0;
    border-top: 10px solid;
    border-bottom: 10px solid;
    background-color: currentColor;
    background-clip: content-box;

No pseudo elements are used, and only one layer of label is used to realize the double-layer dot effect.

.icon-dot {
	display: inline-block;
	width: 100px; height: 100px;
	padding: 10px;
	border: 10px solid;
	border-radius: 50%;
	background-color: currentColor;
	background-clip: content-box;

Tags: css

Posted by chyan on Sat, 14 May 2022 15:44:08 +0300