盒模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒模型</title>
<style type="text/css">
/* *代表任意标签
初始化操作*/
*{
margin: 0;
padding: 0;
}
.div1{
width:400px;
height:400px;
background-color:salmon;
/*内填充padding*/
/*方式1：上下左右 都填充*/
padding:20px;
/*方式2 :上下 左右 分别填充*/
padding:10px 20px;
/*方式3 :上 左右 下 分别填充*/
padding: 20px 50px 0px;
/*方式4 :上 右 下 左 */
padding: 10px 20px 0 30px;
/*或者直接指定方向*/
padding-left: 20px;
/*
padding-rightL: ；右
padding-top : ；上
padding-bottom: ；下
* */
/* 2、border 边框*/
border-width: 5px;
border-color: seagreen;
/*边框风格
dashed :方块虚线
dotted 正方块虚线
solid 实线
* */
border-style: dashed;
/*以上综合写法 ！！推荐 无先后顺序 默认颜色是黑色 */
border: 2px solid slateblue;
/*可以指定方向*/
border-bottom: 5px solid green;
/*边框置空*/
border-top: none;
/*3、margin 外间距 是标签与标签之间的间隔
写法 同padding
*/
margin: 2px;
}
.div2{
background-color: orange;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="div1">
斯卡迪母三看什么打开门看上的吗卡萨丁模块三撒娇多军叁我看会到你家看你的撒娇女的集散地撒技能等级
</div>
<div>
<p class="div2">段落</p>
<strong>我哦我哦我</strong>
</div>
</body>
</html>
