[Front-end study notes day21] 3.5. Css box model + CSS box model

3.5. Css box model

CSS box model

Box model to explain
the elements displayed as a box on the page, similar to a box, CSS box model is the use of the box to do in reality metaphor, to help us set the corresponding style elements. Box schematic model is as follows:

The box named elements, respectively provided corresponding to the style: width of the box (width), the height of the box (height), the box frame (border), the spacing between the frame and the content within the box (padding), and the cassette box the spacing between the (margin).

Setting the width and height

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

Set the border
setting aside of the border, such as the top of the frame can be set as follows:

border-top-color:red;    /* 设置顶部边框颜色为红色 */  
border-top-width:10px;   /* 设置顶部边框粗细为10px */   
border-top-style:solid;  /* 设置顶部边框的线性为实线，常用的有：solid(实线)  
  dashed(虚线)  dotted(点线); */

The above can be simplified into a three:

border-top:10px solid red;

The method provided above and the other three sides, like the above 'top' replaced 'left' is disposed on the left, into 'right' is disposed to the right, into 'bottom' base is provided.

If the same four sides, four sides can be combined into one set:

border:10px solid red;

Padding disposed within the pitch

Disposed in four sides of the box the spacing can be set as follows:

padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */

The above settings can be abbreviated as follows:

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
四个方向的内边距值。 */

Padding can project behind with three values, two values ​​and a values, which are provided as follows:

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */

Provided on the outer margin spacing

The method of setting the outer and padding from the same setting method, into 'margin' Margin Setting method is set in the above item 'padding'.

Comprehension exercises
by the principles of the box model, making the following boxes: