Introduction to four properties in CSS box model (with code)

This article brings the content is about CSS in the box model of the four properties of the introduction (with code), there is a certain reference value, the need for friends can refer to, I hope you have some help.

Substitution elements and non-replacement elements

Depending on whether the "external box" is inline or block-level, we can divide the elements into inline and block-level elements, depending
With replaceable content, we can also divide elements into replacement elements and non-replacement elements

1.1 Replacing element definitions

Elements that can be replaced by modifying the content rendered by a property value are called "replacement elements", and common replacement elements are:, <object>, <video>, <iframe>, or TABLE element < Textarea> and <input>

1.2 Features of the replacement element

1. The appearance of the content is not affected by the CSS on the page, such as the inner spacing of the single check box, background color and other styles

2, have their own size, such as <video>, has its own size

3, in a lot of CSS properties have their own set of performance rules; in vertical-align, the replacement element defaults to baseline (the lower edge of the letter X), and the baseline of the replacement element is abruptly defined as the bottom edge of the element.

1.3 Dimension calculation rules for replacement elements

The size of the replacement element is divided into 3 categories: intrinsic size, HTML size, and CSS size

1. The intrinsic dimension refers to the original size of the replacement content; For example, images, videos, and input as a standalone file exist with their own width and height;

2. HTML dimensions , HTML dimensions can only be changed by native attributes, which include attributes, attributes, HTML HTML width height <input> size <textarea> cols and rows attributes

3. CSS Dimensions can be specified by the size of the CSS width and/ height or max-width/min-width max-height/min-height set, corresponding to the box sizecontent box

Dimension calculation priority: CSS size > HTML size > Intrinsic size

Second, content properties

Note that content properties can be used not only in: Before/::after, but also in elements, but with some compatibility.

In Chrome, all elements support the content property, while other browsers are only supported in:: Before/::after pseudo-elements

Case 1: Image content generation technology based on pseudo-elements

Html:

<p><button> set src properties Show Pictures </button></p>

var Elebutton = document.queryselector (' button '),    eleimg = Document.queryselector (' img '); if (Elebutton && eleimg) {    var initvaluebutton = elebutton.innerhtml;    Image Address    var srcimage = eleimg.getattribute (' data-src ');    Remove the attribute    eleimg.removeattribute (' data-src ');    button click event    elebutton.addeventlistener (' click ', Function () {        if (this.innerhtml = = Initvaluebutton) {            this.innerhtml = ' Remove src attribute ';            The picture shows            eleimg.setattribute (' src ', srcimage);        } else {            this.innerhtml = Initvaluebutton;            SRC attribute removed            eleimg.removeattribute (' src ');}        }    );

Css:

img {    display:inline-block;    width:256px; height:192px;    /* Hide Firefox alt text */    color:transparent;    position:relative;    Overflow:hidden;} Img:not ([src]) {/    * hides 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 Information 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%);    /* to point the transition animation effect */    transition:transform. 2s;    visibility:visible;} Img:hover::after {    transform:translatey (0);}

principle : The picture does not have SRC, ::before and ::after can take effect; When you add an address to a picture src , the image changes from the normal element to the replacement element, which is also supported ::before and is ::after not valid at this time.

Case 2:content Introduction Picture

img {content:url (1.jpg);}

Case 3:hover Implementation Picture substitution

img:hover {content:url (laugh-tear.png);}

Case 4: Elegant implementation of H1 SEO

Case 5: Loading in animation

Loading in <dot>...</dot>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);}}
Case 6: Counter (Learn)

<div class= "reset" > <div class= "Counter" > I am Wangxiao <div class= "                Reset "> <div class=" Counter "> I am Wangxiao's older son </div> <div class=" Counter "> I am the second son of Wangxiao                    <div class= "reset" > <div class= "Counter" > I am the big grandson of Wangxiao's second son </div> <div class= "Counter" > I was Wangxiao's second son's two grandson </div> <div class= "Counter" > I was Wangxiao's second son's little grandson <        ;/div> </div> </div> <div class= "Counter" > I'm the third son of Wangxiao </div>        </div> </div> <div class= "Counter" > I'm Wangxiao </div> <div class= "Counter" > I'm Wangxiaoxi <div class= "reset" > <div class= "Counter" > I am Wangxiaoxi's older son </div> </div> </div ></div> 
Css:.reset {   padding-left:20px;   Counter-reset:wangxiaoer;}. Counter:before {   content:counters (wangxiaoer, '-') '. ';   Counter-increment:wangxiaoer;}
Third, padding properties


 

 
  
 
   
padding influence on both horizontal and vertical direction of inline elements
 
   
Padding percent width is calculated based on the width of the parent element
 
  

 
Many front-end colleagues have this mistaken understanding that the padding of inline elements only affects the horizontal direction and does not affect the vertical direction. This perception is inaccurate, and the padding of inline elements in the vertical direction also affects the layout and affects visual performance. Just because inline elements have no visible width and visual height (clientheight and clientwidth are always 0), the vertical behavior is completely affected by line-height and Vertical-align, Visually it does not change the spacing of the next line of content on the previous line, so giving us a sense of vertical padding does not work.

Case 1: Increase the hit area

A {padding:. 25em 0;}
Case 2: Separators of any height

<a href= "" > Login </a><a href= "" > Register </a>a + a:before {    content: "";    font-size:0;    padding:10px 3px 1px;    margin-left:6px;    border-left:1px solid Gray;}
Case 3: Equal proportional box

Used to implement adaptive layouts, such as page banner, scale-size pictures

/* Rectangle */div {padding:50%;} /* Square */div {padding:25% 50%;}
Case 4: Drawing drawing

