CSS flat blog learning summary (4) content code implementation_html/css_WEB-ITnose

　　

　　　　

　　　　　　

一个标题

　　　　　　

　　　　　　

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. Once the child element floats, the parent element will explore a suitable value. The current value is 0, and the floating operation needs to be cleared.

Commonly used methods to clear floats:

.article-preview:after {

　content:"";

　display:block;

height:0;

visibility: hidden;

clear: both;

It can also be written like this:

.article-preview:after {

　content: "200B";/＊There is a "zero width" in Unicode characters Space", which is U 200B, itself is invisible, so visibility:hidden ＊/

　display:block;

　height:0;

clear: both;

}

.article-preview{*zoom:1;}

Another latest method:

.clearfix{

overflow: auto;

room: 1; //Supports IE6

}

There is another one:

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

content:"";

display:table;

}

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

.article-preview{*zoom:1;}

3. Sometimes there will be a small gap between the two modules, which is probably caused by the font. Add a font-size: 0; to the outermost layer for processing.

4. The content in each element will adapt as the window changes and the element expands or shrinks.

.text-section > div{

word-wrap: break-word; /*Allow long indivisible words to be split and wrapped to the next line*/

word-break : break-all; /*Specify non-Chinese line breaking rules, allowing content to automatically wrap within words*/

​overflow: hidden; The content displays ellipsis symbols, clip directly trims the text, and string uses the given string to represent the trimmed text*/

}

5.purple-section layout

| >