Home > Developer > Web Develop
In this section we explain the "box model" in CSS, that is, "box models", which is usually used in the layout of the time, this "box model" has also been a "box model", in fact, the principle is the same, its approximate principle is this, it has an HTML element is divided into a few parts: margin, border, Padding and actual content, we can set some of its realistic forms by setting these several things.
Box Model *****************
1. The box model is the actual contents (content), the padding (Padding), the border (Border), margin (margin) from the inside out, in which we often say that the padding is the margin and the margin is padding.
2. Here's a picture I'm looking for to explain this box model:
.
3. Here is the text to describe the content is the contents of the box, such as we need to display the text information, padding is its guarded area, but its size will be constrained by the border, and border is the border, and margin is the surrounding area of the border, The distance between the box and the elements of the outside world.
Further clarification ************
1. So when we calculate the width and height of an element, here we take the width as an example, is actually the width of the content plus the width of the padding multiplied by 2, plus the width of border multiplied by two, the width of margin multiplied by 2.
2. These widths and heights are directly represented by PX, the only special is this border, we also need to specify some of its style and color, its first parameter is the size, the second parameter is the style (implementation or dashed line, etc.), the third parameter is the color.
3. Code Demo:
#par { Span style= "Color:rgb (255,0,0); Line-height:1.5!important ">width : 220px ; padding : 10px ; border : 5px solid gray ; margin : 0px ;} 4. In fact, it is very well understood that its box model is only slightly more professional, its understanding is very simple.
Border ***************
1. Above we simply explain the border, in fact, border has a few properties can be set apart, the first is border-style, it refers to the line of the border drawing method, you can use none to represent no border, you can use dashed to define a dashed box, You can use solid to define a solid wireframe, you can use a double to define a two-wire box, and you can define a border with a 3D style, such as groove to define a 3D trench boundary.
2. We can use Border-width to define the size of the border, can be used px, can also use EM, these have been said before, there are three options, the individual is not recommended.
3. You can also use Border-color to set the color of the border, the individual settings border-color is meaningless, you must set the Border-style and then set the Border-color to make sense.
4. These boundary attributes can accept 1 or four values, if it is to accept four values, it is implemented in the order of the lower right and left, if it is three values, then set on the lower right, if it is two values, the first value is taken up and down, the second value is used around, if it is a value, all the boundaries are the same value
5. The sample code, first of all, is the my.html code:
<HTML><Head> <title>2014 Sinsing CSS Tutorial Summer edition</title> <Linkrel= "stylesheet"type= "Text/css"href= "My.css"></Head><Body> <P>Blog Park Sinsing, unlimited warmth</P></Body></HTML>
Then the CSS code:
p{border-size:9px; Border-style:solid; Border-color:red green blue Black;}6. In fact, not only border,padding and margin but also accept one to four values, the same usage.
Summary ****************
1. In this section we mainly explain the layout of this part, that is, the box model.
2. I hope I can express it clearly enough.
2014 Sinsing interpretation of CSS section fifth
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