/* Menu */.icon-menu {    display:inline-block;    width:140px; height:10px;    padding:35px 0;    /* Default Border-color:currentcolor; * *    border-top:10px solid;    border-bottom:10px solid;    /* Core */    Background-color:currentcolor;    Background-clip:content-box;}
Four, margin properties

Margin Features:


 

 
  
 
   
Unlike padding, margin can be negative;
 
   
As with padding, the percentage of margin is also relative to the width of its parent element
 
  

 
4.1 Margin Negative application

(1) Increase the size of the box

Margin can change the visual size of an element only when the element is the "make full use of free space" state

/* Cannot change size */.father {    width:300px;    Margin:0 -20px;} /* Son size change */<div class= "Father" >    <div class= "Son" ></div></div>.father {width:300px;}. son {margin:0 -20px;}
(2) Classic non-compatible two-column layout

. column-box {    Overflow:hidden;}. column-left,.column-right {    margin-bottom: -9999px;    padding-bottom:9999px;}
Layout principle:

By default, the vertical block-level element is up and down by 0, and once margin-bottom:-9999px means that the spatial distance of all subsequent elements and elements above becomes -9999px, that is, the subsequent elements move upward by 9999px. At this point, by God to a sum of padding-bottom:9999px to increase the height of the element, this offset, no impact on the layout layer, but it brings the things we need-the visual layer more than 9999px height of the available background color.

4.2 Margin merger

The top margin (margin-top) and the bottom margin (margin-bottom) of a block-level element are sometimes combined into a single margin, which is known as a "margin merge."
Two conditions: block-level elements and only in the vertical direction

3 Scenarios of margin merging

(1) Adjacent sibling elements margin merge. This is the most common and basic in the margin merger.

<p> first line </p><p> second row </p>p {margin:1em 0;}
(2) Parent and first/last child elements

<div class= "Father" >    <div class= "son" style= "margin-top:80px;" ></div></div><div class= "Father" style= "margin-top:80px;" >    <div class= "Son" ></div></div><!--This only happens when the top margin 80px,margin has merged--><div class= " Father "Style=" margin-top:80px; " >    <div class= "son" style= "margin-top:80px;" ></div></div>
(3) Margin consolidation of empty block-level elements

. Father {Overflow:hidden;}. son {margin:1em 0;} <div class= "Father" >    <div class= "Son" ></div></div>
At this point. Father the parent <p> element height is only 1em, because. Son the Margin-top and margin-bottom of the empty <p> element are merged together.

How do I prevent margin from merging?

For Margin-top merges, you can do the following (one condition is sufficient):


 

 
  
 
   
The parent element is set to the block formatting context element;
 
   
The parent element sets the Border-top value;
 
   
The parent element sets the Padding-top value;
 
   
The parent element and the first child element are separated by an inline element.
 
  

 
For Margin-bottom merges, you can do the following (one condition is sufficient):


 

 
  
 
   
The parent element is set to the block formatting context element;
 
   
The parent element sets the Border-bottom value;
 
   
The parent element sets the Padding-bottom value;
 
   
Adds an inline element between the parent element and the last child element for separation;
 
   
The parent element sets the height, min-height, or max-height.
 
  

 
calculation rules for margin consolidation :

"Positive take large value" "positive and negative value added" "Negative negative most negative"

4.3 Margin:auto in depth

The fill rule for Margin:auto is as follows
(1) If the side is fixed, the side auto, then Auto is the remaining space size.
(2) If both sides are auto, divide the remaining space evenly.

One side auto Application

<div class= "Father" >    <div class= "Son" ></div></div>.father {    width:300px;}. son {    width:200px;    margin-right:80px;    Margin-left:auto;}
Auto on both sides, horizontally vertically centered

. Father {    width:300px; height:150px;    Background-color: #f0f3f9;    Position:relative;}. son {    position:absolute;    top:0; right:0; bottom:0; left:0;    width:200px; height:100px;    Background-color: #cd0000;    Margin:auto;}
Attention:

Display calculates that the vertical margin of the non-replacement element of inline is invalid. For inline replacement elements, the vertical margin is valid, and there is no problem with the margin merge, so the picture never occurs with a margin merge.

V. Border Properties

Several features:


 

 
  
 
   
Border attribute value does not support percent
 
   
Border-style Default value is None
 
   
Border-color Default value is CurrentColor
 
  

 
App 1: Picture upload hover discoloration

. add {    color: #ccc;    border:2px dashed;}. Add:before {    border-top:10px solid;}. Add:after {    border-left:10px solid;} /* Hover color */.add:hover {    color: #06C;}
App 2: Elegant add-on area

/* box-sizing non-border-box when */.icon-clear {    width:16px;    height:16px;    border:11px solid Transparent;}
Application 3: Triangle drawing

div {    width:0;    border:10px solid;    Border-color: #f30 transparent transparent;}
The border can form triangles and trapezoidal principles as follows:


By changing the dimensions of the width/height and border-width in different directions, you can change the angle orientation and size of the triangles.

Apply 4:border and other high-level layouts

. box {    border-left:150px solid #333;    Background-color: #f0f3f9;}. Box > Nav {    width:150px;    Margin-left: -150px;    Float:left;}. Box > section {    overflow:hidden;}
Limitations of border such as high layout:


 

 
  
 
   
Because border does not support percent widths, it is suitable for at least one column to be a fixed width layout
 
   
The columns of the high-level layout are limited. Basically, border and other high-level layout can only meet the situation of a few or more columns, unless it is just proportional, it can also use border-style:double to achieve up to 7 column layout