Css box model and css Model

Css box model and css Model

The box model consists of content, padding, border, and margin. There are five main attributes in a box: width, height, padding, border, and margin.

The following describes the areas in the box.

Width

Width: in CSS, width refers to the content width, not the box width. In CSS, height refers to the content height, not the box height.

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

The code above sets the width to 200px, And the content width to 200px. But when we move the mouse over the box, the display width is 310px, and the width is the width of the box, actual Possession width = left border + Left padding + width + right padding + Right border. If you want to keep the actual possession width of a box unchanged, then adding width will reduce the padding. When padding is added, the width is reduced.

 

For example, if you write three 402*402 boxes, there will be an infinite number of answers. You only need to calculate the combination according to the above formula.

. 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"> 1st boxes </div> <div class = "box2"> 2nd boxes </div> <div class = "box3"> 3rd box </div>

Padding

Padding is the padding. The padding area has the background color. In css2.1, the background color must be the same as the content area. That is to say, background-color will fill all boder areas.

Padding is in four directions, so we can describe the padding in four directions respectively. There are two methods: the first is to write a small attribute, and the second is to write a comprehensive attribute, separated by spaces.

Small attribute: This method is applicable when values need to be set in only one direction. Otherwise, it will be difficult to write data in all directions.

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

Comprehensive attributes: The direction is top, right, bottom, left

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

The general usage is to cascade large attributes with small attributes.

Padding: 20px;/* set all directions to 20 */
Padding-left: 30px;/* set to 30 on the left */

　　

Small attributes cannot be written before large attributes.

Padding-left: 30px; padding: 20px;/* The above row is meaningless */

I will take the test below to check whether you have mastered it? Tell us that the following box actually occupies the width and height

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

Real possession width = 200 (content width) + 20 (left filling) + 40 (right filling) + 1 (left border) + 1 (Right Border) = 262px

The padding will affect the box size, but the inherited width will not squeeze out the padding.

Some elements have padding by default, such as ul labels. Therefore, we always like to clear this default padding for convenience of control during website creation:

*{margin: 0;padding: 0;}

* The efficiency is not high, so we use the Union selector to list all 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: width, line type, and color. If the color is not specified, the default value is black. The other two attributes are not written and the border is not displayed. Border rendering varies slightly in various browsers. For more information, see this article.

border: 1px solid red;

Border is a large comprehensive property. The code above sets the four borders to 1px width, linear solid line, and red color.

The border attribute can be split in two ways:

1) based on three elements:

border-width、border-style、border-color

 

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

If a small element is followed by multiple values separated by spacesUpper right lower leftOrder:

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

2) 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;

Another layer can be split in the direction, that is, each element in each direction is split, a total of 12 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;

Border does not have

Border: none;/* if one side does not exist */border-left: none;/* or */border-left-width: 0;