Today I wrote a piece of CSS, and I suddenly thought of it. I 'd like to share it with you. We may have been used to the differences between padding in different browsers, but you may not have noticed this;
Let's start with a scenario, for example:
A yellow box with a width of PX, a small blue box with a width of PX on the left, and a red box with a width of PX on the right, right? Because 300 + 100 is exactly 400! Okay. Try it first!
I started to write (the header is omitted ):
CopyCode The Code is as follows: <style>
# Yellow {width: 400px; Border: 1px solid # ff9900; Background: # ffcc99; float: Left ;}
# Blue {width: 300px; Height: 100px; Border: 1px solid # 0066ff; Background: #00 CCFF; float: Left ;}
# Red {width: 100px; Height: 100px; Border: 1px solid # ff3300; Background: # ff9900; float: Right ;}
</Style>
400px
<Div id = "yellow">
<Div id = "blue"> 300px </div>
<Div id = "red"> 100px </div>
</Div>
Let's take a look at the effect:Xmlns = "http://www.w3.org/1999/xhtml">
400px
300px100px
