CSS basic highlights 1: Box Model, floating, clear floating

CSS basic highlights 1: Box Model, floating, clear floating

1. Box Model:

(Picture from w3school ):

Note: medium, from inside to outside is

Content)

Inner edge moment (padding-top, padding-right, padding-bottom, and padding-left)

Border (border-top, border-right, border-bottom, border-left)

Margin (marging-top, margin-right, margin-bottom, margin-left ).

The padding, border, and outer margin can be applied to all edges of an element or individual edges. In addition, the outer margin can be a negative value, and in many cases, the outer margin of a negative value must be used.

The inmost part of the element box is the actual content, and the content is directly surrounded by the padding. The padding shows the background of the element. The edge of the padding is the border. The outer border is the outer margin, and the outer margin is transparent by default, so it does not block any subsequent elements.

 

Tip:The background is applied to a region consisting of content, padding, and border.

The padding, border, and margin are optional. The default value is zero. However, many elements are configured with the outer and inner margins by the user proxy style sheet. You can overwrite these browser styles by setting the margin and padding values to zero. This can be done separately, or you can use the universal selector to set all elements:

 

* {  margin: 0;  padding: 0;}

 

In CSS, width and height indicate the width and height of the content area. Adding the padding, border, and margin does not affect the size of the content area, but increases the total size of the element box.

Assume that each side of the box has a margin of 10 pixels and a margin of 5 pixels. If you want the element frame to reach 100 pixels, you need to set the content width to 70 pixels. See (picture from w3school ):

 

#box {  width: 70px;  margin: 10px;  padding: 5px;}

Reference: Click the open link.

Expansion: CSS padding, CSS border, and CSS margin

 

2. CSS genie Technology

Reference: Click the open link.

Case: email 126

Images used:

3. CSS float (from w3school)

A floating box can be moved to the left or right until its outer edge hits the border of the contained box or another floating box.
Because the floating box is not in the normal stream of the document, the block box in the normal stream of the document performs as if the floating box does not exist.

When frame 1 is moved to the right, it is moved out of the Document Stream and to the right until its right edge hits the right edge of the contained box:

Next, when box 1 is floating to the left, it is detached from the document stream and moved to the left until its left edge hits the left edge of the contained box. Because it is no longer in the document stream, it does not occupy space. In fact, it overwrites Box 2 so that box 2 disappears from the view.
If all three boxes are moved to the left, box 1 floats to the left until the contained box is reached, and the other two boxes move to the left until the first floating box is reached.

As shown in, if the box is too narrow to accommodate three floating elements in a horizontal arrangement, the other floating blocks move down until there is enough space. If the height of floating elements is different, they may be "stuck" by other floating elements when moving down ":

CSS float attributes
In CSS, the float attribute is used to float elements.
For more information about float attributes, visit the Reference Manual: CSS float attributes.

W3school extended reading: Click to open the link

4. Clear float with CSS

 

The background cannot be displayed.

 

As a result of floating, if the CSS background color or CSS background image is set for the parent level, and the parent level cannot be opened, the CSS background cannot be displayed.

The border cannot be opened. If the CSS border attribute (css border) is set for the parent level, the parent level cannot be opened because the float attribute is used in the child level, as a result, the border cannot be opened with the content.
3. The value of the margin padding setting cannot be correctly displayed. As a result, css padding and css margin attributes are set between parent and child levels, which cannot be correctly expressed. In particular, the padding and margin of the upper and lower sides cannot be correctly displayed.

 

Solution:

 

Clear: both clear generates floating parent div definition overflow: hidden
Add the overflow: Den den style to the parent CSS selector to clear the float generated by the parent class. The advantage is that few CSS code can solve floating generation.
. ClearFix clear floating (reference: Click to open the link)

. ClearFix: after {content:.;/* Indicates a period in English. You can also leave it empty. */Display: block;/* converts the element to a block-level element. */Clear: both;/* clear the float between the left and right sides. */Visibility: hidden;/* set the visible degree to hidden. Note that it is different from display: none. Visibility: hidden; it still occupies space, but cannot be seen. */line-height: 0;/* The Row height is 0; */height: 0;/* The height is 0; */font-size: 0;/* the font size is 0 ;*/}. clearFix {* zoom: 1 ;}

 

The above code is the definition and application of. clearFix. To put it simply, the principle of. clearFix is as follows:

 

In IE6, 7, zoom: 1 triggers hasLayout, so that the elements close the internal floating.
In a standard browser, the. clearFix: after pseudo class inserts a clear: both block-level element after the Element Applied to. clearFix to clear the floating.
When you need to clear the floating point, you only need to write a. clearFix, and then add the clearFix class name to the element to be floating.