您现在的位置是：网站首页> 编程资料编程资料

深入理解CSS中的盒子模型_CSS教程_CSS_网页制作_

2023-11-11 355人已围观

简介下面小编就为大家带来一篇深入理解CSS中的盒子模型。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

很多人对盒子模型搞晕头了，下面通过一个简单的代码来分析盒子模型的结构！

为了方便方便观看！在第一个div中画了一个表格，并将其尺寸设置成与div内容大小一样！且设置body的margin和padding的属性都为0px；

本例子采用行内CSS样式！

代码如下：

XML/HTML Code复制内容到剪贴板

>
<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; 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;">Javalittlemantd>
tr>
table>
div>
<div style="width:30%; height:120px; float:left; border-color:#039;">div>
<div style="width:70%; height:120px;float:left; ">div>
<div style="width:900px; height:120px;float:left; ">div>
div>
body>
html>