css属性 content

　　对css一直没有很系统得学习过,练习得也不是很多,纯小白.今天在写一个页面的时候,遇到一个问题,就是如何让外面的盒子适应里面的盒子大小,完美地把小盒子包在里面.

　　由于里面是一个列表 ul,为了让元素横排,我使用了float:right这个属性,所以列表悬浮了.如图:

　　其实当然可以直接给外层id为outer的盒子定义长和宽,但我不想这样.下面是解决方法:

　 #outer ul:after{ /*使用afer伪类,用content在ul后面随便添加一点内容*/

　　　　content:"."; 　　

　　　　display:block; /*表示为块级元素*/

　　　　height:0; /*将content高度设置为0,使不影响其他样式*/
　　　　clear:both; /*清楚浮动,否则该层会在ul之上结束 */
　　　　visibility:hidden; /*隐藏它*/
　　}

　　这样就能得到想要的效果

转载于:https://www.cnblogs.com/julyys/p/4415343.html

css属性 content相关推荐

CSS 属性 content 有什么作用? 有什么应用?(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...
[css] css的属性content有什么作用呢？有哪些场景可以用到？
[css] css的属性content有什么作用呢?有哪些场景可以用到? content属性与 ::before 及 ::after 伪元素配合使用生成文本内容通过attr()将选择器对象的属性作为字 ...
网页使用Font Awesome图标字体时，css定义 content 属性
网页使用Font Awesome图标字体时,css定义 content 属性必不可少,如下所示: .icon:before { content: '\f005'; font-famil ...
css的content属性，以及如何通过css content属性实现css计数器？
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>cs ...
DW中CSS属性详解
作者:未知来源:5D多媒体在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
css超过两行显示为..._使用这些不太常用的CSS属性，布局效率上又提高了一个层次...
有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们.其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间. 作为前端 ...
css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局语音编辑锁定讨论上传视频上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
前端笔记（7）css属性书写顺序，布局流程，chrome调试工具
css样式表/层叠样式表(5) css属性书写顺序布局流程 chrome调试工具 css属性书写顺序布局定位属性 display / position / float / clear / visi ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...

css属性 content

css属性 content相关推荐

最新文章

热门文章