Detailed explanation of the box model in CSS_html/css

Detailed explanation of the box model in CSS_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:53:42

Original

990 people have browsed it

Many people are confused by the box model. Let’s analyze the structure of the box model through a simple code!

For convenience and convenience viewing! Draw a table in the first div and set its size to be the same as the div content! And set the body's margin and padding properties to 0px;

This example uses inline CSS style!

The code is as follows:

<!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>盒子模型</title></head><body style="margin:0px; padding:0px;"><div style="width:900px; height::auto">  <div style="width:900px; height:100px; background-color:#021; color:#FFF; padding:25px; margin:25px;border: 50px solid #0CF; ">    <table width="900px" height="100px" border="1" cellspacing="0" cellpadding="0" bordercolor="#FF0000">      <tr >        <td style="text-align:center; font-size:36px;">Javalittleman</td>      </tr>    </table>  </div>  <div style="width:30%; height:120px; float:left; background-color:#063; border-color:#039;"></div>  <div style="width:70%; height:120px;float:left; background-color:#123;"></div>  <div style="width:900px; height:120px;float:left; background-color:#111;"></div></div></body></html>

Copy after login

Turn on the ruler!

Have you discovered anything?

The analysis is as follows:

Display effect:

Other table settings are fixed, which means that the content size will not change, only the position will change!

border: It is a border that expands outwards and can add color attributes to it;

margin: it expands outwards and has no color attributes, so we see The expanded color is the external color, which in this case is colorless!

padding: It is filled inward and has no color attribute. The color displayed is the color set by the internal content!