美文网首页
入门任务9--css常见样式2

入门任务9--css常见样式2

作者: _小黑 | 来源:发表于2017-11-02 10:29 被阅读11次
    1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
      定义行内内容相对它的块元素容器居中对齐,作用在块级元素上。让行内元素水平居中。

    2. IE 盒模型和W3C盒模型有什么区别?
      IE盒模型的width包括content、padding、border,而W3c盒模型的width就是内容本身的宽度,如图


      image.png
    3. *{ box-sizing: border-box;}的作用是什么?
      将默认的w3c盒模型转换成ie盒模型

    1. line-height: 2和line-height: 200%有什么区别?
      都表示行高是字体大小的2倍,但是它们是有区别的。
      当它们写在父容器中时,子元素的字体大小不一样的时候,区别就体现出来了
      line-height: 2 写在父容器中,那么子元素的行高都是自身高度的2倍,是相对大小。子元素的字体大小不同,行高也会不同。
      line-height: 200% 写在父容器中,那么浏览器会立刻计算出行高的具体值,假如父容器的默认字体大小是16px,那么计算得到的行高就是2×16px=32px,子元素的行高都会继承这个32px,是固定大小。
      子元素的字体大小不同,行高都是固定某个值。
      5.inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
      inline-block元素可以设置宽高和上下左右的padding和margin,inline-block元素并排排列,inline-block元素默认宽高为内容宽高
      去处缝隙的方法:
      标签连写
      image.png
      父元素字体设置font-size:0;然后在inline-block元素上再重新设置字体
      image.png
      使用vertical-align:top 命令让高度不一样的inline-block高度对齐
      image.png
    1. CSS sprite 是什么?
      css sprite 是精灵图,是将多个小图标整合到一张图上的文件
    1. 让一个元素"看不见"有几种方式?有什么区别?
      opacity: 0:元素透明度为0,还占有位置;
      visibility: hidden:与opacity: 0类似;
      display: none:元素消失,不占位置;
      background-color: rgba(0,0,0,0.2):背景色透明。

    2. 代码1
      http://js.jirengu.com/vonic/1/edit

    代码2
    http://js.jirengu.com/ruvad/1/edit

    相关文章

      网友评论

          本文标题:入门任务9--css常见样式2

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