HTML------06-------盒子模型

墨蓝 2024-04-29 11:09 5阅读 0赞

## 学习目标： ##

`理解盒子模型及其构成 会计算盒子模型尺寸 会使用盒子模型的两种解析方式来布局网页 会使用圆角属性给网页元素添加圆角效果 会使用盒子阴影属性给网页元素添加阴影效果`

--------------------

## 学习内容： ##

## 1.什么是盒子模型 ##

![9f14b19418134eaba4da1622aef22a67.png][]

## 2.盒子模型—边框 ##

### 2.1边框的常用属性   border-color（边框颜色）   border-width（边框粗细）   border-style（边框样式）   border ###

### 2.2 border-color ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>属性</td> 
   <td style="width:152px;">说明</td> 
   <td style="width:219px;">示例</td> 
  </tr> 
  <tr> 
   <td>border-top-color</td> 
   <td style="width:152px;">上边框颜色</td> 
   <td style="width:219px;">border-top-color:#369;&nbsp;</td> 
  </tr> 
  <tr> 
   <td>border-right-color</td> 
   <td style="width:152px;">右边框颜色</td> 
   <td style="width:219px;">border-right-color:#369;&nbsp;</td> 
  </tr> 
  <tr> 
   <td>border-bottom-color</td> 
   <td style="width:152px;">下边框颜色</td> 
   <td style="width:219px;">border-bottom-color:#fae45b;&nbsp;</td> 
  </tr> 
  <tr> 
   <td>border-left-color</td> 
   <td style="width:152px;">左边框颜色</td> 
   <td style="width:219px;">border-left-color:#efcd56;&nbsp;</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td style="width:152px;">四个边框为同一颜色</td> 
   <td style="width:219px;">border-width:5px;</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td style="width:152px;">上、下边框颜色：#369<br> 左、右边框颜色：#000</td> 
   <td style="width:219px;">border-color:#369 #000;</td> 
  </tr> 
  <tr> 
   <td>border-color</td> 
   <td style="width:152px;"> <p>上边框颜色：#369</p> <p>左、右边框颜色：#000</p> <p>下边框颜色：#f00</p> </td> 
   <td style="width:219px;">border-color:#369 #000 #f00;</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td style="width:152px;">上、右、下、左边框颜色：<br> #369、#000、#f00、#00f</td> 
   <td style="width:219px;">border-color:#369 #000 #f00 #00f;</td> 
  </tr> 
 </tbody> 
</table>

### 2.3 border-width ###

![ce1fe21916184446b7616bc00caeb60d.png][]

### 2.4 border-style ###

border-style

none

hidden

dotted

dashed：虚线边框

solid：实线边框

double

### 2.5 border ###

同时设置边框的颜色、粗细和样式

border:1px solid #3a6587;
    border:1px dashed red;

## 3.外边距 ##

margin（umargin-top uargin-right margin-bottom margin-left margin）

外边距的妙用：网页居中对齐

margin:0px auto;

网页居中对齐的必要条件：块元素和固定宽度

## 4.内边距 ##

padding  
upadding-left  
padding-right:  
padding-top

padding-bottom

padding

## 5.盒子模型的尺寸 ##

![4498e5a8109a4445b7ead1b65484f346.png][]

## 6.box-sizing属性 ##

box-sizing：content-box  |  border-box  |  inherit;

content-box：盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框  
nborder-box：盒子的实际高度和宽度包括元素内容、边框和内边距

## 7.圆角边框 ##

语法

border-radius: 20px  10px  50px  30px;

### 7.1使用border-radius制作特殊图形3-1 ###

### 圆形 ###

利用border-radius属性制作圆形的两个要点  
Ø元素的宽度和高度必须相同  
Ø圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

div{
                width: 100px;
                height: 100px;
                border: 4px solid red;
                border-radius: 50%;
            }

### 7.2使用border-radius制作特殊图形-------扇形 ###

利用border-radius属性制作扇形遵循  
“三同，一不同”原则  
Ø“三同”是元素宽度、高度、圆角  
半径相同  
Ø“一不同”是圆角取值位置不同

8.盒子阴影

box-shadow:inset  x-offset  y-offset  blur-radius  color;

![f988020dd41d4d33abd5aadcef3496c9.png][]

[9f14b19418134eaba4da1622aef22a67.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/cbab40bdf193467b8878e7d51041837e.png
[ce1fe21916184446b7616bc00caeb60d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/caa3b4c5fde04b669b1779765b537095.png
[4498e5a8109a4445b7ead1b65484f346.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/8fff991e16074af6953cc4b8bd034b0c.png
[f988020dd41d4d33abd5aadcef3496c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/0dcd04f79ef14d1ab590fd5318618951.png