css小技巧1

时间：2021-09-19 07:20:15

资料

1. 文本省略

单行省略：

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

多行文本省略：

  1. 只兼容webkit内核，不属于css规范：
    width: 200px;

    overflow: hidden;

    text-overflow: ellipsis;

    /** 隐藏超出的内容 **/

    display: -webkit-box;

    /** 对象作为伸缩盒子模型显示 **/

    -webkit-box-orient: vertical;

    /** 设置或检索伸缩盒对象的子元素的排列方式 **/

    -webkit-line-clamp: 3;  /** 显示的行数 **/
  1. 只兼Opera 10.60 +，也不属于css规范：
    p {

        overflow: hidden;

        white-space: normal;

        height: 3em;

        text-overflow: -o-ellipsis-lastline;

    }
  1. css模拟出的样式
    p {

        width:200px;

        position: relative;

        line-height: 1.4em;

        /* 高设置为行高的三倍 */

        height: 4.2em;

        overflow: hidden;

    }

    p:after {

        content: "...";

        font-weight: bold;

        position: absolute;

        bottom: 0;

        right: 0;

        padding: 0 20px 1px 45px;

    }

2. word-wrap和word-break

对于单词浏览器默认行为：

  1. 如果有一个单词很长，导致一行中剩下的空间已经放不下它时，则浏览器会把这个单词挪到下一行去
  2. 当一个单词的长度超过父容器就会溢出

word-wrap

  1. 兼容：几乎全部主流浏览器。
  2. 该属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
  3. 解决了浏览器的第二个默认行为
    //该属性常用值：

    break-word	在长单词或 URL 地址内部进行换行。

word-break

  1. 兼容：除了opera都兼容
  2. 该属性用来标明怎么样进行单词内的断句。
  3. 同时解决了浏览器的两个默认行为
    //该属性常用值：

    break-all	允许在单词内换行。

    keep-all	只能在半角空格或连字符处换行。

3. line-height

    length	设置固定的行间距。

    %	    基于当前字体尺寸的百分比行间距。

    number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

4. href和src

  1. href

    <link rel="stylesheet" href="css/demo.css"/>

    <a href="https://www.baidu .com">
  2. src

    <script style='text/javascript' src='js/demo.js'></script>

    <img src="" alt="">

    <iframe src="">

区别：

  1. href 表示超文本引用（hypertext reference）；src 表示来源地址（source）
  2. href 的内容，是与该页面有关联，是引用；src 的内容，是页面必不可少的一部分，是引入。
  3. href用于在当前文档和引用资源之间确立联系，会并行下载资源并且不会停止对当前文档的处理；src用于替换当前元素，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕

4. 处理网站logo及一些重要图片

    h1 {

      text-indent:-9999px;

      background:url("title.jpg") no-repeat;

      width:100px;

      height:50px;

    }

5.去最后一个li的边框（:not兼容ie9+）

    .nav li:not(:last-child) {

      border-right: 1px solid #666;

    }

6.伪类(:)和伪元素（:: 此写法兼容ie9+）

伪类：用于向某些选择器添加特殊的效果。

  1. :link 向未被访问的链接添加样式。
  2. :visited 向已被访问的链接添加样式。
  3. :hover 当鼠标悬浮在元素上方时，向元素添加样式。
  4. :active 向被激活的元素添加样式。
  5. :focus 向拥有键盘输入焦点的元素添加样式。
  6. :first-child 向元素的第一个子元素添加样式。
  7. :lang 向带有指定 lang 属性的元素添加样式。

伪元素：用于将特殊的效果添加到某些选择器。

  1. :first-letter 向文本的第一个字母添加特殊样式。
  2. :first-line 向文本的首行添加特殊样式。
  3. :before 在元素之前添加内容。
  4. :after 在元素之后添加内容。

将会在内容元素的前后插入额外的元素，可以类比普通元素使用，但是在源码中找不到

操作伪元素：

  1. content:添加内容（必须）,它的值可以是以下几种：

    • string(包括空串)， 会向元素内容中添加字符串 content: "↗"
    • url 用于引用媒体文件 content: url( "img/icon.png" )
    • attr() 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。
        //栗子：
    
    a::before{content: attr(title)}
    
    <a href="http://www.segmentfault.com" title="专业面向开发者的中文技术问答社区"></a>
    
    这样做相当于：
    
    <a href="http://www.segmentfault.com">专业面向开发者的中文技术问答社区</a>
    • counter() 调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。
        h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

  2. 样式可以像正常元素的样式一样和content并列书写即可

  3. 伪类和伪元素也可以结合使用

  4. 给伪元素设置了display:none;他们会从DOM树上删除，普通元素则不会

  5. 伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

相关文章