CSS Box model

The box model consists of contents (content), padding (padding), Border (border), boundary (margin), and the main attributes in a box are 5: width, height, padding, border, margin.

Here's a description of the area in the box

Width

width, which is the width of the content in the CSS, rather than the width of the box, the height of the CSS refers to the level of the content, not the height of the box.

width:200px;height:200px;padding:50px;margin:50px;border:5px solid Red;background-color:green;

The above code, set the width of 200px, then the width of the content is 200px, but when we move the mouse over the box, the width of the display is 310px, this width is the width of the box, the true occupied width = left Border + Left padding + width + right pad Ding + right Border, if you want to keep a box of the true occupancy width is constant, then add width will be reduced padding. Adding padding will reduce the width.

For example, write three 402*402 box, the answer will be infinite, only according to the above formula calculation combination can

. box1{width:400px;height:400px;border:1px solid Red;}. BOX2{WIDTH:200PX;HEIGHT:200PX;BORDER:6PX solid red;padding:95px;}. box3{width:0px;height:0px;padding:200px;border:1px solid Red;}
<div class= "Box1" > 1th box </div><div class= "Box2" > 2nd box </div><div class= "Box3" > 3rd Box </div>

Padding

Padding is the inner margin. Padding area has background color, css2.1 premise, and background color must be the same as the content area. That is, Background-color will populate all areas within the boder.

The padding is in 4 directions, so we can describe padding in 4 directions respectively. There are two kinds of methods, the first write small property, the second write comprehensive property, separated by a space.

Small properties: This is suitable for only one Direction need to set the value of the time to adopt, or the direction of writing is very troublesome.

padding-top:30px;padding-right:20px;padding-bottom:40px;padding-left:100px;

Composite properties: Top, right, bottom, left

/* If you write four (indicating the direction is up, right, bottom, left) */padding:30px 20px 40px 100px;/*, right, bottom, left (and right) */padding:20px 30px 40px;
/* If two are written (indicating the direction is up, right, bottom (same as above), left (and right)) */padding:30px 20px;/* if written one (indicating direction for all directions) */padding:30px;

The general usage is: cascade large attributes with small attributes

padding:20px; /* All directions are set to 20*/
padding-left:30px;/* left individually set to 30*/

　　

You cannot write a small attribute in front of a large property.

padding-left:30px;padding:20px; /* It doesn't make sense to write the top line * *

Do you really master the following test? Say the box below, true possession, width, height.

div{width:200px;height:200px;padding:10px 20px 30px; padding-right:40px;        border:1px solid #000;   }

True occupancy width = 200 (content width) + 20 (left padding) + 40 (right padding) + 1 (left border) + 1 (right border) = 262px

The inner margin affects the size of the box, but the inherited width, padding, does not squeeze open .

some elements, default with padding , such as ul label, so that we are easy to control in order to do the station, always like to clear this default padding:

*{margin:0;padding:0;}

* The efficiency is not high, so we use the set selector, listing all the labels

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0;padding:0}

Border

Border is the border. The border has three elements: thickness, linetype, color. If the color is not written, the default is black. The other two properties are not written and do not show up borders. Border in the major browser rendering will be slightly different, specifically to see this article specifically introduced

border:1px solid red;

Border is a large comprehensive property, the above code is 4 borders, are set to 1px width, line solid line, red color.

The border attribute can be disassembled in two different ways:

1) Press 3 elements:

Border-width, Border-style, Border-color

border-width:10px;       → Border width border-style:solid;      → Linear border-color:red;        → Color

If a small feature is followed by a space-separated number of values, it is the upper-right-left order:

border-width:10px 20px;border-style:solid dashed dotted;border-color:red green blue yellow;

2) by direction:

Border-top, Border-right, Border-bottom, Border-left

border-top:10px Solid red;border-right:10px Solid red;border-bottom:10px solid red;border-left:10px solid red;

In the direction can also be another layer, that is, each direction, each element apart, a total of three statements:

border-top-width:10px;border-top-style:solid;border-top-color:red;
border-right-width:10px;border-right-style:solid;border-right-color:red;
border-bottom-width:10px;border-bottom-style:solid;border-bottom-color:red;
border-left-width:10px;border-left-style:solid;border-left-color:red;

Bordercan not

border:none;/* an edge does not have */border-left:none;/* or */border-left-width:0;

CSS Box model