<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>W3sCSS盒子模型</title>
???<!--其实就是div加css样式设计出一些逻辑页面-->
???<link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body style="margin: 0px">
<!--取消身体外层的外边框-->
<img src="http://images.cnblogs.com/cnblogs_com/ttzzyy/1076163/o_8L7BYYH7PD%606Z@3F4X]2V8H.png" alt="盒子模型图片">
<!--padding设置所有内边距————padding-botton设置内低边距--left设置内左边距-->
<!--right设置内右边距————top设置内上边距-->
<table border="1" cellpadding="100px">
<tr>
???<td>1</td>
</tr>
</table>
<table border="1">
???<tr>
???????<td id="td1">1</td>
???</tr>
</table>
<table border="1">
???<tr>
???????<td id="td2">1</td>
???</tr>
</table>
<table border="1">
???<tr>
???????<td id="td3">1</td>
???</tr>
</table>
<table border="1">
???<tr>
???????<td id="td4">1</td>
???</tr>
</table>
<p>边框效果</p>
<div class="tzy">阴影效果</div>
<div class="ttzy">外边距</div>
<div class="container">
???<div class="bd">
???????<div class="pd">
???????????<div class="content">Hello</div>
???????</div>
???</div>
</div>
</body>
</html>
css文件tzy.css
#td1{
???padding-bottom: 100px;
}
#td2{
???padding-left: 100px;
}
#td3{
???padding-right: 100px;
}
#td4{
???padding-top: 100px;
}
p{
???border-style: double;
???border-top-style: solid;
???border-bottom-style: hidden;
???border-left-style: dotted;
???border-right-color: aqua;
???border-bottom-width: 10px;
/*border-style 定义了10个不同的非继承的样式边框包括none（空）*/
???/*单边加上上下左右就可以设置*/
???/*border-width边框宽度*/
???/*单边加上上下左右就可以设置*/
???/*border-color边框颜色 */
???/*单边加上上下左右就可以设置*/
???border-radius:50px;
???width: 100px;
???height: 50px;
???/*设置圆角 ?边框四角弧度*/
???
???text-align: center;
???/*border: 2px solid blue;*/
???/*一般设置方法*/
}
.tzy{
???color: blue;
???
???width: 100px;
???height: 100px;
???text-align: center;
???box-shadow: 10px 10px 5px #FF00FF;
???/*阴影效果*/
}
.ttzy{
???
???width: 100px;
???height: 100px;
???margin: 100px;
???/*margin居上和左为100PX margin也有上下左右属性*/
}
.container{
???/*外边框*/
margin: 100px;
}
.bd{
???/*边框*/
???border-style: double;
}
.pd{
/*内边距*/
padding: 100px;
}
.content{
}
HTML学习笔记 w3sCss盒子模型 第十节 （原创）
原文地址：http://www.cnblogs.com/ttzzyy/p/7500652.html