美文网首页
一些css的总结

一些css的总结

作者: vera1996 | 来源:发表于2017-09-07 21:44 被阅读0次

1 一行情况下用...来隐藏

````

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

````

2 文本在第二行溢出时才用...来隐藏

````

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow:  hidden;

text-overflow:  ellipsis;

````

3 紧贴于俩端:

````

display: flex;

justify-content: space-between;

````

4 竖向排列(使用flex时)

flex-direction: column;

5 背景颜色会透到边框下面。 background-clip可以设置背景的显示区域(border-box|padding-box|content-box)

box-sizing: border-box        => 设置宽高变成content+padding+border

通常情况下css设置的宽高是content的宽高

6 外边框直角,内边框圆角

````

border-radius: .8em;

box-shadow: 0 0 0 10px #655;

outline: 10px solid #655;

````

7 颜色渐变

linear-gradient(#fb3 50%, #56a 50%)       => 横向条纹

相关文章

  • 一些css的总结

    1 一行情况下用...来隐藏 ```` white-space: nowrap; overflow: hidden...

  • CSS总结(上)

    CSS总结(上) 由于最近在准备前端方面的面试,所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)...

  • 关于css结构和层叠的习题

    最近学习了css权威指南这本书,大多基于css2和css2.1的介绍。总结一些层叠样式相关的知识和习题,供自测。 ...

  • CSS经典布局

    CSS经典布局 本文主要对一些常见的CSS布局问题进行总结,涉及三栏布局、负margin、清除浮动、居中布局、Fl...

  • 前端面试之CSS

    资料来源于 50道css基础面试题进行一些扩充和总结 CSS盒模型 标准盒模型:content + padding...

  • css伪元素

    css 伪元素 详述: 这篇文章是继 css的伪类 与 css 伪类选择器 后的 CSS伪元素总结, 意在总结连贯...

  • CSS常用的一些总结

    网站图标 favicon.Ico转换: www.bitbug.net markdown在线编辑网站 dilling...

  • 五个最新的CSS特性以及如何使用它们

    虽然CSS简单,但CSS是一门非常有意思的语言,CSS每年都有变化,而且都有不同的博主都在不同的时间段总结一些CS...

  • 五个最新的CSS特性以及如何使用它们

    虽然CSS简单,但CSS是一门非常有意思的语言,CSS每年都有变化,而且都有不同的博主都在不同的时间段总结一些CS...

  • css reset 总结

    css reset 的总结

网友评论

      本文标题:一些css的总结

      本文链接:https://www.haomeiwen.com/subject/cbjwjxtx.html