CSS layout (1) Box Model and css layout Box Model

CSS layout (1) Box Model and css layout Box Model

I. Box Model

Standard Box Model

We can see that the standard w3c box model has the following scopes: content, padding, border, and margin, and the content Part does not contain other parts.

 

 

Weird Box Model

We can see that the ie box model also has the range of margin, border, padding, and content. Unlike the standard w3c box model, the content part of the ie box model contains border and pading.

 

　　

For example, if a box contains 20 PX margin, 1 px border, 10px padding, Px content, and 50px content,

If the standard w3c box model is used for explanation, the location of the box must be: width: 20*2 + 1*2 + 10*2 + 200 = 262px, height: 20*2 + 1*2*10*2 + 50 = pixel PX; actual size of the box is: width: 1X2 + 10x2 + 200 = 222px; Height: 1X2 + 10x2 + 50 = 72px;

If the ie box model is used, the location occupied by the box is: 20x2 + 200 = 240px, 20X2 + 50 = 70px, and the actual size of the box is: px in width and 50 Px in height.

Which box model should be selected? Of course it's the standard w3c box model. How can we choose the "Standard w3c Box Model? Very simple,Add the doctype declaration to the top of the webpage.If the doctype statement is not added, Each browser will understand the webpage based on its own behavior, that is, ie will use the ie box model to explain your box, ff will use the standard w3c box model to explain your box, so the web page will be displayed differently in different browsers. Otherwise, if the doctype statement is added, all browsers will use the standard w3c box model to explain your box, and the web page will be consistent in each browser.

<! Doctype html> 
　　
Ii. Tag types that make up the box model
In CSS, tag elements in html are divided into three different types:Block-level elements, row-level elements, and intra-row block elements.
Common block-level elements include:
<Div>, <p>, 
Features: 1. A block-level element occupies only one row;
2. You can set the height, width, row height, and top and bottom margins of an element;
3. If the element width is not set, it is 100% of its parent container (consistent with the width of the parent element) unless a width is set.
 
CommonRow-levelElements:
<A> and <span> set display: inline Conversion
Features: 1. and other elements are on one row;
2. height, width, andThe top and bottom margins are unavailable.Settings;
3,The width of an element is the width of the text or image it contains and cannot be changed.
　4,Spacing Between inline Elements: When there are "Carriage Return", "tab", and "space" between elements in the row, the gap will appear. Solution: Write a line without spaces or other symbols.
 
CommonIntra-rowThe block elements include:
 and <input> set display: inline-block conversion.
Features: 1. The block element and other elements are on one line. (The block element is on another line)
2. You can set the height, width, row height, and top and bottom margins of an element.
 
3. Box Model attributes
Width/height
In CSS, you can set an explicit height for any block-level element.
If the specified height is greater than the height required for the displayed content, the extra height will produce a visual effect, as if there were additional padding;
If the specified height is less than the desired height of the displayed content, it depends on the overflow attribute. You need to set the scroll bar to overflow: auto.
Auto
Auto can be set for width and height and margin. For block-level elements, if the width is set to auto, the width is as wide as possible. In details, the element width = contains the block width-element horizontal margin width-element horizontal padding;
If the height is set to auto, it will be as narrow as possible. In details, the element Height = exactly enough to contain the height of its inline content
[Note] If the height of the block is not explicitly declared, the percentage height of the element is reset to auto
 
【Maximum, minimum, width, and height]

Min-width | min-height
Initial Value: 0
Applied to: block-level elements and replacement Elements
Percentage: the width (height) relative to the contained block)
Max-width | max-heightt
Initial Value: none
Applied to: block-level elements and replacement Elements
Percentage: the width (height) relative to the contained block)
[Note] When the minimum width (height) is greater than the maximum width (height), the value of the minimum width and height prevails.
 
Padding
Compared with other attributes of the box model (for example, the margin with negative values is often used in positioning), padding seems to be quite regular and has no compatibility or special problems.
For an element in a row, the left padding applies to the beginning of the element, and the right padding applies to the end of the element. The vertical padding does not affect the row height, but affects its size, the background color is displayed.
[Note] the padding cannot be a negative value.
Padding
Initial Value: Undefined
Percentage: relative to the width of the contained block
[50%]
Block-level elements can achieve square effects through padding: 50%, because the percentage value of horizontal and vertical padding is determined by the width of the contained block, which is often used to move the end image
 
Border
The outer margin of an element is the border of the element. The border consists of three parts: width, style, and color, and the sequence is irrelevant.
Basic Style
 border: border-width border-color border-style border: 1px red solid;
Border Style
Border border if a border has no style, the border will not exist at all
Zookeeper is about dashed. In chrome/firefox, the width-to-height ratio of the dotted line is 3/1, while in IE, the width-to-height ratio of the dotted line is 2/1. Therefore, the dotted line in IE is relatively dense.
  Dotted: In chrome, vertices are vertices, while in IE/firefox, vertices are dots.
Border-style: none (default) border-style: hidden/dotted/dashed/solid/double/groove/ridge/inset/outset (9 in total)
Single border
  border-top/border-right/border-bottom/border-left