浮动

1 什么是浮动

浮动就是CSS属性当中的一个属性

2 浮动的作用

用浮动将多个块级元素并排

3 浮动的性质

• 1 浮动具有脱标性

浮动的元素会脱离标准文档流，意味着它在标准文档流中不在占有位置，如果一个盒子没有设置高度，本来它的高度是由他里面的几个盒子撑开的。如果我们让这几个盒子全部浮动，那么外部的盒子将没有高度。
原因：外部盒子还是停留在标准文档流中，而内部的几个盒子全部都已经脱离标准文档流，无法再去撑开外部的盒子。

• 2 浮动具有字围性

浮动的字围性，当一个盒子浮动，它的弟弟如果不浮动，那么弟弟会钻到哥哥下面，但是弟弟盒子中的文字不会钻到哥哥下面去，而是会围绕着哥哥去排列。

• 3 浮动具有紧贴性

一个家族内，所有的儿子都浮动，那么这几个兄弟会按照浮动的方向依次紧贴。如果爹的宽度不够，最后的一个兄弟容不下，那么它会换行，但是也是会按照规律去找人紧贴。最后一个兄弟会从它的小哥的底部往浮动的方向去看，看到谁就贴谁。如果是兄弟就贴兄弟，如果兄弟都看不到再贴爹。

在我们初玩浮动的时候，记住，浮动描述的是一个悲惨的家族史。爹不浮动，儿子要浮动全浮动，要不浮动，干脆都别浮动。

4 浮动的元素的特性

• 1 浮动的元素不在有行块之分

脱离了标准文档流，在标准文档流中才有行块之分。不在标准文档流中是不会有行块之分，所有的元素都同等对待，都可以设置宽高。如果不设置宽高，都是由内容撑开的高度。

• 2 浮动的元素不再有margin塌陷

浮动的元素因为不在标准文档流中，所以不会再有垂直方向上的塌陷现象。
而且不会再有标准文档流中的踹爹问题。

5 浮动的负面效果

浮动描述的是一个家族，父亲不浮动，待在标准文档流中，儿子全浮动，脱离标准文档流。

• 当父亲设置了高度，就算儿子全部脱离，父亲的高度还是存在，在标准文档流中还是占据位置。
• 当父亲不设置高度，那么儿子如果全部脱离，父亲的高度全为零，在标准文档里流面相当于不占位置。

• 1 当父亲设置了高度，那么儿子浮动，不管怎么浮动，都不会带来毁灭性的效果，因为有父亲存在。
• 2 当父亲没有设置高度，如果儿子浮动，那么会带来很严重的后果；假设，这个家族下面又来了另外一个家族，而另外一个家族没有浮动，那么这个家族将会整体钻到上面家族那几个浮动元素的下面。这样的效果是我们不愿意看到的。造成这样后果的就是父亲没有了高度，所以我们需要去想办法把这个问题解决掉。

6 清除浮动带来的负面影响的方式

现在我们知道浮动的负面影响是因为父亲没有高度，所以要想清除它带来的影响，我们最终的目的是要让父亲找到自己的高度。

• 1 给父亲设置高度
• 2 家里建墙法

  在浮动的家族最后，放一个空的div，然后对这个空的div设置clear：both；清除浮动。

• 3 文本溢出隐藏法

  这个方法也很简单，但是没有原因。文本溢出本来是CSS一个属性，overflow：hidden；文本溢出隐藏。它们真正的作用是让一个溢出的文本隐藏掉。但是这帮老油条发现这个属性，可以用来清除浮动，并且效果很好。

• 4 隔山打牛法

  这个方法是在两个家族之间放一个空的div，然后对这个空的div添加clear：both；清除浮动。这个方法可以不让第二个家族钻到第一个家族的下面。但是，用这个方法也不会让第一个家族的父亲，找到高度。还有隐藏。

a标签的美化

div li a:link{color: white;
}
div li a:visited{color: yellow;
}
div li a:hover{color: red;background-color: green;
}
div li a:active{color: pink;
}

• a 标签和其他标签不同，他存在多种状态，每个状态都可以去设置a标签的样式。一般我们在设置a标签的时候，如果是和盒子有关的全部在a里面去设置。如果设置的是盒子的一些文本的样式和背景的样式，要在伪类中去设置；
• a标签存在4个伪类，a:link a:visited a:hover a:active
  这4个伪类在设置的时候有先后顺序，遵循爱恨原则，先爱了再恨；

  设置顺序：a:link a:visited a:hover a:active
  (第四个状态因为时间太短所以基本不用。)

border-radius

• border-radius:50%

设置边框的弧度，这个弧度可以是一个值，代表四个角的弧度所组成的圆，横向和纵向半径都是对应边框的50%。

• border-radius:50% 30%

如果是两个值
第一个值代表左上和右下两个角的弧度所组成的圆，横向和纵向半径都是对应边框的50%；
第二个值代表右上和左下两个角的弧度所组成的圆，横向和纵向半径都是对应边框的30%。

• border-radius:50% 30% 20%

第一个值代表左上角的弧度所组成的圆，横向和纵向半径都是对应边框的50%；
第二个值代表右上角的弧度所组成的圆，横向和纵向半径都是对应边框的30%；
第三个值代表右下角的弧度所组成的圆，横向和纵向半径都是对应边框的20%；
左下角没设置，和右上一样。

• border-radius:50% 30% 20% 10%

