首页 > Web开发 > 详细

巧用css内容生成

时间:2018-05-15 20:27:28      阅读:156      评论:0      收藏:0      [点我收藏+]

1.      .box:before{content:"生成内容";}在.box内部的内容之前加上生成内容

2.       .box:after{content:"生成内容"; 

color:red; font-weight:bold;}----只对生成的内容进行操作

3,  css设计陷阱:子元素的margin越界问题

以前的解决方法:

1   用父元素的padding代替子元素的margin
2  给父元素设置边框
3  在父元素中设置  overflow:hidden;

 问题根本:是第一个元素才会出现此问题,第二个元素不会越界
现在用内容生成解决:

父元素:before{content:""; display:table;}
没有内容则高度为0,也不允许其他元素占用一行,这样,原本的第一个元素就会变成第二个
  子元素的浮动对父元素及后续元素的影响
以往解决:后面元素加clear:both;
现在:.parent:after{content:‘‘;display:table; clear:both;}

巧用css内容生成

原文:https://www.cnblogs.com/bydzhangxiaowei/p/9042633.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!