1、框模型
框：页面上所有的元素都可以称之为"框"
框模型：(Box Model),又称为盒子模型,定义框处理元素内容、内边距、外边距、边框的样式
尺寸
边框
内边距
外边距
1、外边距
属性：margin
margin-方向:
margin-left:
margin-right:
margin-top:
margin-bottom:
取值：
px
%(当前元素的百分比，很少用）
负值
auto
上述讲个例子：01.html
margin取值：
margin:value; /*四个方向的外边距统一设置*/
margin:v1 v2; /*v1:上下 v2:左右*/
margin-left:5px;
margin-right:5px;
margin-top:10px;
margin-bottom:10px;
margin:v1 v2 v3;/*v1:上 v2:左右 v3:下*/
margin:v1 v2 v3 v4;/*上右下左*/
margin取值为auto：
左右外边距设置为auto时，当前的块级元素会居中显示
注意：
1、有些块级元素会存在默认外边距
body
h1~h6
p --------讲到这里休息一会
2、垂直外边距合并
两个垂直外边距相遇时，将会合成一个外边距。最终外边距的值是两者中外
边距较的的值。
例子：02.html
3、如果给子元素设置margin-top，默认会被识别成是父元素的margin-top
解决方案：
1、给父元素加边框
2、通过父元素的 padding解决
2、内边距
1、什么是内边距
内容区域和边框之间的空白
内边距会扩大元素边框所占用的区域
2、属性
padding
取值：
px
%
没有 auto和负数
padding-top/bottom/left/right:
padding:value; /*四个方向的内边距*/
padding:v1 v2;上下 左右
padding:v1 v2 v3;
padding:v1 v2 v3 v4;
有些元素，默认是有内边距的
做个例子：03.html
再做个练习：01demo.html 需要颜色：#D0E4C2 #CCC
2、背景
1、背景色
属性：background-color
取值：合法颜色值
transparent
注意：背景颜色会填充到元素的边框、内边距、内容区域
做个例子：04.html
2、背景图片
属性：background-image
取值：url(图像路径)
background-image:url("");
background-image:url(‘‘);
background-image:url();
做个例子：还是在04.html中做
3、背景重复
默认情况，背景图会在水平和垂直两个方向都出现重复的效果(平铺)
属性：background-repeat
取值：
repeat ：默认值，水平垂直平铺
repeat-x : 水平平铺
repeat-y : 垂直平铺
no-repeat : 不平铺（用的最多）
做例子：在04.html中继续做
4、背景图尺寸
5、背景图片固定
属性：background-attachment
取值：
scroll ，滚动，默认值
fixed，背景图像固定
6、背景定位
改变背景图像在元素中的位置
属性：background-position
取值：
x y :x表示水平方向移动距离，+向右，-向左，y表示垂直方向移动距离，+向下，-向上
x% y% :
0% 0% : 显示在元素的左上方
100% 100% : 显示在元素的右下方
50% 50% : 居中
left :靠左
right:靠右
center :将元素显示在水平或垂直方向的中间
top:靠上
bottom:靠下
background-position:left top;
background-position:top left;
background-position:center;
7、背景属性
属性：background
取值：color url(图像) repeat attachment position;
background:red url() fixed;
常用方式：
background:url() repeat position;
3、渐变
背景色：#FDEDD2
渐变：#FAFAFA ~ #ccc
按钮边框：#D5D5D5
a背景：#005AA0 ，#fff
4、文本格式化
1、字体相关
1、指定字体
font-family:value,value2,value3 ....;
font-family:"microsoft yahei","arial","verdana";
2、字体大小
font-size:value;
px 或 pt作为单位
font-size:12px;
3、字体加粗
font-weight:normal / bold ;
400 - 900
4、字体样式(斜体)
font-style:normal/italic;
5、小型大写字母
font-variant:normal/small-caps;
6、字体属性
font:font-style font-variant font-weight font-size font-family;
常用方式：
font:font-size font-family;
font:12px "微软雅黑",arial,verdana;
免费注册：#7CBE56
鼠标移入：#89C964
原文：https://www.cnblogs.com/lijun6/p/10409436.html