盒子模型的属性
一、边框系列属性
二、尺寸属性
边距
＊内边距
＊外边距
border-color:边框颜色
border-width:边框宽度
border-style:边框样式
border-color:red;
border-width:1px;
border-style:solid;margin-left:100px;左外边距
margin-top:100px
padding-left:100px;左内边距
padding-top:100px;上内边距
注意:内边距会延长所在盒子的长或宽
举例：
<html>
<head>
<title>盒子模型</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css" >
div{
border:1px solid red;
}
#one{
height:300px;
width:300px;
}
#two{
height:100px;
width:100px;
margin-left:100px;
margin-top:100px;
}
</style>
</head>
<body>
<div id="one">
<div id="two"></div>
</div>
</body>
</html>
三、边距属性
padding是一个复合的属性值:
/*
padding:1个值 上下左右
2个值 1.上下 2.左右
3个值 1.上 2.左右 3.下
4个值 1.上 2.右 3.下 4.左
*/举例：
<html>
<head>
<title>盒子模型－边距属性</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css" >
div{
border:1px solid red;
height:300px;
width:300px;
}
#one{
padding:10px 30px 50px 80px;
}
</style>
</head>
<body>
<div id="one">
<div id="two"></div>
</div>
</body>
</html>
版权声明：本文为panpan_1994原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。