# 第六章 盒子模型

第六章 盒子模型

1.边框

1.边框颜色

border-color

2.边框粗细

thin

medium

thick

像素值

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;

3.边框样式

boder-style

none

hidden

dotted

dashed

solid

double

border-top-style:solid; 
border-right-style:solid; 
border-bottom-style:solid; 
border-left-style:solid; 
border-style:solid ; 
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;

4.borser简写

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

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

5.外边距

margin

margin-top

margin-right

margin-bottom

margin-left

margin

网页居中对齐的必要条件

块元素

固定宽度

margin:0px  auto;
//网页居中对齐

6.内边距

padding

padding-left

padding-right

padding-top

padding-bottom

padding

2.盒子模型的尺寸

盒子模型总尺寸=border+padding+margin+内容宽度

box-sizing：content-box  |  border-box  |  inherit
//content-box默认值，盒子的总尺度 border-box盒子的宽度或高度等于元素内容的宽度或高度
//inherit元素继承父元素的盒子模型模式

3.圆角边框

border-radius: 20px  10px  50px  30px;
//四个属性值按顺时针排列

1.使用border-radius制作特殊图形

圆形

利用border-radius属性制作圆形的两个要点

Ø元素的宽度和高度必须相同

Ø圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

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

半圆形

利用border-radius属性制作半圆形的两个要点

Ø制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值

Ø制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

扇形

利用border-radius属性制作扇形遵循“三同，一不同”原则

Ø**“三同”是元素宽度、高度、圆角半径相同**

Ø**“一不同”是圆角取值位置不同**

4.盒子阴影

box-shadow:inset  x-offset  y-offset  blur-radius  color
// inset阴影类型内阴影
// x-offset X轴位移，指定阴影水平位移量
// y-offset Y轴位移，用来指定阴影垂直位移量
// blur-radius 阴影模糊半径阴影向外模糊的模糊范围
// color   阴影颜色，定义绘制阴影时所使用的颜色

ffset blur-radius color
// inset阴影类型内阴影
// x-offset X轴位移，指定阴影水平位移量
// y-offset Y轴位移，用来指定阴影垂直位移量
// blur-radius 阴影模糊半径阴影向外模糊的模糊范围
// color 阴影颜色，定义绘制阴影时所使用的颜色