css中的一些属性解析

1、inline-block

存在问题：inline-block的相互间距，元素之间会有一个左右2px的margin一样产生

请看中间的空隙。

为什么会产生这个空隙呢？？

怎么解决呢？

方案1：使子元素在html中无缝排列

<ul>

      <li>one</li>

      <li>two</li>

      <li>three</li>

</ul>

<!---变成下面的---->

<ul>

      <li>one</li><li>two</li><li>three</li>

</ul>

方案2：将父元素字号设置为0；然后在li元素上恢复字号大小

ul {

    font-size:;

}

li {

    font-size: 12px;

}

2、iconfont字体

3、margin值：

负值：margin 设置负值需要根据设置的方向以及元素是否浮动以及其定位方式来判断最终的行为

---------------------参考https://gold.xitu.io/post/58037f4a0bd1d000580dccd8-------------------

　　a、无浮动，无定位：

　　　　　　　　　　　top 或者 left: 元素会按照设置的方向移动相应的距离（margin-left: -100px;。那么，元素会往左移动 100px）

　　　　　　　　　　　bottom 或者 right：元素本身并不会移动，元素后面的其他元素会往该元素的方向移动相应的距离，并且覆盖在该元素上面（设置 margin-right: -100px;。那么，元素本身并不会移动，后面的元素会向左移动 100px 到该元素上）

　　 b、无浮动，position 为 relative：同a

　　c、无浮动，position 为 absolute： top 或者 left同a bottom 或者 right 脱离文档流对后面的无影响

　　 d、有float浮动：

　　　　　　　　　　float方向同 margin的负方向 (float: right; margin-right: -100px;都是right) 元素会往对应的方向（right）移动对应的距离

　　　　　　　　　　float方向反 margin的负方向 (float: right; margin-left: -100px;都是right) 则元素本身不动，元素之前或者之后的元素会向该元素的方向移动相应的距离（该元素左边的元素则会向右移动 100px，同时覆盖在该元素上）

　　e、两个元素都有float（许多经典布局的案例）：这种行为与没有既没有设置浮动也没有设置定位的表现类似

　　　　　　　　　　案例： 一列定宽的两列流式布局两边固定，中间自适应的三列布局（双飞翼布局）

4、float：

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素(向漂浮起来左右移动的气球)

对多个元素设置浮动，可以实现类似inline-block的效果；但是如果每个元素的高度不一致，会出现“卡住”的情况。

浮动的负面作用就是：高度塌陷，那么就用到了清除浮动（1、clear 2、BFC）

5、clear：

不允许使用clear的元素左边/右边/两侧（left/right/both）挨着浮动元素，底层原理是在被清除浮动的元素(使用clear的元素)上边或者下边添加足够的清除空间

　　　　 简单而言就是它不和浮动同流合污，哪怕自己掉下一层，委屈自己

<!--- 引入了一个空的div元素    不建议 ---->

<div class="box-wrapper">

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div style="clear:both;"></div>

</div>

最新版通用模式：

// 全浏览器通用的clearfix方案【推荐】

// 引入了zoom以支持IE6/7

// 同时加入:before以解决现代浏览器上边距折叠的问题

.clearfix:before,

.clearfix:after {

    display: table;

    content: " ";

}

.clearfix:after {

    clear: both;

}

.clearfix{

    *zoom:;

}

（总结：float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！”）

6、position：

7、border-radius：圆角　　

border-radius: 四个位置的顺序：[左上] [右上] [右下] [左下] 每个位置的计算方式：水平/垂直

原理：给元素的四个角用一个相应位置尺寸（比如左上，就是左上尺寸为半径的圆）的圆去内切此元素。

8、::after和::before中的content

1、可以取空字符串，任意字符串 content: “” content: “\e804”

2、还可以取一些属性：content: attr(id) 去dom中的attr属性

9、line-height：

　　line-height = 行间距(指相邻文本行间上一个文本行下行线和下一文本行上行线间的距离) + 字形大小(font-size)

　　行间距是在文本上下两边平均分开的

10、css中的百分数 % 百分比值是一种相对值，需要正确找到它的参照。

包含块Containing Block概念：

　　相对谁来计算：　静态定位和相对定位，包含块一般就是其父元素

　　　　　　　　　　对于绝对定位的元素，包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素

　　　　　　　　　　固定定位的元素fixed属性，它的包含块是视口（viewport）　

　　计算的具体值：乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width

看出margin和padding不管是上下还是左右都按照包含块的宽度来计算。。。（非正常）

　　　　　　　　　　乘以包含块的高度 top, bottom, height, max-height, min-height

背景定位 background-position中的百分比分别设置水平方向和垂直方向上的两个值，如果使用百分比，那么百分比值会同时应用于元素和图像。

　　例如：50% 50% 会把图片的（50%, 50%）这一点与框的（50%, 50%）处对齐，相当于设置了 center center。同理 0% 0% 相当于 left top，100% 100% 相当于 right bottom。

font-size ：百分比值应该乘以父元素的字体大小。

line-height：在没有继承的前提下，他是以自己的font-size计算的。

　　例如：font-size:20px;line-height: 100%;那么line-height: 20px;

vertical-align：参照是元素自身的line-height

　　例如，一个元素的line-height是30px，则vertical-align:10%;的效果是vertical-align:3px;。

transform：参照是元素自己的border-box尺寸（左右是宽上下是高----正常）

　　例如，一个宽度为150px，高度为100px的元素，定义transform:translate(50%, 50%)的效果是transform:translate(75px, 50px);。

border-radius：百分比值参照物是这个元素自身的尺寸，border-top-left-radius、border-bottom-left-radius left按高计算 right按宽计算？？

百分比的继承：继承原则就是父先计算，子再继承（继承的是计算后的实实在在有固定单位的），优先继承计算后的实际值，而不是继承百分比后计算

　　例如：父元素的font-size是14px，line-height:150%;，子元素的font-size:20px，那么子元素的line-height是14px*150%，而不是21px*150%。