A summary of what border must pay attention to when writing CSS

Today wrote a section of CSS, writing suddenly thought, write to share with you; We may have been accustomed to http://www.php.cn/wiki/948.html "target=" _blank ">padding in different browsers, but this you do not necessarily notice;

Say a scene first, for example:
A yellow box with a width of 400px, a small 300px blue box on the left and a red box with a width of 100px on the right. That should just drop it, right? Because 300+100 is exactly 400! All right, try it first!
I began to write (omission of the head):

<style>  #yellow {width:400px; border:1px solid #FF9900; background: #FFCC99; float:left;}  #blue {width:300px; height:100px; border:1px solid #0066FF; background: #00CCFF; float:left;}  #red {width:100px; height:100px; border:1px solid #FF3300; background: #FF9900; float:right;}  </style>  400px  <p id= "Yellow" >   <p id= "Blue" >300px</p>   <p id= "Red" > 100px</p>  </p>

Look at the effect:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
The final effect is this:


Not put down, the reason is because I wrote a border:1px; Let's take him out and look at it.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
Well, that's right, just put it down.
So:
The border is calculated outside the width. Is that right? Let's look at the code below:


If you are using IE; Then you will see their interval is much smaller, Firefox should be the same as the beginning of the effect unchanged;

Then look at the last effect:


The inside of the two small boxes have a border, in the case of no change in width, in IE down. Firefox doesn't change.
Look at the code differences, I added less:
Program code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
If not added (not at all); It should be done by html3.0, which I'm not sure about.
Program code
Turn a paragraph:
DOCTYPE is a shorthand for document type, which is used to describe what version of XHTML or HTML you are using.
The DTD (for example, XHTML1-TRANSITIONAL.DTD in the previous example) is called the document type definition, which contains the rules of the document, and the browser interprets the identity of your page according to the DTD you define and shows it.
Write it is a friendship to remind you to write a CSS to remember this, if the page comparison requirements are not the same as the strict phase, the calculation as far as possible to set aside a little interval. This way, even if there is a 1px border, will not have a serious impact on the page, 1px is OK, if it is 10px, your page is finished. I tend to: if the box has width do not add padding, without adding border is not likely. Multiple sets of one or two layers no one will joke, these can avoid a lot of browser compatibility issues.

The above is to write CSS on the border must pay attention to the local summary of content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

