CSS盒子模型简介

在HTML页面中，每一个元素都是一个规则的矩形，因此每一个元素都由一个盒子模型来表示，盒子模型由4个区域组成。

content box（内容区域）

padding box（内边距区域）

border box（边框区域）

margin box（外边距区域）

CSS边框 border

边框样式属性指定要显示什么样的边界

border-style属性用来定义边框的样式

border-style值：

none：无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。 效果取决于边框的颜色值

CSS content属性

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

content属性值

none:设置content，如果指定成nothing 

normal:设置content,如果指定的话，正常

counter:设置计数器内容

string：设置content到你指定的文本

open-quote：设置content是开口引号

close-quote：设置content是闭口引号

attribute：设置content作为选择器的属性之一

no-open-quote：如果指定，移除内容的开始引号

no-close-quote：如果指定，移除内容的闭合引号

url：设置某种媒体（图像，声音，视频等内容）

inherit：指定的content属性的值，应该从父元素继承

CSS padding 属性

元素的内边距在边框和内容区之间，控制该区域最简单的属性是padding属性。

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

padding-top：设置上内边距

margin简写属性在一个声明中设置所有外边距属性，该属性可以有1到4个值。

padding-right：设置右内边距

padding-botton：设置下内边距

padding-left：设置左内边距

CSS margin属性

这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的左右边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

auto：浏览器计算外边距

length：规定以具体单位计的外边距值，比如像素、厘米等。默认值是0px。

%：规定基于父元素的宽度的百分比的外边距。

inherit：规定应该从父元素继承外边距。