zoukankan      html  css  js  c++  java
  • CSS 样式初始化

      去除浏览器对html的附加样式,避免不同浏览器之间的样式差异,给前端开发提供统一的样式基础。附加样式:

      .clearfix - 清除浮动

      .wordsBreak - 允许文本在任意位置的换行

      .ellipsis - 超长文本截断,以省略号显示

    @charset "utf-8";
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,button,textarea,p,table,th,td,section,img{
        margin:0; 
        padding:0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    article, aside, details, figcaption, figure, footer, header, menu, nav, section {
        display: block;
        margin:0; 
        padding:0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    ol,ul,li,dl,dt,dd {
        list-style:none;
    }
    button, input, select, textarea {
        font-family: Helvetica,Tahoma,Arial,"Helvetica Neue","Hiragino Sans GB","Microsoft YaHei";
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
        outline: none;
        border-radius: 0;
        border: 1px solid #ccc;
    }
    i,em{
        font-style:normal;
    } 
    img {
        border:none;
    }
    table{
        border-collapse:collapse;
        border-spacing:0;
    }
    html,body {
         100%;
        height: 100%;
        background: #fff;
        font-size: 14px;
        line-height: 1.4;
        font-family: Helvetica,Tahoma,Arial,"Helvetica Neue","Hiragino Sans GB","Microsoft YaHei";
        color: #313135;
        -webkit-text-size-adjust:100%;
        -ms-text-size-adjust: 100%;
        text-rendering: optimizelegibility;
    }
    a,a:hover,a:link,a:visited,a:active {
        color: #313135;
        text-decoration:none;
    }
    p,.wordsBreak{
        word-wrap:break-word;
        word-break:break-all;
    }
    .clearfix:after {
        content: "."; 
        display: block; 
        height:0; 
        clear:both; 
        visibility: hidden;
    }
    .clearfix { 
        *zoom:1; 
    }
    .ellipsis{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    

      

  • 相关阅读:
    [SDOI2012]任务安排
    JavaScript数据存储和深浅拷贝实际运用
    在VUE中使用Echarts
    JavaScript的原型链
    关于JavaScript的43道题①
    JS为什么是单线程的?
    HTTP协议②缓存
    HTTP协议①介绍
    树形结构的数据渲染(element-ui&VUE)
    js中定义变量之②var let const的区别
  • 原文地址:https://www.cnblogs.com/yangshifu/p/9289055.html
Copyright © 2011-2022 走看看