1、盒子中的区域 div,但凡是块元素,都可以认为是盒子

  一个盒子中主要的属性you:width、height、padding、border、margin。

        width是“宽度”的意思,CSS中width指的是内容的宽度,而不是盒子的宽度。

        height是“高度”的意思,CSS中height指的是内容的高度,而不是盒子的高度

        padding是“内边距”的意思

        border是“边框”

        margin是“外边距”

<div class="box1"> <img src="logo.png" alt=""> </div>

css样式:

.box1{ 
   /* 盒子的实际宽度 === 左右边的border+padding+内容宽度 */ 
   background-color: lightblue; 
   /* 盒子内容的宽高度 */ 
   width: 720px; 
   height: 720px; 
   border: 1px solid lightskyblue; 
   margin: 0 auto; 
   padding:10px 2 0px 30px 40px; 
} 
.box1 img{ 
   width: 100%; 
}

202101071609989350882114-1658129437889

当前盒子的实际宽度为:720+1+1=722px;

2、其中可以给盒子添加padding,margin属性,下面以padding为例:

padding是4个方向的,所以我们能够分别描述4个方向的padding。

方法有两种,第一种写小属性;第二种写综合属性,用空格隔开。

小属性:

 padding-top: 30px;
 padding-right: 20px;
 padding-bottom: 40px;
 padding-left: 100px;

等价于:padding:30px 20px 40px 100px;

如果只写3个值:padding: 20px 30px 40px;

则是上、右、下、左和右一样:

202101071609989701161395

如果只写2个值:padding: 30px 40px;

202101071609989757906887

所以padding: 30px 40px;等价于: 

padding-top: 30px;
padding-bottom: 30px;
padding-left: 40px;
padding-right: 40px;

要懂得,用小属性层叠大属性:padding: 20px;

                                               padding-left: 30px;

202101071609989918699924

错误写法(将会采取就近原则渲染):padding-left: 30px;

                                                          padding: 20px;

3、border边框有三个要素:粗细、线型、颜色。颜色如果不写,默认是黑色。

代码:border: 1px dashed red;

其中dashed是线型,还有:

<p class="w w1">dotted</p> 
<p class="w w2">dashed</p> 
<p class="w w3">solid</p> 
<p class="w w4">double</p> 
<p class="w w5">groove</p> 
<p class="w w6">ridge</p> 
<p class="w w7">inset</p> 
<p class="w w8">outset</p>

css样式:

.w{ 
   width: 100px; 
   margin: 0 auto; 
   text-align: center; 
   margin-top: 10px; 
} 
.w1{ 
   border:1px dotted red; 
} 
.w2{ 
   border:1px dashed red; 
} 
.w3{ 
   border:1px solid red; 
} 
.w4{ 
   border:1px double red; 
} 
.w5{ 
   border:1px groove red; 
} 
.w6{ 
   border:1px ridge red; 
} 
.w7{ 
   border:1px inset red; 
} 
.w8{ 
   border:1px outset red; 
}

代码演示:

202101071609990698143949

border属性能够被拆开,有两大种拆开的方式:

1) 按3要素:border-width、border-style、border-color

2) 按方向:border-top、border-right、border-bottom、border-left