今天完成的事情:

1. 消除 inline-block 出现4px 间距的方法  和 vertical-align

——————————————————————————————————————————————————————————————

在火狐F12上

如上图，两个 inline-block 行内块级元素并排在一起就会出现这个间距。就像文字连在一起的时候也有个默认字间距（latter-spacing）

会产生间距的原因是我们在写html标签的时候换了行或者加了空格

解决方法：

（1）改变 html 结构

    不换行：

   不加空格：

但是如果html结构太多，我们这种做法会累死自己。

所以我们可以用css 改

（2）在父元素上设置 font-size 为 0；  (心态崩了，写了一大段不小心刷新就回到这里了，没了。。。)

这样间距就没了。

缺点：父元素设置了字体为0后，子元素的字体大小也为0了。所以用这个方法子元素就需要重新设置字体的大小。

(3)在父元素上设置 letter-spacing 为 -4px；

缺点也是一样的，会作用于子元素

说完inline-block 就来说和它息息相关的 vertical-align

简单来说，这个属性控制的是行内元素在垂直方向上的对齐方式。

父元素内只有一个行内元素时，它是不起作用的，因为它找不到其他基友，所以没有基线。

我们在上面的例子中加一个图片上去

在没有文字的时候，它的基线就是margin-bottom了。看不出来是把。我们给img加margin-bottom

这样看基线就是margin-bottom。

这时候我们来设置图片的 vertical-align

基线就变成下面那样了。

我们再来设置 橙色方块的 vertical-align

效果：

基线就是中间了

（保存一下压压惊！！）

我们上面说了无文字的时候，现在来说有文字的时候，有文字的时候就是以最后一行文字为基线

结构是这样的

效果：

还有一种，就是flex布局  属性 align-items 设置为 baseline 时

也是以文字为基线对齐，这时候是第一行文字为基线

2. css3 transform 

——————————————————————————————————————————————————————————————

transform 有很多好玩的属性

translate 有点像 position:reletive.如果它用百分比为单位时它就比相对定位强了。因为它的百分比是以自身的宽高为基础的。

利用它来实现 不固定宽度块的水平垂直居中。

设置子元素相对定位偏移50%

效果

再加上translate属性

这样就是实现了垂直水平居中了

再来看一个 rotate 旋转属性。它有三条轴，xyz.

我是这样理解的，我们的x轴，就是屏幕的水平线，拿起手指，跟屏幕的水平线 平行。然后想象你的手指是螺丝刀，你正在拧螺丝，转动起来。你手指旋转的方向 就是 rotateX  X轴的旋转方向了。

3. calc()

——————————————————————————————————————————————————————————————

相见恨晚的一个属性。这是一个计算函数，切图时可以把你一切不想计算的东西还有一些计算不了的东西,比如

calc(50% + 20px) 

+ - / * 号的两边都要加空格。 还有能加单位的一定要加单位。

4.正向代理和方向代理的区别

——————————————————————————————————————————————————————————————

之前在师姐的日报看过这两个的区别，不过以我的尿性早就忘光了。

正向代理和反向代理都是在客户端和服务器端中间加多一个代理服务器。

正向代理：代理服务器是我们的中介，我们发出去的请求，它先接收了，然后边成它去发请求了。

反向代理：代理服务器假装自己是服务器端，去接收我们的请求。再发送到服务端

两者最重要的区别在于操作上,

正向代理我们客户端需要进行配置，比如翻墙，我们需要在电脑上设置代理网络。

反向代理客户端不需要做任何改动。

贴一张知乎的图

5.圣杯布局和双飞翼布局

——————————————————————————————————————————————————————————————

这两个布局都是 实现 左右两边固定，中间自适应的布局。其实实现方法也差不多。

结构我们这样设置

说说共同点：

1.两边都是固定宽度（假设100px），中间width:100%;

2.三个元素都设置float:left;

（编辑器有个bug:图片只能缩小不能放大。orz)

3. left 设置margin-left:-100%;(起飞)

4.right 设置margin-left:-100px (自身宽度的相反数)

还没完，这时候红色和蓝色只是霸占在褐色上而已。还没有离开它。

下面的操作就是圣杯布局和双飞翼布局的区别了。

先讲圣杯布局：褐色它非常强势，恐吓红蓝色，父元素parent可怜它们，给他们padding出一些位置，后来红蓝色就自己reletive走了。

首先 父元素 设置padding

左右两边都空出位置了。

红蓝色就reletive 出去了。

红色left:

蓝色right

这就是大名顶顶的圣杯布局。

再来讲双飞翼布局（不是双飞）

上面的结局就忘了把，这次轮到红蓝色霸道了，就是不走，褐色你爱走不走。

褐色没办法了，为了美，不能让他们污染了。

褐色最后想到的办法就是自己修建城堡，隔离他们。

其实就是给自己加多一个div 啦。

然后给自己加 个左右外边距

顺便换个颜色 

再也不用和你们住一起了。

(保存保存 - - !)

明天计划的事情：

没计划就是我的计划。。

遇到的问题：

最近做任务8 总是能遇到一个让我烦死强迫症的布局，让我好几天都不想做css了。

好在今天我终于突破自己了。

来看看这个布局的面目。

这个布局就是要两端对齐贴边：

间距要一样。

我们可以设置每个方块的maigin-right ，但是最后一个要怎么办？ 手动去取消？不不不，我不要这么蠢。而且如果容器宽度缩小了，元素自动换行，边距不在，英雄Ui,难道又要重新加上？

我这个新手就被它困住了，今天刚好逛一个网站，看到他们也是这种布局，马上f12它。

它们在容器里面再加一个容易

原本布局是这样的。

再加一个div

假设wrap是1200px item边距是20px.那么这里设置 content 是1220px.溢出20px 可以给最后一个方块留位置。

这个布局自然就出来了。

同时解决这个问题也解决了另外一个疑惑。

boostrap中 container 是设定的 比如1124.

但是我们可以设置row的宽度，你想设置多少就多少。

比如1200px,不过要注意，它是向左边溢出的。

然后栅格就是根据 1200 来分了。col-md-2  那它就是200px了。

那么，

使用boostrap 布局怎么 五等分 十等分呢？

其实栅格就是浮动，浮动要等分，就是设置宽度的百分比。分成两半就是 100/2=50%  

那分成五份就是 100/5=20；

你给它起个名字，col-md-1-5  。设置它的width:20%;float:left；

那它就是你的人了。 

收获：

昨天坑了师姐一篇日报，今天好好写一份