HTML----盒子模型
盒子模型
概念
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
边框
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 | 1. 四个边框同一个颜色 2.上、下边框颜色：#369 左右边框：#000 3.上边框颜色：#369 左右边框颜色：#000 下边框颜色：#f00 4.上、右、下、左边框颜色： #369、#000、#f00、#00f | 1. border-color:#eeff34; 2.border-color:#369 #000; 3.border-color:#369 #000 #f00; 4.border-color:#369 #000 #f00 #00f; |
border-width
类型
- thin：定义细的边框。
- medium：默认。定义中等的边框。
- thick：定义粗的边框。
- 像素值
border-style
类型
- none
- hidden
- dotted
- dashed
- solid
- double
border:同时设置边框的颜色、粗细和样式
示例
border:1px solid #f00;
border:1px dashed red;
边距
外边距
外边距是指围绕在边框之外的空白区域。可以有1~4个值，以顺时针即上右下左的顺序依次赋值。
属性
- margin-top
- margin-right
- margin-bottom
- margin-left
- margin
用处
网页居中对齐
margin:0px auto;
网页居中的必要条件
- 块元素
- 固定宽度
内边距
内边距指的是元素与边框之间的空白区域，可以有1~4个值，按照顺时针即上右下左的顺序依次赋值.
属性
-
padding-left
-
padding-right
-
padding-top
-
padding-bottom
-
padding
盒子模型的尺寸
盒子模型总尺寸 = border + padding + margin + 内容宽度
语法
box-sizing: content-box | border-box | inherit;
#说明
content-box:默认值，盒子的总尺寸
border-box:盒子的高度或宽度等于元素内容的宽度或高度
inherit：元素继承父元素的盒子模型模式
浏览器兼容性
| 属性名 | IE | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| box-sizing | 8+ | 1.5+ | 1.0+ | 9.0+ | 3.1+ |
边框
语法
border-radius:20px 10px 50px 30px;
四个属性按照顺时针排列。
圆形
使用border-radius制作圆形要点
- 元素的宽度和高度必须相同
- 圆角的半径为元素宽度的一半，或者直接设置圆角半径为50%
示例
div{
width:10px;
height:10px;
border:4px solid red;
border-radius:50%;
}
半圆形
使用border-radius制作半圆形要点
- 制作上半圆或下半圆时，元素的宽度是高度的两倍，而且圆角半径为元素的高度值。
- 制作左半圆或右半圆时，元素的高度是宽度的两倍，而且圆角半径为元素的宽度值。
扇形
使用border-radius制作扇形遵循"三同，一不同"原则
- “三同”：是元素宽度高度，圆角半径相同。
- “一不同”：是圆角取值位置不同。
盒子阴影
语法
box-shadow:inset x-offset y-offset blur-radius color;
#说明
inset:阴影类型，内阴影
x-offset:x轴位移，指定阴影水平位移量
y-offset:y轴位移，指定阴影垂直位移量
blur-radius:阴影模糊半径，阴影向外模糊的模糊范围
color:阴影颜色，定义绘制阴影时所使用的颜色
