css扁平化博客学习总结（四）content代码实现_html/css_WEB-ITnose

　　　　

　　　　　　

　　　　　　　　
　　　　　　

　　　　　　

　　　　　　　　

又一个标题

　　　　　　　　

　　　　　　　　　　我是副标题
　　　　　　　　

　　　　　　　　

Lorem ipsum dolor sit amet, consectetur adipisicing elit, laborum.

　　　　　　

　　　　

　　　　

　　　　　　

　　　　　　　　
　　　　　　

　　　　　　

　　　　　　　　

又一个标题

　　　　　　　　

　　　　　　　　　　我是副标题
　　　　　　　　

　　　　　　　　

Lorem ipsum dolor sit amet, consectetur adipisicing elit, laborum.

　　　　　　

　　　　

　　

立即学习“前端免费学习笔记（深入）”；

2.一旦子元素浮动，父元素就会探索到一个合适的值，现在的值就是0，需要进行清除浮动操作。

常用的清除浮动方法：

.article-preview:after {

　　content:"";

　　display:block;

　　height:0;

　　visibility:hidden;

　　clear:both; 

}

.article-preview{*zoom:1;}

还有可以写成这样：

.article-preview:after {

　　content:"0B";/＊Unicode字符里有一个“零宽度空格”，也就是U+200B，它本身是不可见的，所以可以省略掉 visibility:hidden ＊/

LibLib AI

中国领先原创AI模型分享社区，拥有LibLib等于拥有了超多模型的模型库、免费的在线生图工具，不考虑配置的模型训练工具

647

查看详情

　　display:block;

　　height:0;

　　clear:both; 

}

.article-preview{*zoom:1;}

另一种最新式方法：

.clearfix{

    overflow: auto;

    room: 1;  //支持IE6

}

还有一种：

.article-preview:before,.article-preview:after {

　　content:"";

　　display:table;

}

.article-preview:after { clear:both; }/* For IE 6/7  */

.article-preview{*zoom:1;}

3.有时候两个模块之间会出现小缝隙，很可能是字体导致。在最外层加一个font-size: 0;进行处理。

4.每个元素里的内容，随着窗口变化，该元素扩大或缩小的时候，进行自适应。

.text-section > div{
　　word-wrap: break-word;  /*允许对长的不可分割的单词进行分割并换行到下一行*/
　　word-break: break-all;　　/*规定非中文的换行规则，允许内容自动在单词内换行*/
　　overflow: hidden;　　/*超出的内容隐藏*/
　　text-overflow: ellipsis;　　/*超出的内容显示省略符号，clip直接修剪文本，string使用给定的字符串代表被修剪的文本*/
}

5.purple-section布局