This is the third day of my participation in Gwen Challenge

Summary box HTML5 CSS3 basic size

Learn CSS series again, detail the box size

1. About the content

1.1 Content and replacement elements

  1. Replacement elements, which are elements whose content can be replaced, such as IMG, video, iframe, and form elements, have several features

    • Content rendered by modifying an attribute value can be replaced
    • The appearance of content is not affected by CSS on the page
    • It has its own size
    • Some CSS properties have their own set of presentation rules. The most common is the vertical-align property, which behaves differently for non-replacement elements than for replacement elements. For example, the default value of vertical-align is baseline, which is generally expressed as the lower edge of character X. But not when it comes to the substitution element, which is the lower edge of the substitution element
    • In the replacement element, the pseudo-class will be invalidated if there is an attribute for the replacement content

  2. Replace the size calculation rules for elements

    • If there is no HTML size or CSS size, the inherent size takes effect
    • If there is an HTML size but not a CSS size, the HTML size takes effect
    • If CSS dimensions are available, they are determined by the CSS

Development skills, about the picture loading placeholder is generally the first screen of the following picture loading is the way of scrolling loading asynchronous loading. This image is also a redundant resource. How do you optimize it? The code is as follows:

img{
	display:inline-block;
	visibility:hidden;
}
img[src]{
	visibility:visible;
}
Copy the code

To be clear, the image img tag to be loaded does not have a SRC attribute

Image placeholder hint complete version of the code (for reference only):

img {
    display: inline-block;
    width: 256px; height: 192px;
    /* Hide the 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 placeholder 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%);
    /* Transition animation */
    transition: transform .2s;
    visibility: visible;
}
img:hover::after {
    transform: translateY(0);
}
Copy the code

1.2 Content Generation

Just to be clear, content generates objects called “anonymous replacement elements,” or replacement elements

The content attribute is basically used in ::after,::before projects

  1. Content assists in element generation
  2. Content character content generation, I have to say hereattrThe use of,attrAn expression to dynamically retrieve content from a page element, such as the image aboveattrexpression
  3. Content image generation, generally used in the projectcontent:''; background-image:url(xxx)Because of direct usecontent:url(xxx)It is difficult to control the size of their images

1.3 Content Counter

  1. counter-reset, which tells the counter from which to start counting. Default is 0 (multiple counters can be specified)
  2. counter-increment, counting increments rule (display values are automatically incremented by 1 from default values)
  3. Counter () and countersDisplay count is a CSS function

Sample code:

.reset { 
  	padding-left: 20px; 
  	counter-reset: test;
}
.counter::before { 
  	content: counters(test, '+') '. '; 
  	counter-increment: test 1;
}
Copy the code
<div class="reset">
	<! Reset reset count -->
    <div class="counter">

        <div class="reset">
        	<! Reset reset count -->
            <div class="counter"></div>
            <div class="counter">
                <div class="reset">
                	<! Reset reset count -->
                    <div class="counter"></div>
                    <div class="counter"></div>
                    <div class="counter"></div>
                </div>
            </div>
            <div class="counter"></div>

        </div>

    </div>

    <div class="counter"></div>

    <div class="counter">
        <div class="reset">
        	<! Reset reset count -->
            <div class="counter"></div>
        </div>
    </div>

</div>
Copy the code

2. About the padding

  1. Negative values are not supported
  2. Support 100 percent, 100 percent relative to the width of the calculation whether horizontal or vertical

2.1 Padding and graphics drawing

The idea is to combine the padding and background-clip properties to achieve some CSS graphics rendering effects with limited tags.

For example, to achieve a double 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;
}
Copy the code

3. On margin

3.1 Element Size

  • Element size, generally refers topaddingandborder“, that meansborder-boxThe size of the element DOM API gets is:offsetWidthandoffsetHeight, that is, “Element offset size”
  • Internal dimensions of elements, includingpaddingDo not includeborder, i.e.,padding-boxThe size of the element DOM API is:clientWidthandclientHeight“Visual dimensions of elements”
  • The external dimension of the element, i.emargin-boxThere is no CORRESPONDING DOM API to get the size of the element.

3.2 marginAnd internal dimensions

Margin has no effect on the internal size of an element when width is set or when “enveloping” is saved. When the element is fluid (making full use of space), margins have an impact on the internal dimensions

3.3 marginmerge

Margin-top and margin-bottom of block-level elements collapse and merge into one margin, i.e., margin merge

Features: 1. Block-level elements, 2. Only occurs in vertical direction

Scene:

  1. A neighboring sibling element
  2. Parent and first/last child element
  3. Empty block-level elements

The first two are easy to understand. What does point 3 mean? Look at the following code:

.p{
	overflow:hidden;
}
.c{
	margin: 10px 0;
}
Copy the code
<div class="p">
	<div class="c"></div>
</div>
Copy the code

At this point, the empty element “.cd “has its margin-top and margin-bottom folded and is only 10px in size

Merger rules: positive and negative take larger, plus and minus add up, negative and negative take smaller

3.4 on the margin: auto

This will not go into details, most are used to achieve horizontal center effect, here is a few about the implementation of margin center, layout code is as follows

<div class="p">
	<div class="c"></div>
</div>
Copy the code
  1. Horizontal center
.c{
	margin:0 auto;
}
Copy the code
  1. Vertical center
.p{
	height:500px
	writing-mode: vertical-lr;
}
.c{
	margin: auto
}
Copy the code
  1. Center vertically and horizontally
.c{ position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; }Copy the code

3.5 Several cases of invalid margin

  1. displayforinlineThe vertical margin is invalid
  2. In the tabletr.tdElement or settingdisplayfortable-cell.table-row.margininvalid
  3. Margin of absolute positioning element not positioning position is invalid

4. About the border

This part will talk about border drawing triangle code as follows:

div{
	width:0;
	border:10px solid;
	border-color: pink transparent transparent;
}
Copy the code