（3）盒子:border、padding、margin

盒子模型
边框：border
上:border-top
下border-bottom
左：border-left
右：border-right

内边距：pappding
上下左右：pappding-top……
外边距：margin
上下左右：margin-top
这里写图片描述

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
 <style type="text/css">
 /*
 div(css与html结合的第二种方式)
 */
 div{
     border: #F00 solid 1px;/*边框的宽度*/
     height:100px;
     width:200px;

 }
 /*
 关联选择器
 */

 #div_1{
     border-bottom:#F99 dashed 2px;/*设置第一个盒子的底边框为虚线*/
     background-color:#33F;
     padding:20px 100px 200px 300px;/*距离文字边界的上右下左即顺
     时针，在这个例子中数据并没有*/

 }
 #div_2{
     background-color:#696;
     margin:50px;/*距离其他盒子的距离均为50px,也就是外框距离其他事物的距离*/
 }
 #div_3{
     background-color:#906;


 }
 </style>

</head>

<body>
       <div id="div_1">
       float 属性定义元素在哪个方向浮动。以往这个属性总应任何元素都可以浮动。<br />
       浮动元素会生成一个块级框，而不论它本身是何种元素。<br/>

       </div>
        <div id="div_2">
       第一个盒子22
       </div>
        <div id="div_3">
       第一个盒子33
       </div>
</body>
</html>
posted @ 2017-08-02 11:43  测试开发分享站  阅读(112)  评论(0)  编辑  收藏  举报