Home > Developer > Web Develop
Box model, English is box models. Whether it's div, span, or a is a box.
However, images and form elements are all treated as text, and they are not boxes. This is a good understanding, for example, a picture does not put things, it is their own content.
The area in the boxThe main attributes in a box are 5: width, height, padding, border, margin. As follows:
Box Model:
Code Demo:
Above this box, width:200px; height:200px; But the reality of the width of the high is 302*302. This is because we have to add padding, border.
Note: width and true occupancy width, not a concept! let's look at the example below.
Standard box model and IE box modelIn the knowledge we are currently learning, the standard box model is the norm.
Standard Box Model:
IE Box Model:
Show:
Note: Android also has the concept of margin and padding, meaning is similar, if you will be a little Android, it should be better to understand it. The difference is that there is no border in Android, and in Android, margin is not part of the control, I think it is more reasonable, hehe.
<body><body>The label needs to be emphasized. Many people think that the <body> label occupies the entire area of the whole page, in fact, it is wrong, the correct understanding is this: the entire page is the largest box, that is <document> , the browser. And that's <body> <document> the son. The <body> default margin size for the browser is 8 pixels, which <body> takes up a large portion of the entire page, not the entire area. Look at a piece of code.
<!doctype html><Htmllang="EN" ><Head><Metacharset="UTF-8" ><MetaName="Generator"Content="EditPlus?" ><MetaName="Author"Content="" ><MetaName="Keywords"Content="" ><MetaName="Description"Content="" ><Title>document</Title><StyleType="Text/css" > div{Width100px;Height100px; border: 1px solid red; padding: 20px; margin: 30px;} </style> </ head> <body> <div> lifetime </ div> <div> </div> </ body></HTML> In the above code, we set the margins and other information for the DIV tag. Open Google Chrome and press F12 to see the following:
Recognize width, heightBe aware that in the eyes of front-end development engineers, everything in the world is different.
For example, to measure the manuscript, the front-end development engineer will only measure the content width:
The following two boxes, the true possession of a wide height, are 302*302:
Box 1:
.box1{ width: 100px; height: 100px; padding: 100px; border: 1px solid red; }
Box 2:
.box2{ width: 250px; height: 250px; padding: 25px; border: 1px solid red; }
True occupancy width = left border + Left padding + width + right padding + right border
The box model diagram of the above two boxes is as follows:
If you want to keep the real width of a box intact, then add width to reduce padding. When you add padding, you should reduce the width. Because the box gets fatter is disastrous, it will squeeze the other boxes down.
Recognize the paddingpadding area also has colorPadding 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 effect is as follows:
Padding has four directions.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.
The notation for small attributes:
padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px;
General attributes: (top, right, bottom, left) (clockwise, separated by a space.) The same is true of margin)
padding:30px 20px 40px 100px;
If four values are written, the order is: top, right, bottom, left.
If only three values are written, the order is: top, right, bottom. The same as the right.
If you write only two values, say:
padding: 30px 40px;
The order is equivalent to: 30px 40px 30px 40px;
To understand, cascade large attributes with small attributes . Like what:
padding: 20px;padding-left: 30px;
The padding corresponding box model above is:
The following wording:
padding-left: 30px;padding: 20px;
The small property of the first row is invalid because it is stacked off by the large properties of the second row.
The following questions will be done, stating that you understand.
Some topicsTitle 1: Say the box below the true possessive width, and draw a box model diagram.
div{ width: 200px; height: 200px; padding: 10px 20px 30px; padding-right: 40px; border: 1px solid #000; }
Answer:
Title 2: Say the box below the true possessive width, and draw a box model diagram.
div{ width: 200px; height: 200px; padding-left: 10px; padding-right: 20px; padding:40px 50px 60px; padding-bottom: 30px; border: 1px solid #000; }
Answer:
padding-left:10px；And padding-right:20px; useless, because behind the padding big attributes, cascading off them.
The box model is as follows:
Topic 3: Now give you a box model diagram, write the code, try to write in the most simple way.
Answer:
width:123px; height:123px; padding:20px 40px; border:1px solid red;
Topic 4: Now give you a box model diagram, write the code, try to write in the most simple way.
Answer:
Some elements, default with paddingwidth:123px; height:123px; padding:20px; padding-right:40px; border:1px solid red;
Some elements, padding such as the UL tag, are provided by default. As follows:
Display, do not add any style of UL, also has 40px of Padding-left.
So, when we do the station, for ease of control, always like to clear this default padding.
Can be used * to clear:
*{ margin: 0; padding: 0; }
However, * the efficiency is not high, so we use the set selector, listing all the labels (without the back, there are professional to clear the default style of the style sheet, learning in the future):
BodyDivDlDtDdUlol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input, Textarea,p,blockquote, th,td{margin:< Span class= "Hljs-number" >0; padding:0;} Border is the border. The border has three features: pixel (thickness), linetype, color.
If the color is not written, the default is black. The other two properties do not write, kill, show no border.
Border-styleThe border of all the lines are as follows: (we can get it by viewing CSS参考手册 )
border:10px ridge red;This attribute, for example, has subtle differences in Chrome and Firefox, ie: (because it can be shown, it's not a compatibility issue, it's just a slight difference)
If the designer inside the company is a Virgo and pursues a very high page restore , you cannot use CSS to make a border. You need to use the picture, you need to cut the map.
Therefore, the more stable border-style on a few: solid, dashed, dotted.
Border splitBorder is a large comprehensive attribute. For example:
border:1px solid red;
is to put 4 borders, all set to 1px width, line solid line, red color.
PS: Tip: In sublime text, in order to quickly enter border:1px solid red; This property, you can enter directly bd , and then select the second after the return.
The border attribute is capable of being disassembled, and there are two major ways to disassemble it:
(1) by three elements: Border-width, Border-style, Border-color. (A border attribute is a combination of three small attributes)
(2) by direction: Border-top, Border-right, Border-bottom, Border-left.
Now we understand that a border attribute is synthesized from three small attributes . If a small property is followed by a space-separated number of values, it is the upper-right-left order. Examples are as follows:
border-width:10px 20px;border-style:solid dashed dotted;border-color:red green blue yellow;
The effect is as follows:
(1) Split by three elements:
border-width:10px; //边框宽度border-style:solid; //线型border-color:red; //颜色。
Equivalent to:
border:10px solid red;
(2) According to the direction of the demolition:
border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;
Equivalent to:
border:10px solid red;
(3) by three elements and direction to dismantle: (is to take each direction, each element apart.) 3*4 = 12)
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; Equivalent to:
border:10px solid red;
What do you use in your work? Very simple answer: what is easy to use. But to understand, use small attributes to cascade large attributes. Examples are as follows:
In order to achieve the above effect, the following is spelled:
border:10px solid red;border-right-color:blue;
In order to achieve the above effect, the following is spelled:
border:10px solid red;border-style:solid dashed;
Border can not:
border:none;
Can be an edge without:
border-left: none;
You can also adjust the width of the left border to 0:
Example: Draw a triangle with the border attribute (tips)border-left-width: 0;
The steps are as follows:
(1) When we set the width and height of the box to 0 o'clock, this effect is as follows:
(2) Then cancel the bottom of the border:
(3) The left and right side of the border is finally set to white:
In this way, a triangle is painted well.
CSS box model + How to implement triangles using CSS
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
