Summary of what you must pay attention to about Border when writing CSS

i wrote a piece of css today. i suddenly thought of it while writing. i wrote it and shared it with you; we may have been used to it padding is different in different browsers, but you may not have noticed this;

let me talk about it first scenario, for example:
a 400px wide yellow box, a 300px small blue box on the left, and a 100px wide red box on the right. this should fit right in, right? because 300 100 is exactly 400! okay, let’s try it first. try!
i started writing (header omitted):

  

400px  
  
 300px
  
 100px
  

look at the effect:

 
 
 
 
 
 
 

 
400px 
 
 300px
 
 100px
 
 
 

the final effect is like this:

the reason why i didn’t put it down is because i wrote a border: 1px; then let’s remove it and take a look.

 
 
 
 
 
 
 

 
400px 
 
 300px
 
 100px
 
 
 

well, this is right, just put it down.
so:
the border is calculated outside the width. is that so? let’s look at the following code:

 
 
 
 
 
 

 
400px 
 
 300px
 
 100px
 
 
 

if you are using ie; then you will see their interval much smaller, firefox should be the same as the original effect;

then look at the last effect:

 
 
 
 
 
 

 
400px 
 
 300px
 
 100px
 
 
 

the two small boxes inside have borders, but there is no width. if it changes, i put it down in ie. firefox will not change.
look at the code difference, i added less:
program code

if not add (not at all); it should be executed according to html3.0, i am not sure about this.
program code
transfer a section:
doctype is the abbreviation of document type (document type), used to describe your what version of xhtml or html is used?
the dtd (such as xhtml1-transitional.dtd in the above example) is called the document type definition, which contains the rules of the document. the browser will interpret the identity of your page based on the dtd you defined and display it.
this is a friendly reminder to keep this in mind when writing css. if the page comparison requirements are not quite strict, try to leave a little gap when calculating. in this way, even if there is a 1px border, it will not have a serious impact on the page. 1px is better, but if it is 10px, your page will be finished. i prefer: if the box has width, don't add padding. it's impossible not to add border. no one will laugh at multiple sets of one or two layers. these can avoid many browser compatibility issues.

the above is a summary of what you must pay attention to when writing css. for more related content, please pay attention to the php chinese website (www.php.cn)!