注：随笔有错误，全屏本人自己开发所写，不推荐借鉴。
CSS背景操作：
div居中：
background-position:center;div在中间居中
background-position:right bottom;div在右下角
background-position:20px 30px;距离左边20个像素，距离上边30个像素。
background-repeat:no-repeat;背景图片只设置一个，不平铺
写两个具体的值的时候，第一个值代表水平方向，第二个值代表垂直方向。
背景是否滚动：
background-attachment:背景是否滚动 scroll 滚动 fixed 固定
如果用scroll滚动的话就是以div为参考的，如果设置为fixed的话就是以浏览器为参考的。
背景属性的连写：
因为上面的方法如果写出来的话太复杂了，背景连写比较简单。
background:red url("1.jsp") on-repeat bottom fixed; 这些方法都会生效的，顺序也没有区别的，不平铺，因为设置的是固定，所以在浏览器的下面。
清除列表前面的图标：list-style:none;
取消超链接的下划线：text-decoration:none;
文本向右边移动些：padding-left:10px;
如果想让一个图标正对着文字的时候，就让他先向左，然后在center居中，就ok了
如果文字在div里面，设置文字居中text-align:center;的话，是以div做参照物的。
盒子模型：
border-top-style: solid/dashed; 实线或者虚线
border-top-color:red; 边框的颜色
border-top-5px;上面有5个像素粗的线
也可以简写成：
border:1px solid red;这个就是红色的边框
表单空间案例：
border: 0 none;去掉文本框的边框
内边距：
padding是内边距
padding-top:20px;上面的内边距是20px，其他都类似
margin是外边距
内边距简写：
padding:20px 30px; 上下20px 左右30px
padding:20px; 上右下左的内边距都是20px
padding:20px 30px 40px;上内边距为20px，左右内边距为30px 下内边距为40px
padding:20px 30px 40px 50px;上20px，右30px 下40px 左50px
内边距影响盒子大小：
用padding设置内边距的时候，可以撑大盒子，也就是撑大div，如果向弄成正常的话，就要在定义之后减去撑大的宽度或者长度
如果设置边框的话，也会影响盒子的宽度
盒子的宽度=定义的宽度+边框的宽度+左右内边距
继承盒子的知识点：
子类继承父类，宽度是和父类一样的，但是高度不一样。
继承的盒子一般不会被撑大：
包含或者嵌套的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距不会撑大盒子，只要别超过父类的盒子定义的宽高就行。但是定义高度的话就会继续撑大父类的盒子的
外边距：
margin-left:20px;
margin-right:30px;
margin-top:40px;
margin-bottom:50px;
连写：
margin:20px;如果像这样只有一个参数的时候就代表四周围都是20px的。
margin:20px 30px;如果是像这样的，只有两个参数的，第一个是上下，第二个是左右。
如果是四个参数的就是上、右、下、左
如果是三个参数的就是 上、左右、下
垂直方向外边距合并、外边局塌陷：
垂直方向的两个盒子，如果都设置了垂直方向外边据，取的是设置的比较大的值。
外边局塌陷：
嵌套的盒子，直接给子盒子设置垂直方向向外边距的时候，会发生外边据塌陷。
解决办法：给父盒子设置边框border。
给父盒子设置 overflow:hidden bfc格式化上下文
几个案例：
爱宠知识练习：
清楚和浏览器的间隙：
margin:0;
padding:0;
个人资料案例：
文档流：元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父元素的边框换行。
浮动布局：
Float:left||right 一个是向左浮动，还有向右浮动
如果一浮动了，那么二就会占据一的位置，但是不会覆盖一，也就是一飞起来了，二到了一的底下
元素浮动之后不占据原来的位置，也就是脱标了。
如果两个盒子都浮动，那么他们就在同一行显示，块元素在一行显示，
如果想让元素在屏幕右边显示的话，就让他右浮动。
行内元素浮动之后就会转换成行内块元素的，不过最好别用，转行内块最好用display:inline-block;
浮动的作用：
1、文本绕图---把文字设置成浮动就行了，但是文字和图片元素之间是不会覆盖的，没有重叠关系。
2、制作导航
3、网站布局
如果导航中的文字是居中的，那么给他定义两个div，第一个div是导航，第二个div设置文字居中。
当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误：
清除浮动不是不用浮动，而是清楚浮动产生的不利影响。
清除浮动的方法：
clear:left|right|both 开发中最常用的就是clear|both;
1、额外标签法：
在最后一个浮动元素后添加标签。
但是用不上，非常不专业。
2、给浮动的父级元素使用：overflow:hidden;
3、最完美的方法，直接写：
代码看不懂，名字叫做伪元素清除浮动。
css初始化和overflow属性：
为了兼容所有的浏览器，在编写代码的时候需要进行初始化，
overflow介绍：
overflow属性规定当内容溢出元素框时发生的事情
四个属性：
visible|hidden|scroll|auto
大概的意思就是内容溢出div时，可以显示，也可以设置成不显示
visible：内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，就算内容不出现盒子，也会出现滚动条。
定位：
position:static;静态定位，这个不用写，是默认值。
position:absolute;
1、元素使用之后不占据原来的位置，（脱标了）
2、元素使用之后，位置从浏览器出发的，。
3、嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，位置从浏览器出发。
4、嵌套的盒子，父盒子使用定位，子盒子使用绝对定位，位置从父盒子出发。
调整有素的重叠顺序：
z-index:1; 值越大，就在上面显示。值的默认是0-999。
相对定位：
position:relative;也是四个方向，方向是上下左右。
1、相对定位是相对于自己出发的。
2、移动之后，还占据原来的位置。
子绝父相：
父元素相对定位，子元素绝对定位：
子元素的位置从父元素出发，出发之后还没有其他的元素占据子元素以前的位置，因为父元素是相对定
位，
行内元素使用相对定位是不能转为行内块元素的。
如果想让一个图标随意的在页面中显示，那么就弄成子绝父相。
固定定位：
position:fixed;
特点：固定定位之后，不占据原来的位置。
位置是从浏览器出发的
行内元素使用固定定位之后，会转为行内块元素，不推荐使用，因为会脱标。
border:
border: 100px solid green;看清参数样式顺序
border-width;宽度
border-style;样式
border-color;颜色
参数：
solid----实线
dashed----虚线
top：上
right：右
bottom:下
left：左
padding：