美文网首页
CSS常见样式2

CSS常见样式2

作者: 淡然7698 | 来源:发表于2017-04-10 18:46 被阅读25次

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

    .text-align: center的功能是使行内元素水平居中. 作用在行内元素上.
    包括行内元素、行内块元素和行内文本. inline-block同样有效.

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

    区别在于width和height的算法不同

    IE盒模型 width=内容宽度+padding+border height=内容高度+padding+border
    W3C盒模型 width=内容宽度 height=内容高度

    
    
    ####3.*{ box-sizing: border-box;}的作用是什么?
    >当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。
    简单来说就是将W3C盒模型变为IE盒模型
    
    ####4.line-height: 2和line-height: 200%有什么区别?
    >#####line-height可能的值类型有三种,一种带有css单位px、em等,一种为百分比如200%,还有一种为纯数值,如2.
    #####2em和200%是先换算成px,子元素在继承,百分比是基于当前字体尺寸的百分比行间距,等同于em。100%==1em.
    #####而line-height: 2与上述套路狠不一样,为先继承,在换算成px。子元素继承父元素的数字,然后当前的字体尺寸相乘来设置行间距。
    
    ####5.inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
    >**inlin-block的特性有以下几点:**
    inline-block元素可以设置宽高和上下左右的padding和margin。
    inline-block元素并排排列
    inline-block元素默认宽高为内容宽高.
    **如何去除缝隙**
    1.html标签连写:
    2.设置浮动:
    3.父元素字体设置font-size:0;然后在inline-block元素上再重新设置字体;
    4.inline-block元素设置负margin,会导致元素溢出父容器的问题:
    **高度不一样的inline-block元素如何顶端对齐?**
    答:使用vertical-align样式,值设置为top(顶端对齐)
    
    
    ####6.CSS sprite 是什么?
    css精灵图   把多个小图片放在一张大图片中   可以减少请求数量   重复使用
    
    ####7.让一个元素"看不见"有几种方式?有什么区别?
    >opacity: 0:元素透明度为0,还占有位置;
    visibility: hidden:与opacity: 0类似;
    display: none:元素消失,不占位置;
    background-color: rgba(0,0,0,0.2):背景色透明,占有位置.

    相关文章

      网友评论

          本文标题:CSS常见样式2

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