css盒子模型

什么是盒子模型？

所有HTML元素可以看作盒子CSS盒模型本质上是一个盒子，

封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子边框

border-color：边框颜色

 

 

border-width ：边框粗细

thin

medium

thick

border-style：边框样式

none

hidden

dotted

dashed

solid

double

外边距

margin

margin-top

margin-right

margin-bottom

margin-left

margin

内边距

padding

padding-left

padding-right

padding-top

padding-bottom

padding

盒子型模的尺寸

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

圆角边框

border-radius: 20px 10px 50px 30px;

四个属性值按顺时针排列

盒子阴影

box-shadow:inset x-offset y-offset blur-radius color;