CSS Crash tutorial-css box model--6

1.CSS Box Model Overview

Let's take a look first. The composition of the box includes: Margin (margin), border (border);p adding (inner margin), content (content) The most part of the body box is the actual contents, the content is directly surrounded by the inner margin. The inner margin renders the background of the element. The edge of the padding is a border. Outside the bounding rectangle is the margin, and the margin is transparent by default, so it does not obscure any subsequent elements.

The padding, borders, and margins are optional and the default value is zero. As you can see from the above figure, the width and height (height) refer to the width and height of the content area. Increasing the padding, borders, and margins does not affect the size of the content area, but increases the total size of the element box.

2.CSS Box model inner margin

What the inner edge is:

The inner edge is within the body (content), outside the bounding rectangle (border). The simplest property that controls the area is the Padding property. The Padding property defines an empty area between the element's border and the element's content.

The CSS padding property defines the inner margin of the element. The Padding property accepts a length or percent value, but does not allow negative values.

The CSS padding property defines the inner margin of the element. The Padding property accepts a length or percent value, but does not allow negative values.

You can set up a uniform padding, or you can make one-sided padding: For example, if you want all sides of the H1 element to have a 10-pixel padding, this is all you need:

h1 {padding: 10px;}

You can also set the padding for each edge in the order of top, right, bottom, and left, with different units or percent values for each edge:

h1 {padding: 10px 0.25em 2ex 20%;}

If you just want to set one side of the side of the basis, we can only do, just through the following four properties:

• Padding-top
• Padding-right
• Padding-bottom
• Padding-left

As the name implies, this is very well understood.

In the numerical settings, as we have said before, can use a variety of units, commonly used is the pixel (px) and cm (cm), this is relatively simple, just test it just fine:

Write a table in the HTML file, plus the border properties:

 <  table  border  = "1"  >  <  tr  >  <  TD  >,  body </ TD  >  </ tr  >  </ table  >  

Let's add the following in the CSS file

h1 {    padding-left: 5cm;    padding-right: 5cm; padding-top: 30px; padding-bottom: 30px;}

The HTML code is updated to:

<table border= "1" >    <tr>        <td>            
We can see that the area of our operation, outside the body, within the bounding rectangle.
3.CSS Box Model border
The bounding rectangle (border) of an element is one or more lines around the content and padding of the element. Set the Border property to specify the style, width, and color of the element's border.
The students who have studied HTML know that in HTML we often use tables to create borders around them, but by using CSS border properties, we can create well-performing borders and apply them to any element.
Each border property lets you set the width, style, and color. Let's see how to set the width of the border by border property, as well as the color:

 
 

  
  
 
   
CSS does not define the specific width of the 3 keywords, so one user agent may set thin, medium, and thick to be equal to 5px, 3px, and 2px respectively, while the other user agent is set to 3px, 2px, and 1px, respectively.
 
  
 
 
You can use the following content
td {border-style: solid; border-width: 15px 5px 15px 5px;}
Also, here we can set the width of the single-sided border,
border-top-widthborder-right-widthborder-bottom-widthborder-left-width
Let's add the following in the CSS file
  border-style:dashed;  border-top-width:15px;  border-right-width:5px;  border-bottom-width:15px; border-left-width:5px;       
说完宽度,我们再来看看颜色,设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性，它一次可以接受最多 4 个颜色值,分别是边框的四边(具体顺序自己可以试试)。可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值
同样可以使用属性控制各个边框的颜色,以达到相同的效果: border-top-color border-right-color border-bottom-color border-left-color
4.CSS Box Model margin
Margin is the area around the content box, you can refer to the above structure. The default is a transparent area. Similarly, the margins also accept units of any length, percentages. It's very similar to the inner edge. We can use any of the following properties to set only the corresponding margin, without directly affecting all other margins: Margin-top margin-right Margin-bottom Margin-left is not very familiar, these properties are so interlinked, we can divergent contact
The default value for margin is 0, so if you do not declare a value for margin, there is no margin. However, in practice, the browser has provided a predetermined style for many elements, and margins are no exception. For example, in a browser that supports CSS, margins generate a "blank line" above and below each paragraph element. Therefore, if the margin is not declared for the P element, the browser may apply an outer margin on its own. Of course, the default style will be overridden as long as you specifically make a declaration.
Here's a specific assignment:
Value replication do you remember? We have mentioned value replication in the first two sections. Here we explain how to use value replication. Sometimes, we enter some duplicate values.
These two values can replace the previous 4 values. How is this done? CSS defines rules that allow for margins to be specified with less than 4 values. The rules are as follows:
If the value of the left margin is missing, the value of the right margin is used.
If the value of the margin is missing, the value of the top margin is used.
If the value of the right margin is missing, the value of the top margin is used.
It's a symmetric copy anyway.
Here is also a knowledge point, that is, this is the margin of the merger, the outer border is a superposition of the concept, the following we use a graph to illustrate the difference between the merger and after the merger:
 
CSS Crash tutorial-css box model--6