第六课 盒子模型

盒子模型

盒子模型的使用

边框

border-color边框颜色

 

border-width边款宽度，单位像素px

border-style边框样式，实线solid、虚线dashed

简写：border：颜色+宽度+样式

内边距：padding

外边距：margin

顺序：上右下左，

margin：0px auto；网页居中对齐（必要条件：块元素+固定宽度）

盒子总尺寸：border+padding+margin+内容宽/高

 

box-sizing：

content-box默认值，盒子的总尺寸

border-box盒子的宽度或高度等于元素内容的宽度或高度

圆角边框

border-radius语法

border-radius：20px 10px 50px 30px；

四个属性按顺时针排列：上左-上右-下右-下左

border-radius制作特俗图形

圆形：宽高相同，圆角半径为宽度一半或者直接设置为50%

盒子阴影 阴影类型 x轴位移 y轴位移 阴影模糊半径 阴影颜色

box-shadow： inset x y blur-radius color