css扁平化博客学习总结（四）content代码实现

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

<div class="content"><!-- 内容开始 -->
　　<section class="green-section">
　　　　<div class="wrapper">
　　　　　　<h2>一个标题</h2>
　　　　　　<div class="hr"></div>
　　　　　　<p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit, laborum.</p>
　　　　</div>
　　　　<div class="icon-group">
　　　　　　<span class="icon" >item1</span>
　　　　　　<span class="icon" >item1</span>
　　　　　　<span class="icon" >item1</span>
　　　　</div>
　　</section>
　　<section class="gray-section">
　　　　<div class="article-preview">
　　　　　　<div class="img-section">
　　　　　　　　<img src="images/pic01.jpg" alt="">
　　　　　　</div>
　　　　　　<div class="text-section">
　　　　　　　　<h2>又一个标题</h2>
　　　　　　　　<div class="sub-heading">
　　　　　　　　　　我是副标题
　　　　　　　　</div>
　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, laborum.</p>
　　　　　　</div>
　　　　</div>
　　　　<div class="article-preview">
　　　　　　<div class="img-section">
　　　　　　　　<img src="images/pic01.jpg" alt="">
　　　　　　</div>
　　　　　　<div class="text-section">
　　　　　　　　<h2>又一个标题</h2>
　　　　　　　　<div class="sub-heading">
　　　　　　　　　　我是副标题
　　　　　　　　</div>
　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, laborum.</p>
　　　　　　</div>
　　　　</div>

　　</section>

 

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

<section class="purple-section">
　　<div class="heading-wrapper">
　　　　<h2>标题标题标题</h2>
　　　　<div class="hr"></div>
　　　　<div class="sub-heading">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.</div>
　　</div>
　　<div class="card-group">
　　　　<div class="card"></div>
　　　　<div class="card"></div>
　　</div>
</section>