CSS基础强化

Posted 2022-02-07 var-chu

1. 浮动引起元素变成行内块元素-display:inline-block

<div style="width: 400px;height: 200px;">
    <span style="float:left;width: auto;height: 100%;">
        <i style="position: absolute;float: left; width: 100px;height: 50px;">
            hello
        </i>
    </span>
</div>

效果：
div正常宽高
spanwidth:0;height:200px
iwidth:100px;height:50px

所有元素经过浮动变为行内块元素 -- span不是块级元素，不支持宽高,浮动后支持宽高，height:100% 即是200px。i中绝对定位，脱离文档流，不占父级空间，所以span的width:0;
上面解析：W3C中，float会使元素产生块级框，可以理解为inline-block;但是inline-block元素之间会默认产生空白符，而flaot之间没有。虽然float脱离了文档流，但是div仍然是span的父元素，因此height:100%;也就是继承了父元素div的高度200px。i设置了postion，脱离了文档流，并不影响父元素,所以span的width:0px;

2. 显示不全的文字 ... 表示

.ellipsis 
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow:hidden;

3. 关于各种对齐