css盒模型、边框、标签、背景图片、文本样式

1、padding 内填充，四个方向：top right bottom left
paading复合写法 : top right bottom left（顺时针方向）
只有一个属性值时: 4个方向都是同一个值
设置两个属性值时：
第一个属性值设置的是上下两个方向，
第二个属性值设置的是左右两个方向。
设置三个属性值时：
第一个属性值设置的是上边一个方向，
第二个属性值设置的是左右两个方向，
第三个属性值设置的是下边一个方向。
设置四个属性值时：
第一个属性值设置的是上边一个方向，
第二个属性值设置的是右一个方向，
第三个属性值设置的是下边一个方向，
第四个属性值设置的是左边一个方向。
注意：设置padding后会撑大容器的大小
2、margin 外边距
标签与标签之间的间隔（距离）
margin复合写法 : top right bottom left（同上—padding）
margin的问题
1、margin-top传递
解决方法：仅用以学知识点可以使用border解决
2、margin上下叠压
解决技巧：
1、还是使用margin，可以将某一个元素方向设置成预想的值。margin叠压会取最大的margin值.
2、如果元素没有特殊特征，也可以用padding代替
3、盒模型大小：border + padding + width/height
宽度：100+20+40 = 160
高度：100+20+40 = 160
盒模型的宽度：
border-left-width + padding-left + width + padding-right + border-right-width
盒模型的高度：
border-top-width + padding-top + height + padding-bottom + border-bottom-width
4、边框组成
A、边框的粗细
B、边框的样式
C、边框的颜色

		边框的方向
			top right bottom left
			
		border
			border-top
				border-top-width
				border-top-style
				border-top-color
			border-right
				border-right-width
				border-right-style
				border-right-color
			border-bottom
				border-bottom-width
				border-bottom-style
				border-bottom-color
			border-left
				border-left-width
				border-left-style
				border-left-color
		**边框三角形**
		div{
			width: 0;
			height: 0;
			border: 10px solid #fff;
			/*border-top-color:#ccc;*/
			border-left-color:#ccc;
		}

5、内容是会撑开容器宽高
背景不会占用容器宽高

		background-color 背景颜色
			颜色英文关键字
			rgb
			十六进制
			background-image 背景图
		背景图默认铺满整个容器大小

6、background-repeat 背景图是否重复
no-repeat 不重复
repeat-x x轴重复
repeat-y y轴重复
repeat x/y都重复
7、background-position:x y; 背景图位置
具体数值
left right center
top bottom center
当第二个属性值没有填写，默认居中。
8、background-attachment 背景图是否滚动
fixed 固定在浏览器可视区域
scroll 跟随滚动条滚动
9、a 超链接 （L V H A）
伪类 给元素添加特殊的效果
:link 未访问过的链接初始颜色
:visited 访问过后的链接颜色
:hover 鼠标移入（悬停）
:active 鼠标按下时链接的颜色
10、优先级 代码执行生效的顺序
行间样式 > id选择器 > 类选择器 > 标签选择器
行间样式 1000
id选择器 100
类选择器 10
标签选择器 1
11、块的特征
1、默认独占一行
2、没有宽度时，默认撑满一行
3、支持所有css命令
12、内嵌(内联、行内)的特征
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin
5、代码换行被解析
13、display：inline 显示为内嵌
使行块属性标签具备内联元素的特性
display：block 显示为块
使内联元素具备块属性标签的特性

		display是将标签转换为页面中显示的类型
		display不会改变标签本质

14、css reset 原则：
但凡是浏览默认的样式，都不要使用。
因为每个浏览器下标签的默认样式可能会出现不一致的情况。
人为的将所有样式全部统一（清除），再根据实际情况（设计稿）进行设置。
哪些样式是需要重置的？？？
与盒模型相关的样式
border
margin
padding
标签特有的样式
ul>li
ol>li
书写原则：
用到什么标签就清除所用标签的默认样式
建议不要直接将所有标签全部加上。
不要将所有标签全部统一设置一致的reset，需根据标签默认样式特征来分类设置。
15、font-weight 文字加粗
bold 加粗
normal 正常
16、font-style 文字倾斜
italic 斜体
normal 正常
17、font-size 文字大小
18、font-family: “楷体”;
19、line-height 行高
20、font：font-style | font-weight | font-size/line-height | font-family；
!!!font复合样式需要注意书写顺序
21、text-align 文本对齐（显示）方式
left 默认值
right
center
22、text-decoration 文本修饰
underline 下划线
none
23、letter-spacing 字母间距
24、word-spacing 单词间距（以空格为解析单位）
25、white-space 强制不换行
nowrap 不换行
normal 正常
26、字体格式不一样时，空格大小也不一样。
27、空格的大小：字体格式为宋体时，那么空格大小是当前文字大小的一半。
28、em 是根据字体大小来进行计算的
1em = 当前字体大小