css中的一些属性解析

时间：2017-01-07 22:22:02 阅读：290 评论：0 收藏：0 [点我收藏+]

标签：空间 box 支持 lock absolute 元素 wrapper 字符 blog

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: 0;
}
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: 1;
}