zoukankan      html  css  js  c++  java
  • css提高开发效率的必备代码

    这篇文章主要总结了一下css 2.0 一些常用/提高开发效率的代码块,都是在实际项目中遇到的。望点赞丫~

    清除浮动

    总的来说,浮动给我们实际开发带来了很高的效率,但是同样的也有很多的麻烦。其中最大的问题就是使其父元素高度塌陷,解决的办法有很多。

    第一种: 在同级元素下添加空标签 <div style=“clear:both"> </div>

         但是这样会造成大量的空标签,形成无用代码(不建议使用)

    第二种: 在父级元素添加 overflow: hidden;

         最简单的一种方式,但是会隐藏定位在盒子外的元素(不建议使用)

    第三种:  用:after伪元素解决浮动问题,如果当前层级有浮动元素,在父元素添加 .clearfix类样式即可

         .clearfix::after {

            content: “ ”;

            display: block;

            height: 0;

            clear: both;

            visibility: hidden;

            overflow: hidden;

          }

    垂直水平居中:

    css中使元素垂直水平居中的方式有很多,都有各自的优缺点,单都不能达到兼容性好,破坏力小的目标,介绍几个实际开发常用的方式:

    1. 子绝父相 : 父级添加绝对定位并且已知宽高

    ①position:absolute;

    top: 0; left: 0; bottom: 0; right: 0;

    margin: auto;

    ②position: absolute;

    top: 50% ; left: 50%;

    margin-left:   - 子集盒子宽度的一半px;

    margin-top: - 子集盒子高度的一半px;

    2. 一般简单的块类元素 margin: 0 auto;

    3.flex轻松实现垂直居中:

     display:flex;

    align-items: center;

    jutify-content: center;

    文本末尾添加省略号:

     

    当文本的内容超出容器的宽度的时候,我们下网在默认添加省略号达到内容区省略显示的效果(俗称“省略号三连”)

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

    持续更新 loading~

  • 相关阅读:
    NGINX proxy_pass 域名解析问题
    NGINX源码分析——概览
    NGINX源代码自我总结(一)
    XWindow、Server、Client和QT、GTK之间的关系
    UBUNTU 字符界面来回切换
    ECshop 数据库表结构
    通读Cheerio文档
    Node.js 0.12: 正确发送HTTP POST请求
    npm配置镜像、设置代理
    配置 Windows 下的 nodejs C++ 模块编译环境 安装 node-gyp
  • 原文地址:https://www.cnblogs.com/yizhiluo/p/yizhiluo.html
Copyright © 2011-2022 走看看