一、CSS简介
css是一种网页渲染技术，把文档结构和表现形式分离，使得网页更加的清爽。
css的必要条件：渲染特定的html标签。
div、span等容器：
div可以称为层或者块状元素，和p标签、h等标签具有一样的特点：单独占一行。
span称行内元素，和a标签、font标签、img等标签具有一样的特点：可以在一行中显示。
但是呢：css学习完后，没有绝对的“行内元素”和“块状元素”，可以通过display属性来进行转换【inline（行内）与block（块状）】
二、css写在哪呢？
1:.css可以写在标签内部的style属性中，这种称为内联样式。
2.css可以写在hear下的style标签中，这种称为内部样式表。
3.css可以写在单独的css文件中，需要标签来引入css文件，这种称为外部样式表
二、选择器
1.标签选择器：使用HTML标签名来作为选择器
2.类选择器：以 . + 名称来命名
3.ID选择器：以#+名称来命名
4.通配符选择器，直接以*号命名，一般建议写在css开头
5.伪类选择器hover，当鼠标放到对象上面时会出现hover的效果
三、css常用属性
1.尺寸：
宽度 width：100px或者100%；
高度 height：100px或者100%；
2.边框
border-top: 2px solid red;
border-right: 5px dashed black;
border-bottom: 10px double violet;
border-left: 3px dotted green;
设置上下左右边框的样式不同，solid: 定义实线边框，dashed: 定义一个虚线边框，double: 定义两个边框。 两个边框的宽度和 border-width 的值相同，dotted: 定义一个点线边框
/*字体*/
/*颜色*/
color: orange;
/*字体大小*/
font-size: 20px;
/*字体加粗*/
font-weight: bold;
/*字体样式*/
font-family: "微软雅黑";
/*倾斜字体*/
font-style: italic;
/*文本居中*/
text-align: center;
/*行高：使文本垂直居中*/
line-height: 700px;
/*文字装饰线*/
text-decoration:overline;
/*背景*/
/*背景颜色*/
background-color: yellow;
/*背景图片*/
background-image:url(img/img1.jpg) ;
/*背景图片是否重复*/
background-repeat:repeat-y;
/*表格边框合并*/
border-spacing: 0px;
border-collapse: collapse;
/*转换成块状元素*/
display: block;
/*背景图片定位*/
background-position: center top;
background-position:-30px 200px；
/*背景图片放缩*/
background-size: 100% 100%;
/*去掉列表项目符号*/
ist-style: none;
/*设置列表的项目符号图片*/
list-style-image: url(img/resizeApi.png);
设置行内块状元素：兼具行内元素和块状元素的特点
display: inline-block;
四、盒子模型
注意：行内元素设置宽高无效，由内容大小确定。如span标签等。
1.外边距 margin
margin：50px； 上下左右各外边距都为50px；
单独设置：
margin-left: 15px;
margin-right:30px ;
margin-top: 50px;
margin-bottom: 20px;
2.内边距 padding
padding: 30px; 设置上下左右内边距都为30px；
单独设置：
padding-bottom: 30px;
padding-left: 20px;
padding-right: 30px;
padding-top: 10px;
3.盒子模型实际高度=(margin-top)+(border-top)+(padding-top)+height +(margin-bottom)+(border-bottom)+(padding-bottom)；
盒子模型实际宽度=(margin-left)+(border-left)+(padding-left)+width+(margin-right)+(border-right)+(padding-right)；
注意如果设置了box-sizing: border-box;，盒子宽度和高度就包含了border和padding，不再使用上面的公式计算高度和宽度。
盒子模型外边距合并情况1：
1.两个div嵌套
2.两个div都没有设置边框
这样会使margin值合并，以margin值大的为准
实例：
首先设置存在边框效果：
效果图：
取消边框就会出现margin值合并，margin以大的为准：
效果图：
当里面的div的margin-top大于外面的div时，没有边框，margin会以大的值为准。
解决这种问题的方法：
1.选择避免这种情况。
2.在父级div上添加padding-top=“xx px”；
盒子模型外边距合并情况2：
1.当两个div 垂直排列时，如果div1有 margin-bottom ，div2有margin-top，这时也会发生边距合并，并且以 较大的值为准。
实例：
上面的div设置了margin-bottom为50px，下面的div设置了margin-top为30px，按理它们之间的间距应该为80px，但是发生了间距合并，以margin值大的为准，所以它们的间距为50px。
该问题无法解决，只能去避免，找准参照物就可以更好的实现效果。