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

1.根据功能，把不同的部分写出来，方便扩展

　　

　　　　

　　　　　　

一个标题

　　　　　　

　　　　　　

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

　　　　

　　　　

　　　　　　item1
　　　　　　item1
　　　　　　item1
　　　　

　　

　　

　　　　

　　　　　　

　　　　　　　　
　　　　　　

　　　　　　

　　　　　　　　

又一个标题

　　　　　　　　

　　　　　　　　　　我是副标题
　　　　　　　　

　　　　　　　　

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:"\200B";/＊Unicode字符里有一个“零宽度空格”，也就是U+200B，它本身是不可见的，所以可以省略掉 visibility:hidden ＊/

　　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布局

　　

　　　　

标题标题标题

　　　　

　　　　

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod luptate velit esse
　　　　　　　　cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
　　　　　　　　proident, sunt in culpa qui officia deserunt mollit anim id est laborum.