第一个值代表左上角的弧度所组成的圆，横向和纵向半径都是对应边框的50%；
第二个值代表右上角的弧度所组成的圆，横向和纵向半径都是对应边框的30%；
第三个值代表右下角的弧度所组成的圆，横向和纵向半径都是对应边框的20%；
第三个值代表左下角的弧度所组成的圆，横向和纵向半径都是对应边框的10%；

• border-radius:50% 30% 20% 10% / 50% 30% 20% 10%

当这种设置的方法
/之前设置的四个角对应圆横向的半径
/之后设置的四个角对应圆宗向的半径

CSS雪碧图（CSS精灵图）

CSS雪碧图又称CSS精灵图（css sprite）它是一门很NB的图像合成技术。在前端中应用广泛。

div{float: left;background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2119980335,793912638&fm=26&gp=0.jpg);width: 80px;height: 80px;
}
.w{background-position: -170px -225px;
}
.d{background-position: -215px 0px;
}
.s{background-position: -380px -149px;
}
.l{background-position: -320px -70px;
}
.o{background-position: -80px -145px;
}
.v{background-position: -90px -220px;
}
.e{background-position: -295px 3px;
}

<div class="s"></div>
<div class="s"></div>
<div class="s"></div><div class="l"></div>
<div class="o"></div>
<div class="v"></div>
<div class="e"></div><div class="w"></div>
<div class="d"></div>
<div class="d"></div>

CSS雪碧图主要是为了解决网页加载效率而出现的，如果每一个小图标都是一个单独的图片，也就是说这个图片有自己独立的路径地址，那么在加载的时候会和服务器建立一次链接，虽然图标不大，下载速度也很快，但是因为每加载一张就会建立一次链接，建立链接需要三次握手四次挥手，小图标多的话，建立链接的时间就很长了。因此用雪碧图可以很好的解决这个问题。雪碧图把所有的小图标都合成在一张图片上，那么在加载的时候就会和服务器之建立一次链接请求就可以了。

定位

定位也是css当中属性的一种，定位是position，它有5个值。每种定位都暗藏玄机。（主要解决层叠）

static 静态的意思，
relative 相对定位，
absolute 绝对定位，
inherit 继承父元素，
fixed 固定定位

• 1 static 是默认值，标准文档流中是什么样子，他就是什么样子。

• 2 relative 是相对定位，它用的也不多，主要用来微调元素，还用来作为子绝父相的参照。通过相对定位的元素不会脱标。

  相对定位参照的是自己出生的位置。（形影分离，老家留坑。也就是说它的内容会任意的随自己设置，但真正的位置还是在出生的位置。）

• 3 absolute 绝对定位，在我们以后用的非常多，后期做一些动画、层叠，都要用到absolute。

  这个定位不是相对自己，它相对的是离自己最近的一个定位祖先：绝对定位的元素会脱离标准文档流

  • ①如果这个元素没有祖先，那么这个绝对定位的元素会相对body去定位，left top相对body左上角，right top相对body右上角。left bottom，是相对body首屏可视界面的左下角，right bottom，是相对body首屏可视界面的右下角
  • ② 如果这个元素有祖先，但是祖先都不定位，这个情况有祖先和没祖先一样，都是相对body去做定位。
  • ③ 如果这个元素有祖先，祖先都定位，这个绝对定位的元素会相对离他最近的那个定位的祖先去做定位。一层一层往上找，谁定位的就相对谁。

• 4 inherit 从父元素继承 position 属性的值

• 5 fixed 固定定位，相对浏览器

谁该压着谁 z-index

所有的定位的元素都有一个z-index值，这个值决定了谁离客户最近。Z-index值可以是负无穷到正无穷。它的值越大那么离用户越近。

• 1 定位的元素永远会压着没定位的元素。
• 2 定位的元素是兄弟，同属于一个家族，如果这些兄弟都定位，但是z-inde值大小相同，那么会按照出生顺序去层叠。最后出生的会在最上面，离用户最近。如果z-index不相同，那么谁的大，谁就在最上面。
• 3 定位的元素是兄弟，不是一个家族，如果爹没有z-index值。那么这两个家族的所有兄弟，看自己的z-index值。如果相同，按照出生顺序层叠，如果不同谁的大，谁在最上面。如果爹有z-index值，那么爹怂儿子值再大也不行。

其他

英文字符的换行word-wrap word-break

1 word-wrap：可以换行英文字符，但是他可以区分出单词，不会吧单词分隔开，如果有一个特别长的单词，会被换行去写。
2 word-break：他也可以换行英文字符，但是他不论是不是一个单词，都会把一整行写满，等这一行写不下去了在换行。

inline-block

将标签转换成行内块元素，让行内元素具有块元素的特性

overflow

overflow：auto；当文本没有溢出的时候，没有滚动条，当文本超出的时候，自动在相应的方向上添加滚动条。

让盒子隐藏的几种方式

background-color:(0,0,0,0) 只影响颜色透明度 不影响内容

这样的设置，是让设置的颜色全透明，也就是说这样的设置通常用来给颜色值添加，他仅仅会让设置的颜色透明度增强。

opacity：0 透明度为0 盒子还在 内容也透明

这个设置通常用在对一个盒子整体添加，它是透明的意思，如果给一个盒子添加这样的属性，那么这个盒子内部所有的东西都会透明度增强。值为0时，代表透明度最强，盒子看不见，但是位置还在。

visibility：hidden 可视化隐藏 盒子还在

这个设置，通常也是给盒子添加，让盒子的可视化隐藏，这样设置的盒子，位置还在，但是无法被选中，和opacity有点类似。

display：none 盒子消失

这个设置，通常是让一个盒子表现为空，也就是说添加了这个属性，盒子消失不见，位置也会不存在的。