美文网首页
CSS常见样式2

CSS常见样式2

作者: hhg121 | 来源:发表于2017-06-03 16:30 被阅读16次

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

    可以让在块级父容器中让行内元素居中,作用在块级元素上。
    这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。

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


    标准盒模型的width和height只表示content的大小,而ie盒模型包含content、padding和border的大小。
    box-sizing: content-box:w3c标准盒模型
    box-sizing: border-box:“IE盒模型”

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

    line-height: 2 为本身文字的高度的2倍; line-height: 200%为父元素文字的高度的两倍;两个属性设置给具体的某一个元素时是没有区别的。而line-height在继承上是有区别的:

    • 当父元素设置line-height:200%时,其子元素的行高都是一个具体的值,即父元素字体的200%。
    • 当父元素设置line-height:2时,其子元素的行高都是本身字体大小的2倍。
      参考

    inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?(布局时少用这个,多用float)

    指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素。更简单的说就是说inline-block后的元素具有block元素可以设置宽高特性,同时又具有inline元素默认不换行的特性。
    去掉缝隙的方法:1.让行元素紧挨着 2.font-size: 0 ,3.设置float
    4.父元素设置dispaly:flex,Flex是Flexible Box的缩写,意为"弹性布局"。注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

    可以通过设置 vertical-align: top可以使高度不一样的 inline-block元素如何顶端对齐.

    CSS sprite 是什么?

    CSS Sprites是一种网页图片应用处理方式,就是把网页中一些背景图片整合到一张图片文件中,在利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位。

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

    • opacity:0
    • visibility:hidden
    • display:none
    • position值为absolute,并将其移到不可见的区域。

    使用 CSSsrpite 实现如下效果【效果范例344】. ps: 图片下载地址241

    在iconfont上搜索"饥人谷"260, 使用字体图标实现代码1中的效果

    code1
    code2

    相关文章

      网友评论

          本文标题:CSS常见样式2

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