美文网首页
CSS常见样式2

CSS常见样式2

作者: 向前冲冲的蜗牛 | 来源:发表于2017-09-07 00:58 被阅读0次

    text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

    text-align:作用在行内元素上或文本上,如span,img。

    能让字体居中也能让文本或行内元素位置居中

    IE 盒模型和W3C盒模型有什么区别?

    IE和模型是指宽度和高度是以border的宽度和高度,几种width=border+padding+content的值

    标准的盒模型是指宽度和高度以content的高度和宽度  width=content的值。

    一般不加<! doctype html>即使用IE盒模型,如果加了<!doctype html>则使用标准模型

    *{ box-sizing: border-box;}的作用是什么?

    对于css3中,为了使用方便,出现了 box-sizing属性,以适应不同盒模型的使用。

    如果 box-sizing:content-box则是标准盒模型,如果是box-sizing:border-box则是IE盒模型。像一行为了显示三个div,为了方便使用,可以设置为使用IE盒模型,这样就不用在计算width以及padding了。

    line-height: 2和line-height: 200%有什么区别?

    line-height:2是其行高是文字高度的2倍数。

    line-height:200%是其父元素高度的两倍。

    inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?

    inline-block呈现inline特性(不占据一行,宽度由内容宽度决定)

    又呈现block特性(可设置宽高,内外边距)

    inline-block之间会出现间隙,出现间隙的问题是由于标签之间的空白所导致图一)

    图1

    常用的的解决办法如下(图二)

    图2

    高度不一样的inline-block元素会出现的问题(图三)

    图三

    解决办法就是用:vertical-align:top或者vertical-align:bottom(图四)

    图四

    https://jsbin.com/gurobu/edit?html,css,output

    CSS sprite 是什么?

    指将不同的图片/图标合并到一张图片上。

    使用css sprite可以减少网络请求提高网页加载性能

    缺点是:无法缩放 ,不好修改

    让一个元素"看不见"有几种方式?有什么区别?

    opacity:0 透明度为0  占据位置

    visibility:hidden 占据位置

    display:none;不占据位置

    background-color:rgba(0,0,0,0.2) 背景色为透明。占据位置

    代码:

    https://jsbin.com/welaxuf/edit?html,css,output

    代码2:

    图2

    效果图

    图三

    相关文章

      网友评论

          本文标题:CSS常见样式2

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