zoukankan      html  css  js  c++  java
  • css书写规范及特殊样式

       1.CSS书写顺序:

      (1)位置:position、top、right、z-index、display、float

      (2)大小:width、height、padding、margin

      (3)文字系列:font、line-height、letter-space、color、text-align

      (4)背景:background、border

      (5)其他:animate、transition

       2.一些特殊字体样式:

        首行缩进2字符:{text-indent:2em;}

        水平居中:{text-align:center;}

        两端对齐:{text-align:justify;}

        垂直居中:{vertical-align: middle;}

        字间距2字符:{letter-spacing:2em;}

        行间距2倍:{line-height:2;}

        首字母大写及变色p:first-letter{font-size:4em;color:blue;}

       3.表格内容过长自动截取、自动换行:

      (1)表格宽度固定,内容超过自动换行

        table-layout:fixed;word-break:break-all;

      (2)表格宽度固定,超过时自动截取

        table-layout:fixed;word-wrap:break-word;

        4.导航栏固定在页面某处(相对于<body>):

        {position:fixed;left:  px;top:  px;}

        5.块级元素与行内元素:

         常见的块级元素:<div>、<ul>、<ol>、<li>、<dl>、<dt>、<h1>~<h6>、<p>

         常见的行内元素:<img>、<input>、<select>、<strong>、<span>

         行内元素若要与块级元素在一行,需要给行内元素外加上div,免得块级元素占行内元素空间导致页面混乱。

        块级元素内部不能包含其他块级元素。

        块级元素与行内元素可通过{display:inline;}与{dispay:block;}进行转换。

        6.少数html元素的margin和padding默认值不为0:

        <body>、<p>、<ul>、<li>

        7.css样式优先级概括:

        (1)由高到低:内联样式(直接写在html元素内的样式:style="")>id选择器>class选择器>元素;

        (2)引入的css样式高于写在html内的样式(<style type="text/css">);

        (3)组合样式优于继承样式。

        (4)权值相同时,标有important的优先级高。

        (5)权值比较不能盲目的计算,如10个id权值似乎与1个style权值相等,实则不然。style、id、class、元素是16进制,即相互间的进位为256位,所以1个style优先级远远高于10个id。

         8.减少页面加载时间的常用方法:

        (1)尽量不用后代选择器和子选择器。

          #id ul li.class{  } 后代选择器;

          #id>.class{  }子选择器。

         css运行是从右向左的,如后代选择器,运行时先找到.class,再依次找到li、ul、#id,写的层级越多执行速度越慢,但这种方式覆盖性更强,迫不得已时可用。

       (2)雪碧图:减少图片加载次数。(稍后有详尽介绍)

       (3)图片设定height和width值,免去浏览器加载时边加载边计算。

       (4)使用gulp,压缩代码及图片。

        9.display:table-cell(以表格样式展示)不能与float:left;及position:absolute一起使用。

       10.隐藏滚动条

    ::-webkit-scrollbar {
    height: 0;
    0;
    }
  • 相关阅读:
    小学生都能学会的python(文件操作)
    小学生都能学会的python(深浅拷贝)
    小学生都能学会的python(小数据池)
    小学生都能学会的python(字典{ })
    小学生都能学会的python(列表[ ])
    小学生都能学会的python(编码 and 字符串)
    小学生都能学会的python(一)2018.9.3
    Ionic常用命令
    Ionic1.x项目中的Installing npm packages问题
    hdu1005
  • 原文地址:https://www.cnblogs.com/luoyishamai/p/4955860.html
Copyright © 2011-2022 走看看