美文网首页
CSS基础(四)

CSS基础(四)

作者: 赫鲁晓夫的玉米棒子 | 来源:发表于2017-03-02 20:58 被阅读0次

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

    用于行内元素水平居中。

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

    IE盒模型:设置宽(高)时,内容宽(高)+padding+border=width(height)
    W3C盒模型:设置宽(高)时,内容宽(高)=width(height)

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

    box-sizing: content-box;:W3C标准盒模型。
    box-sizing: border-box;:"IE盒模型",设置padding和border时不会额外增加宽高。

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

    line-height: 2;:相对于自身字体大小的两倍。不会出现字体重叠。
    line-height: 200%;:相对于父元素字体大小的两倍。可能会出现字体重叠。

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

    设置了inline-block后,该元素不会独占一行,但是又可以设置元素宽高、内外边距。

    去除缝隙:

    两个设置了inline-block的元素间去掉空白符如回车和空格。即可去掉两个元素间的间隙。但是去除回车后代码的阅读性下降了。所以可以通过一下几种方式即消除:

    1. 父元素设置:font-size: 0;再在设置了inline-block的元素新设置一个font-size。
    2. 使用注释
    <div>1</div><!--
    --><div>2</div><!--
    --><div>3</div>
    
    1. 标签换行
    <div>1</div
    ><div>2</div
    ><div>3</div>
    

    inline-block顶端、基线、中心线对齐:

    vertical-align: top;:顶端对齐。
    vertical-align: bottom;:基线对齐。
    vertical-align: meddle;: 中心线(垂直居中)对齐。

    CSS sprite 是什么?

    CSS sprite也称为雪碧图,将一个页面中多个小图标集中在一张图上。可以减少网络请求。提高网页加载性能。

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

    • opacity: 0; 整体透明度为 0,元素依旧在文档流中。
    • visibility: hidden; 与opacity一样。
    • background-color: rgba(0, 0, 0, 0.2); 元素透明,依旧在文档流中。
    • display: none 元素隐藏,不再在文档流中。

    相关文章

      网友评论

          本文标题:CSS基础(四)

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