css扁平化博客学习总结（四）content代码实现_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.一旦子元素浮动，父元素就会探索到一个合适的值，现在的值就是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布局
标题标题标题
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频