盒子模型 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title></title>
  6         <style type="text/css">
  7     .box1{
  8         width: 100px;
  9         height: 100px;
 10         background-color: aquamarine;
 11         border-width: 10px 20px 30px 40px;
 12         border-color: antiquewhite;
 13         border-style: solid;
 14         border-style: dotted;
 15     }
 16  /*
 17  一、内容区
 18  width height 设置盒子内容区的宽度和高度，而不是盒子的整个大小
 19  盒子可见框的大小由内容区，内边距和边框共同决定
 20  
 21  为元素设置边框
 22  要为一个元素设置边框必须指定三个元素
 23  border-width 边框宽度 
 24  border-color 边框颜色
 25  border-style 边框样式
 26  
 27  1.设置边框的宽度 
 28  如果指定四个值 按顺时针方向 上右下左
 29  如果指定三个值 分别设置给 上 左右 下
 30  如果指定两个值 分别设置给 上下 左右
 31  如果指定一个值 四边宽度一致
 32  除了border-width,CSS中还提供了四个border-xxx-width
 33  xxx的值可能是top right bottom left
 34  专门用于设置指定边的宽度
 35  
 36  2.设置边框颜色
 37  指定方式同边框宽度 border-xxx-color
 38  
 39  3.设置边框样式
 40  可选值：
 41  none 默认值
 42  solid 实线
 43  dotted 点状边框
 44  dashed 虚线
 45  double 双线
 46  等
 47  style也可以分别指定四个边的边框样式规则和前面一致 border-xxx-style
 48  
 49  大部分浏览器中，边框宽度和颜色都有默认值，而边框的样式默认值为none
 50  
 51  简写样式：border 通过它可以设置四个边框的样式，宽度，颜色，而且没有任何顺序要求
 52  border 一指定就是同时指定四个边不能分别指定
 53  border-top border-right border-bottom border-left 可以单独设置四个边的样式 规则和border一样，只不过它只对一个边生效
 54  */
 55     
 56     /*
 57 二、内边距
 58 padding 指的是盒子的内容区
 59 一共有四个方向的内边距，可以通过
 60 padding-top
 61 padding-right
 62 padding-bottom
 63 padding-left
 64 来设置四个方向的内边距 指定方式与width相同
 65 内边距会影响盒子可见框的大小，元素的背景会延伸到内边距
 66 盒子的大小由内容区，内边距和边框共同决定
 67     */
 68    
 69    /*
 70 三、外边距
 71 指的是当前盒子与其他盒子之间的距离，不会影响可见框的大小，而是会影响到盒子的位置
 72 盒子中有四个方向的外边距
 73 margin-top
 74 margin-right
 75 margin-bottom
 76 margin-left
 77 由于页面中的元素都是靠左靠上摆放的，
 78 所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变
 79 外边距也可以指定为一个负值，则元素会向反方向移动
 80 margin还可以设置为auto，auto一般只设置给水平方向的margin
 81 如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
 82 垂直方向外边距设置为auto，则外边距默认值为0
 83 如果将left和right同时设置为auto则会将两侧的外边距设置为相同的值，使元素自动在父元素中水平居中
 84  外边距同样可以简写 写法与padding一致  
 85    */
 86 .box2{
 87     width: 100px;
 88     height: 100px;
 89     background-color: aliceblue;
 90     border: solid 50px yellowgreen;
 91     
 92     margin-left: 100px;
 93     margin-right: 100px;
 94     margin-bottom: 100px;
 95 }
 96 .box{
 97     width: 100px;
 98     height: 100px;
 99     background-color: beige;
100     border-left: red solid 10px;
101     padding: 10px;
102 }
103 .box3{
104     /*
105     创建一个子元素box占满box3
106     */
107     background-color: yellow;
108     width: 100%;
109     height: 100%;
110     
111 }
112        </style>
113     </head>
114     <body>
115          <div class="box1">
116          </div>
117          <div class="box2"></div>
118          <div class="box">
119              <div class="box3"></div>
120          </div>
121     </body>
122 </html>

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7     .box1{
 8         width: 100px;
 9         height: 100px;
10         background-color: antiquewhite;
11         margin-bottom: 100px;
12     }
13     /*
14     垂直外边距的重叠
15     在网页中垂直方向的相邻的外边距会发生外边距的重叠
16 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
17     不是相邻的且垂直方向的 则是取和
18 如果父子元素相邻了，那么子元素的外边距会设置给父元素
19     */
20     .box2{
21         width: 100px;
22         height: 100px;
23         background-color: aquamarine;
24         margin-top: 100px;
25     }
26     .box3{
27         width:200px;
28         height: 200px;
29         background-color: yellow;
30         padding-top: 100px;
31     }
32     .box4{
33         width: 100px;
34         height: 100px;
35         background-color: yellowgreen;
36         margin-top: 100px;
37     }
38        </style>
39     </head>
40     <body>
41          <div class="box1">
42          </div>
43          <div class="box2"></div>
44          <div class="box3">
45              <div class="box4"></div>
46          </div>
47     </body>
48 </html>

 

posted @ 2019-07-16 11:28  zuiaimiusi  阅读(170)  评论(0)    收藏  举报