实体化3属性：width height background boeder
文字3属性：font-family font-size color
********背景：****background****
背景相关的属性：
background-color:设置背景颜色
background-image:设置背景图片
写法：background-image:url(图片的路径);//默认情况下图片如果比容器要小，它会平铺。
background-repeat:设置背景是否平铺：
取值：
no-repeat:不平铺
repeat-x：在水平方向上平铺
repeat-y:在垂直方向上平铺
repeat:平铺
background-position:设置背景图片的位置
用法：
background-postion: x y;
注意：x,y可以是具体的数值
x,y又可以是一些英文单词。
x轴（水平方向）: left 左 center 中 right 右
y轴（垂直方向）: top 上 center 中 bottom下
背景的连写方式：
==background: background-color background-image background-repeat background-position;==
英雄联盟官网背景
盒子模型：
概念：在写一个html页面的时候，其实就相当于在这个页面中叠盒子。
思想：万物皆盒子。
具体内容：
盒子的挡板---------border
盒子的泡沫---------padding
盒子中的物品--------内容
盒子与盒子之间的距离---------margin
****border(****边框****)---****盒子的挡板********
==border-color==:边框的颜色
border-top-color
border-right-color
border-bottom-color
border-left-color
==border-width==:边框的宽度
border-top-width
border-right-width
border-bottom-width
border-left-width
==border-style==:边框的样式
border-top-style
border-right-style
border-bottom-style
border-left-style
取值：
solid：实线。
dashed：虚线
dotted：点线
边框的连写方法：
==border: border-width border-style border-color;==
border-collapse: collapse;/去掉单元格之间的间隙/
********盒子的填充：****padding(****内边距****)****
作用：设置盒子的内容与边框之间的距离。
取值：单值，双值，三值，四值模式
padding: 40px;
给上右下左所有的内边距都设置了40像素的距离。
padding: 40px 80px;
给上下内边距设置了40像素，下左右边距设置了80像素
padding: 40px 60px 80px;
给上边距设置了40像素，给左右设置了60像素，给下设置了80像素。
padding: 40px 60px 80px 100px;
以顺时针方向进行设置，上为40px,右为60像素，下为80像素，右为100像素。
分写：
padding-top:
padding-right:
padding-bottom
padding-left
计算盒子的大小：
注意：padding（盒子中的填充物）会改变盒子的大小（跟日常生活中有区别）
计算盒子大小的公式：
盒子宽：border-left-width + padding-left + width + padding-right + border-right-width
盒子高：border-top-width + padding-top +height + padding-bottom + border-bottom-width
==特殊情况下padding不会改变盒子的大小：==
什么情况：当一个大盒子包含一个小盒子，并且大小盒子都是块级元素，而且小盒子的宽是继承自大盒子的话，那么设置小盒子的padding-left不会改变小盒子的大小。
********盒子与盒子之间的距离：****margin****（外边距）********
作用：设置盒子与盒子之间的距离。
****margin: 0 auto;****
作用：设置容器自身水平居中。
注意点：
很多标签默认带有margin和padding，所以将来进行页面的布局的时候一定要清除这些标签的默认的margin和padding.
例如：
body标签默认带有margin: 8px的属性
p标签默认带有margin: font-size 0;
h标签也默认带有margin-top和margin-bottom
ul默认带有上下的margin以及左边的padding
......
清除的方法：
- {
margin: 0;
padding: 0;
}
****==margin-right: auto;==****
作用：如果不设置其它属性只设置这个属性，那么浏览器在解析的时候会将一个盒子的所有的默认的margin全部给margin-right
****==margin****设置为负数：****==****
如果margin-left设置为负数，那么将来这个盒子会向左方向移动。
如果margin-right设置为负数，那么盒子会向右移动。
==margin两种特殊的现象：==
外边距的合并现象：
如果==两个div上下排序==，给上面一个div设置margin-bottom，给下面一个div设置margin-top，那么两个margin会发生合并现象，合并以后的值较大的那个。
解决方案：
用padding设置二者间距离。
margin塌陷现象：
如果一个==大盒子中包含一个小盒子==给小盒子设置margin-top大盒子会一起向下平移。
解决方案：
1.0给大盒子加一个边框
2.0==给大盒子设置一个overflow属性。==
3.0浮动也可以
文本属性：
****text-indent:****
作用：设置首行缩进。
用法：text-indent: 2em;
em:一个文本的距离。
****text-align:****
作用：设置文本的位置
取值：
center:设置内容在容器的水平方向上居中。
left:设置内容在窗口的水平方向上靠左
right:设置内容在容器的水平方向上靠右
****text-decoration:****
作用：设置文本的装饰
取值：
none:没有任何装饰
underline:下划线
********行高****line-height****：********
定义：两行文本之间基线的距离就是做行高
==应用：将行高设置等于容器的高度可以让文本垂直居中==
原理：为什么行高等于容器的高度可以让文本垂直居中。因为如果行高等于容器的高度，那么相当这个容器中只有这一行文本，并且容器被这一行文本占满。而本身文字在自己的一行中是垂直居中的，所以看起来就像是在容器中垂直居中。
补充：
1.0==行高是可以继承的==。
2.0行高的==单位==：
取值：
a.具体的像素值。
b.使用em
em指的是当前标签设置的字体大小。
比如当前标签字体大小为16px，那么2em=32px，如果当前标签字体大小为20px，那么3em=60px;
c.使用%百分号：
与em一样，都是以当前标签的字体大小为基数，如果大小18px，那么 line-height:200%;line-height: 36px;
d.可以什么单位都不带：
与em一样，也是当前标签的字体大小为基数。
注意：
1.0在设置行高的时候，如果单位是em或者%，那么将来行高会先计算出来结果以后再继承给子元素。
2.0在设置行高的时候，如果单位是没有，那么将来行高会先继承给子元素，然后再计算出行高。
********行高与****font****的关系********
==font: font-style font-weight font-size/line-height font-family.==
********浏览器的默认字体大小是多小？********
==谷歌默认大小是16px.==
********透明度：********
opacity:不透明度
赋值：opacity:0.5;
取值：在0-1之间的小数。
这个属性ie6不支持，如果要在ie6中设置透明，要用：
filter: Alpha(opacity=50);
网友评论