Home > Article > Web Front-end > 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):
<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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>www.zishu.cn</title>
<style>
*{ margin:0; padding:0;}
body{padding:50px; font-size:12px; font-family:arial, helvetica, sans-serif; line-height:1.8;}
#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>
</head>
<body>
400px
<p id="yellow">
<p id="blue">300px</p>
<p id="red">100px</p>
</p>
</body>
</html>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.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>www.zishu.cn</title>
<style>
*{ margin:0; padding:0;}
body{padding:50px; font-size:12px; font-family:arial, helvetica, sans-serif; line-height:1.8;}
#yellow{ width:400px; border:1px solid #ff9900; background:#ffcc99; float:left;}
#blue{ width:300px; height:100px; background:#00ccff; float:left;}
#red{ width:100px; height:100px; background:#ff9900; float:right;}
</style>
</head>
<body>
400px
<p id="yellow">
<p id="blue">300px</p>
<p id="red">100px</p>
</p>
</body>
</html>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:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>www.zishu.cn</title>
<style>
*{ margin:0; padding:0;}
body{padding:50px; font-size:12px; font-family:arial, helvetica, sans-serif; line-height:1.8;}
#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>
</head>
<body>
400px
<p id="yellow">
<p id="blue">300px</p>
<p id="red">100px</p>
</p>
</body>
</html>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:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>www.zishu.cn</title>
<style>
*{ margin:0; padding:0;}
body{padding:50px; font-size:12px; font-family:arial, helvetica, sans-serif; line-height:1.8;}
#yellow{ width:400px; 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>
</head>
<body>
400px
<p id="yellow">
<p id="blue">300px</p>
<p id="red">100px</p>
</p>
</body>
</html>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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
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 (m.sbmmt.com)!