- 首页 > it技术 > >
第10次课 盒子模型[图片上传失败...(image-511b70-1555560531232)] 学习目标(1) . 理解盒子模型及其构成(2) . 会使用盒子属性美化网页元素(3) . 会计算盒子模型尺寸(4) . 理解标准文档流及其组成和特点(5) . 会使用display属性设置元素显示方式# 一、 盒子模型## (一) 什么是盒子模型CSS将网页元素都看成一个个盒子。[图片上传失败...(image-b9c0ae-1555560531233)] 下面，我们重点介绍一下盒子模型的几个属性## (二) 边框### 1. 描述边框有3个属性，分别color、width(粗细)和style(样式)### 2. border-color(边框颜色)属性设置| 属性 | 说明 | 示例 |
| border-top-color | 上边框颜色 | border-top-color:#369;
|
| border-right-color | 右边框颜色 | border-right-color:#369;
|
| border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b;
|
| border-left-color | 左边框颜色 | border-left-color:#efcd56;
|
| border-color | 四个边框为同一颜色 | border-color:#eeff34;
|
| 上、下边框颜色：#369左、右边框颜色：#000 | border-color:#369 #000;
|
| 上边框颜色：#369左、右边框颜色：#000下边框颜色：#f00 | border-color:#369 #000 #f00;
|
| 上、右、下、左边框颜色：#369、#000、#f00、#00f | border-color:#369 #000 #f00 #00f;
|### 3. border-width（边框的粗细）常用属性值(1) . thin:细(2) . medium：默认值(3) . thick：精(4) . 像素值它也分为上下左右边框的粗细设置，如下所示：border-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;
border-width:5px ;
//上下左右一个大小border-width:20px 2px;
//上下一样，左右一样border-width:5px 1px 6px;
//上，左右，下border-width:1px 3px 5px 2px;
// 上，右，下，左### 4. border-style（边框类型）的常用属性值(1) . none(2) . hidden(3) . dotted(4) . dashed(5) . solid(6) . double### 5. border简写同时设置边框的颜色、粗细和样式注意：这三个属性没有先后顺序，建议的顺序：粗细、颜色和样式**borde**r: 9px #F00 dashed ;
### 6. 案例演示#### 需求说明外层div的边框样式为：1px 蓝色（#3a6587） 实线标题背景颜色为蓝色（#3a6587）注册内容背景颜色为浅蓝色（#d4e8f7）文本输出框的边框样式为1px 深灰色（#7b7b7b） 实线注册按钮以背景图片显示，并且鼠标移到按钮上时显示手状。#### 实现效果[图片上传失败...(image-b49a5c-1555560531233)] #### 参考代码#regist { width:230px;
border:1px #3a6587 solid;
}h1 { text-align:center;
font-size:16px;
background-color:#3a6587;
line-height:35px;
color:#FFF;
}#regist table { background-color:#d4e8f7;
}#regist table td { height:28px;
font:12px "宋体";
}.leftTitle { width:80px;
text-align:right;
}.textInput { border:1px #7b7b7b solid;
width:130px;
height:17px;
}.btnRegist { background:url(../image/btnRegist.jpg) 0px 0px no-repeat;
width:100px;
height:32px;
border:0px;
cursor:pointer;
}### 7. 问题从上面的例子可以看到，标签与它外层的标签，以及下面
推荐阅读
