CSS Box model

1, Element classification before explaining the CSS layout, we need to know some knowledge beforehand, in CSS, the tag elements in HTML are broadly divided into three different types: block elements, inline elements (also called inline elements), and inline block elements. The commonly used block elements are:,

、...、

、
、

、

、 The commonly used inline elements are:, 、
、 、、、、、、、The commonly used inline block elements are:,2, Element Classification--block-level element setting Display:block is to display elements as block-level elements. The following code is the conversion of inline element A into a block element, so that the a element has a block element feature. A{display:block;} Block-level element features: (1) Each block-level element starts from the new row, and the subsequent element also begins a row. (True-handed, one block-level element exclusive row) (2) The height, width, row height, and top and bottom margins of the element can be set. (3) If the element width is not set, it is 100% of its own parent container (and the width of the parent element is the same) unless a width is set. 3, Element classification--inline elements set elements to inline elements through code display:inline. The code below is to convert the block element div into an inline element, so that the DIV element has an inline element feature. div{Display:inline;} ...... I'm going to be an inline element. Element Features: (1) and other elements are on one line, (2) The height, width and top and bottom margins of the element are not set; (3) The width of the element is the width of the text or Picture it contains and cannot be changed. 94) Element Classification--inline block element code Display:inline-block the element is set to inline block elements. (css2.1 new),,Tags are such inline block tags. Inline-block element Features: (1) and other elements are on one line, (2) The height, width, row height, and top and bottom margin of the element can be set. 5, Box Model---Border box model border is the line around the content and filters, this line you can set its thickness, style and color (border three properties). The following code is div to set the border thickness to 2px, the style is solid, the color is red border: div{border:2px solid red;} Above is the abbreviation form of border code, can be written separately: div{border-width:2px; border-style:solid; border-color:red;} Note: (1) Border-style (border style) common styles are: dashed (dashed line) | Dotted (point line) | Solid (solid line). (2) The color in Border-color (border color) can be set to hexadecimal color, such as: Border-color: #888;//Don't forget the well in front. (3) Width in border-width (border width) can also be set to: Thin | Medium | Thick (but not very common), most often with pixels (px). Now there is a question, what if you want to set the bottom border separately for the P tag, while the other three sides don't set the border style? CSS styles allow styles to be set only for one direction of the border: div{border-bottom:1px solid red;} You can also use the following code to implement other three-side (top, right, left) border settings: border-top:1px solid red;border-right:1px solid red; border-left:1px Solid red;6, Box model-width and Height http://img.mukewang.com/539fbb3a0001304305570259.jpg (link address) 7, Box model--the content of the fill element can be set distance from the border, called "Fill". Fills can also be divided into top, right, bottom, and left (clockwise). The following code: div{padding:20px 10px 15px 30px;} The order must not be confused. The above code can be written separately: div{padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px;} If the upper, right, bottom and left fills are 10px; so write div{padding:10px;If the upper and lower fills are the same as 10px, about the same as 20px, you can write: div{padding:10px 20px;} 8, Box model--the distance between the margin element and other elements can be set using the boundary (margin). The boundary can also be divided into upper, right, lower and left. The following code: div{margin:20px 10px 15px 30px;} can also be written separately: div{margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px;} If the upper right bottom left edge is 10px; You can write this: div{margin:10px;} If the upper and lower bounds of the same 10px, around the same as 20px, you can write: div{margin:10px 20px;} Summary: The difference between padding and margin, padding in the border, margin outside the border.

CSS Box model

、、