html5盒子内模型,HTML5盒子模型知识点

盒子模型:

1:

什么是盒子:网页中的一种元素 块级元素中的一种

盒子模型中包含的内容:content(内容) border(边框) padding(内边距) margin(外边距) width height

2:设置盒子的边框样式(边框颜色，粗细，线条样式，设置顺序) 顺时针顺序

边框颜色:

border-top-color:上边框的颜色

border-right-color:右边框颜色

border-bottom-color:下边框的颜色

border-left-color:左边框的颜色

设置边框颜色的顺序:上右下左(顺时针顺序)

边框粗细:

border-top-width 上

border-right-width 右

border-bottom-width 下

border-left-width 左

border-width:上右下左

边框线条样式: border-style:上右下左

solid 实线

dashed 虚线

none:没有样式

dotted:点线

3:盒子中内外边距

外边距:margin 盒子1元素和盒子2元素的距离

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:左外边距

上下左右外边距: 设置顺序 上右下左(顺时针)

内边距:盒子内容(Content)-->border的距离(上右下左的内边距) 上右下左

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

上右下左(顺时针)

4:设置尺寸，圆角边框，盒子阴影

盒子尺寸:box-sizing: 默认值(content-box)

border-box:把盒子的总宽度=padding left padding-right +border-weight

盒子的总高度=padding top+padding bottom+border-weight

content-box:把盒子的总宽度=content width+padding left padding-right +border-weight

盒子的总高度=content height+padding top+padding bottom+border-weight

圆角边框:border-radius 顺时针顺序设置(左上，右上，右下，左下 顺时针顺序)

盒子中心点到原有角的距离(圆的半径)

[]代表可以省略

盒子阴影:box-shadow:[inset,color]x轴偏移量 y轴偏移量 阴影半径(粗细) 默认是边框的外部阴影

如果使用了inset，则变为内部阴影