资讯专栏INFORMATION COLUMN

css

alin / 911人阅读

摘要:此处为,因此宽高均为如果为其他颜色,则红色区域为。文字单行显示并且超出时结尾显示需要三个属性一起使用来达到以上效果清除浮动在需要清除浮动的元素上面添加类

background-color属性

问上面代码中红色区域的宽度和高度各式多少?

这道题考点有样式的叠加,同时还要考虑background-color的范围。

答案:160px,160px。background-color包括content、padding和border。此处border为transparent,因此宽高均为160px;如果border为其他颜色,则红色区域为140px。

文字单行显示并且超出时结尾显示“…”

需要三个css属性一起使用来达到以上效果

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
清除浮动

在需要清除浮动的元素上面添加clearfix类

.clearfix:after{
    content:"";
    clear:both;
    display:block;
    overflow:hidden;
    height:0;
    visibility:hidden;
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111796.html

相关文章

  • [译]148个资源让你成为CSS专家

    摘要:层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性,一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南,包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。 迄今为止,我已经收集了100多个精通CSS的资源,它们能让你更好地掌握CSS技巧,使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

    impig33 评论0 收藏0
  • 简单易懂的CSS Modules

    摘要:结果是选手获胜,名为的元素,最终的值为。而合理的命名约定,的确是组织代码的有效策略。它们会再由转换为适当的组合。虽然本文为了严谨,结果写了相当长的篇幅,但希望你读过之后,还能觉得是简单易懂的。 不要误会,CSS Modules可不是在说css模块化这个好像在某些地方见过的词,它其实是特指一种近期才出现的技术手段。 什么技术手段呢?请待后文说明。 层叠样式表 我们知道,css的全名叫做层...

    chunquedong 评论0 收藏0
  • CSS Modules实践

    摘要:能最大化地结合现有生态预处理器后处理器等和模块化能力,几乎零学习成本。编码相关的所有样式上例中打印的结果是注意到是按照自动生成的名。实践手动引用渲染结果使用可以实现使用属性自动加载模块。 文章同步于Github Pines-Cheng/blog 随着前端这几年的风生水起,CSS作为前端的三剑客之一,各种技术方案也是层出不穷。从CSS prepocessor(SASS、LESS、Styl...

    hankkin 评论0 收藏0
  • 【译】编写更好的CSS必备的40个工具

    摘要:一个叫的人用纯重绘并模拟了种不同的移动设备包括可以给你的网站添加不相关的独立组件的一个库。每一个组件都是针对移动设备定制的,并且它有很多你在传统的框架中看不到的功能。如果你用开发移动优先的网站,并想要网站正常运行在低版本的上,可以考虑。 众所周知,CSS是非常棒的,它使网站看起来很漂亮,可以为网站添加动画,并让呈现和内容分离。去了解CSS的一切是非常难做到的,它只会变得更加困难,因为我...

    moven_j 评论0 收藏0
  • SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

    摘要:层叠即表示允许以多种方式来描述样式,一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用后,将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

    elliott_hu 评论0 收藏0
  • CSS Modules详解及React中实践

    摘要:上例中打印的结果是对中的名都做了处理,使用对象来保存原和混淆后的对应关系。结合实践在处直接使用中名即可。如因为只会转变类选择器,所以这里的属性选择器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端领域中进化最慢的一块。由于 ES2015/201...

    wemall 评论0 收藏0

发表评论

0条评论

alin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<