CSS随笔

注：随笔有错误，全屏本人自己开发所写，不推荐借鉴。

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-width: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、移动之后，还占据原来的位置。
3、子绝父相■  用的最多的，但是不知道是什么意思