Tip: you can modify some code before running
<!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=gb2312" /><title>When the child element is wider than the parent element width, [view it in a standard browser]</title><style type="text/css"><!--* {margin:0px; padding:0px;}body {margin:10px; font-size:12px;}#box {background-color: #66CCFF; margin-left:200px; height: 100px; width: 300px; border: 1px solid #66CCCC; float:left;}#box2 {background-color: #33CC99; height: 30px; width: 500px; border: 1px solid #336666;float:right;}--></style></head><body><div id="box">I am floating left now (float: left), and my width is smaller than that of the sub-box, but it won't open me, and I set a certain left boundary, the purpose is to make it easy to see how the sub-box is getting out.<div id="box2">I am a sub-box, my width is bigger than the parent class, and my floating is folat: right, so the right side is on the right side of the parent class box, the portion wider than the parent box is displayed on the left of the large box.</div></div><p>What is the CSS box mode? Why is it a box? First, let's talk about the attribute names that we often hear in Web Design: content, padding, border, and margin all have these attributes. These attributes can be transferred to the box in our daily life for understanding. The box we see in our daily life also has these attributes, so it is called The Box pattern. Then the content is what is installed in the box, and the filling is the foam or other anti-seismic accessories added for fear of damage (valuable) in the box; the border is the box itself; as for the boundary, it means that the boxes cannot be all stacked together. Leave some gaps to maintain ventilation, and at the same time to facilitate the removal. In webpage design, content often refers to text, images, and other elements, but it can also be a small box (DIV nesting). Unlike in real life, in real life, things generally cannot be bigger than the box, otherwise the box will be broken, while the CSS box is elastic, and the content inside is bigger than the box itself, but it will not be damaged. Fill only has the width attribute. It can be understood as the thickness of the anti-seismic auxiliary material in the living box, while the border has big and small colors, we can also understand the thickness of the box we see in our lives and the color of the box. The boundary is the distance between the box and other things. In real life, suppose we place boxes of different sizes and colors in a certain gap and order on a square, and finally look down over the square, the figure and structure we see are similar to the webpage layout we want to design, as shown in the figure below.</p></body></html>
Tip: you can modify some code before running
