CSS常用技巧

作者: 老虎爱吃母鸡 | 来源:发表于2016-07-29 23:06 被阅读0次
  • CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
    CSS Sprite值的是把多个icon图片放在一张图里面,通过background-position这个属性调整背景图片的位置来达到预期效果
    1. 服务器上都每一个资源都需要加载,图片也是如此,如果有许多不同的icon,就需要有多次的http请求,如果合成一张图片就可以减少http请求的次数,从而提高加载速度
    2. 而且多张合成一张图片的大小小于这些图片的总和,所以也就减少了http请求的加载时间
  • img标签和CSS背景使用图片在使用场景上有何区别
    • 是否使用img标签取决于图片是否是内容的一部分,例如网站的logo就是内容的一部分就需要使用image标签
    • 还有img常用于需要经常更换的内容,而CSS的背景图片作为背景是不需要经常变动的
CSS Sprite
  • titlealt属性分别有什么作用
    • title是一个全局属性,主要是为元素增加一个小提示或者注释,当鼠标hover到这个有title属性的元素时,title的值会在鼠标的旁边显示出来
      title
    • alt主要是当图片无法加载的时候用来替代图片的文字内容
      alt
  • background: url(abc.png) 0 0 no-repeat;这句话是什么意思
    这句话是一个background属性的shorthand,其中的值是background-image、bakground-position、background-repeat三个属性的简写
    • background-image可以为背景引入背景图片,接受的值是一个相对URL地址或绝对URL地址
    • background-position可以指定背景图片的初始位置,其中0 0表示的是左上角
    • background-repeat表示的是背景图片是否重复,默认的值是repeat
div {
            width: 1000px;
            height: 1000px;
            background-image: url(mia.jpg);
        }
img
  • background-size有什么作用? 兼容性如何? 常用的值是?
    • background-size的作用是指定背景图片的大小
    • background-size是CSS3的属性,在IE6、7、8不支持
      background-size兼容性
    • <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
      • cover
        图片会覆盖整个背景区域,不会留下空白
      • contain
        图片被包裹在背景区域里,有可能会留下空白


        cover和contain
      • <length>
        为图片强制指定宽度和长度,若只有一个值则另一个值为auto
      • <percentage>
        相对于背景区域宽度和高度的百分比,若只有一个值则另一个为auto
  • 如何让一个div水平居中?如何让图片水平居中
    • div居中
      • 如果div是固定宽度,可以直接设置margin: 0 auto;
      • 如果div是不定宽度
        • 可以对div设置display: inline-block;,然后对父元素设置text-align: center;
        • 或者div设置display: table;,然后设置margin: 0 auto;
    • 图片水平居中
      直接text-align: center;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            border: 1px solid;
        }

        .box1 {
            width: 400px;
            margin: 20px auto;
        }

        .box2 {
            display: table;
            margin: 20px auto;
        }

        .box3 {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box1">我是固定宽度的div</div>
    <div class="box2">我是用display: table;设置的,我的宽度是内容宽度</div>
    <div class="box3">
        <img src="mia.jpg" alt="">
    </div>
</body>
</html>
居中
  • 如何设置元素透明? 兼容性?
    通过opacity: 0;不透明度这个属性来设置,它的属性值1表示完全不同,0表示完全透明,这个属性在IE8及以下只有部分支持
    opacity兼容性
  • opacityrgba都能设置透明,有什么区别
    • opacity是对元素设置透明度,可以对任何元素设置
    • rgba是通过颜色alpha通道来设置颜色的透明,只能针对颜色,例如背景颜色,字体颜色,边框颜色等颜色属性

相关文章

  • 常用的一些 CSS 技巧三

    你可以看看其他常用的 CSS 技巧: 常用的一些 CSS 技巧(一)[https://www.jianshu.co...

  • Css常用技巧

    Css常用技巧 1.单行省略

  • web前端教程:CSS 布局十八般武艺都在这里了

    CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单...

  • CSS 常用技巧

    1. 事件不响应,事件穿透 2. 文本溢出显示省略号 单行溢出overflow: hidden;text-over...

  • 常用css技巧

    1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { fil...

  • css常用技巧

    一、背景图片和背景图的区别 背景色做代码一般用英文单词就可以,但是做网站建议用十六进制background-col...

  • CSS常用技巧

    CSS Sprite(雪碧图|精灵图)指什么? 有什么作用CSS Sprite值的是把多个icon图片放在一张图里...

  • CSS常用技巧

    CSS Sprite(雪碧图|精灵图) 雪碧图指的是将一些较小的图标或其他小图片集合到一起成为一张大图,只需一次网...

  • 常用css技巧

    #1、清除浮动 浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦,其中我觉得最方便也是兼...

  • css 常用技巧

    文本超出分号: 媒介查询 禁止IOS滚动条

网友评论

    本文标题:CSS常用技巧

    本文链接:https://www.haomeiwen.com/subject/qqnzjttx.html