CSS世界中一些冷门知识

最近看到一篇css的文章，有关css的一些常用但容易被忽略的知识，把一些个人觉得有用，但是自己平常工作中忽略的记录下来，以便下次使用

清除浮动

// 1、给浮动元素的父级添加calss
.clear:after {
    content: "";
    display: 'block';
    clear: both;
}
// 2、给浮动元素的父级添加overflow: hidden 触发BFC，块级格式化上下文，使其生成一块独立的渲染空间
.clear {
    overflow: hidden； // 或则 auto 也可以
}

inline-table内联表格特性

display: inline-table;

取消textarea的自由改变大小

resize: none

通过content获取标签上的内容 attr(val)

<img alt="美女沉思图" data-src="1.jpg">
img::after {
    /* 黑色alt信息条 */
    content: attr(alt);
}

通过content生成图片

<img>
img:not([src]) {
    content: url(1.jpg);
}

利用content属性实现图片切换

<img src="1.ipg">
img:hover {
    content: url(2.jpg)
}
<h1>这是一个文字将被替换</h1>
h1 {
    content: url(1.jpg)
}

ex 单位的天然居中效果

这种效果

 zhangxinxu<i class="icon-arrow"></i>
 .icon-arrow {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(/images/5/arrow.png) no-repeat center;
}

calc计算属性

 .box {
 	height: calc(100vh - 50px) // 注意中间的空格
 }

文字超出显示省略符号

 .ellip2 {
   text-overflow: -o-ellipsis-lastline;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;  // 控制文字可以显示多少行
   line-clamp: 2;
   -webkit-box-orient: vertical;
}

贴一个css世界书中的DOM demo.cssworld.cn/3/1-2.php