zoukankan      html  css  js  c++  java
  • 代码缩写和长度值

    1.盒模型代码简写

    还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下:

    margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

    通常有下面三种缩写方法:

    a、如果top、right、bottom、left的值相同,如下面代码:

    margin:10px 10px 10px 10px;

    可缩写为:

    margin:10px;

    b、如果top和bottom值相同、left和 right的值相同,如下面代码:

    margin:10px 20px 10px 20px;

    可缩写为:

    margin:10px 20px;

    c、如果left和right的值相同,如下面代码:

    margin:10px 20px 30px 20px;

    可缩写为:

    margin:10px 20px 30px;

    注意:padding、border的缩写方法和margin是一致的。

    2.颜色值缩写

    关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。

    例子1:

    p{color:#000000;}

    可以缩写为:

    p{color: #000;}

    例子2:

    p{color: #336699;}

    可以缩写为:

    p{color: #369;}

    3.字体缩写

    网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:

    body{
        font-style:italic;
        font-variant:small-caps;
        font-weight:bold;
        font-size:12px;
        line-height:1.5em;
        font-family:"宋体",sans-serif;
    }

    这么多行的代码其实可以缩写为一句:

    body{
        font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
    }

    注意:

    a、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。

    b、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

    一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:

    body{
        font:12px/1.5em  "宋体",sans-serif;
    }

    只是有字号、行间距、中文字体、英文字体设置。

    4.长度值

    长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。

    a、像素

    像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。

    b、em

    就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:

    p{font-size:12px;text-indent:2em;}

    上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。

    下面注意一个特殊情况:

    但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。如下代码:

    html:

    <p>以这个<span>例子</span>为例。</p>

    css:

    p{font-size:14px}
    span{font-size:0.8em;}

    结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。

    c、百分比

    p{font-size:12px;line-height:130%}

    设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。

  • 相关阅读:
    使用golang访问kubebernetes
    使用 Rancher 管理现有 Kubernetes 集群
    Running powershell scripts during nuget package installation and removal
    How to Create, Use, and Debug .NET application Crash Dumps in 2019
    寻找写代码感觉(一)之使用 Spring Boot 快速搭建项目
    Selenium+Java之解决org.openqa.selenium.InvalidArgumentException: invalid argument报错问题
    Selenium环境搭建
    关于Xpath定位方法知道这些基本够用
    Web自动化之浏览器启动
    【翻译】编写代码注释的最佳实践
  • 原文地址:https://www.cnblogs.com/sunjianfei/p/5723124.html
Copyright © 2011-2022 走看看