小技巧

（1）font: 12px/22px;相当于font-size:12px; line-height:22px
（2）规则 .ul.item 匹配 class 属性同时含有 ul 和 item 的元素；<div class="ul item"></div>

（3）保持图片宽高比：（a）padding-top    （b）svg

 

（a）padding-top

如果div3不绝对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>宽高比为1</title>

    <style>
    
    #div1{
        width: 200px;
    }
    #div2{
        /* width和padding-top的比例是相对于父级的，此处是相对于div1 ，这样div2的宽高就都是200px了*/
        width: 100%;      
        padding-top: 100%;
        background: red;
        position: relative;
    }

    </style>
</head>
<body>

    <div id="div1">
        <div id="div2">
           
            <div id="div3">sss</div>
        </div>
    </div>
    
</body>
</html>

 

 

div3绝对定位：（注意div3里面内容的显示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>宽高比为1</title>

    <style>
    
    #div1{
        width: 200px;
    }
    #div2{
        /* width和padding-top的比例是相对于父级的，此处是相对于div1 ，这样div2的宽高就都是200px了，但是div2的content区高度为0*/
        
        /* background会覆盖padding */
        width: 100%;      
        padding-top: 100%;
        background: red;
        position: relative;
    }
    #div3{
        /* 这里绝对定位并且设置left、bottom、right、top，这样该元素的高度就被撑开和父元素div2一样大了 */
        /* 这样div3里面的内容看上去就在div2里面，如果不绝对定位，则div3显示的内容被拉下来了 */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

    }

    </style>
</head>
<body>

    <div id="div1">
        <div id="div2">
           
            <div id="div3">sss</div>
        </div>
    </div>
    
</body>
</html>

 

ATTENTION：对一个div设置背景会覆盖padding

 

（b）svg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>宽高比为1</title>

    <style>
    
    #div1{
        width: 200px;
    }
    #div2{
        /* width和padding-top的比例是相对于父级的，此处是相对于div1 ，这样div2的宽高就都是200px了，但是div2的content区高度为0*/
        
        /* background会覆盖padding */
        width: 100%;      
        background: red;
        position: relative;
    }
    #div3{
        /* 这里绝对定位并且设置left、bottom、right、top，这样该元素的高度就被撑开和父元素div2一样大了 */
        /* 这样div3里面的内容看上去就在div2里面，如果不绝对定位，则div3显示的内容被拉下来了 */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

    }
    svg{
        /* svg本来将width和height设置为1，即为1X1 */
        /* 现在width 100%，即width和div2同宽，为200px；而height为auto即为自适应，所以为了保持原来对1:1，height就为200px了， 这样就实现了200X200*/
        /* 所以说这里的svg是为了撑开div2，使之变成200X200 */
        width: 100%;
        height: auto;    
    }

    </style>
</head>
<body>

    <div id="div1">
        <div id="div2">
                <svg width="1" height="1"  xmlns="http://www.w3.org/2000/svg" >
                    <div id="div3">sss</div>
                </svg>
            
        </div>
    </div>
    
</body>
</html>

 

 （4）SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

css可以使用SVG

.logo {
  background: url(icon.svg);
}

SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页

<img src="data:image/svg+xml;base64,[data]">

 

posted @ 2019-01-09 11:38  emmaa  阅读(114)  评论(0)  编辑  收藏  举报