7.26晚上的测试总结

• 选择器权重

  • !important > style行间 > id > class > 标签 > * > 继承
    注：权重
    style： 1000
    id：100
    class：10
    tag：1
    *：0 （通配符）
  • !important：可将优先级变成最高
    用法 color:blue !important;
  • 标签+类与单类
    标签+类 > 单类
  • 群组选择器与单一选择器的优先级相同，靠后写的优先级高。

• display常见的值，包括的标签

  none 此元素不会被显示
  block 此元素将显示为块级元素，此元素前后会带有换行符（可显示加了display:none;的元素）
  inline 默认值。此元素会被显示为内联元素，元素前后没有换行符
  inline-block 行内块元素
  块级元素：div，h1，p，ul，li，table，form
  内联元素：span ，a，em，strong，
  行内块元素： img

  • 如何解决两个img之间的缝隙
    • 两个img连着写，中间不能有空格
    • 设置font-size:0; 可以使得空格的大小为0

• 标准盒模型/IE盒模型的区别

  • 标准盒模型：width/height=content
  • IE盒模型：width/height=content+padding+border
  • margin：上 右 下 左
    • margin : 1px ;
      为：margin : 1px 1px 1px 1px ;
    • margin : 1px 2px;
      为：margin : 1px 2px 1px 2px ;
    • margin : 1px 2px 3px ;
      为：margin : 1px 2px 3px 2px ;
    • margin : 1px 2px 1px 3px ;

• position: 的属性，relative与absolute的区别。

  • position：static（默认值）、relative 、absolute 、fixed
    relative：相对定位
    如果没有定位偏移量，对元素本身没有任何影响
    不使元素脱离文档流
    是相对于当前元素自身进行偏移的
    absolute：绝对定位
    使元素完全脱离文档流
    如果有定位（绝对、相对、固定）祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移
    fixed：固定定位
    使元素完全脱离文档流
    相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
    sticky：黏性定位：
    在指定的位置，进行黏性操作。

• 水平居中/垂直居中/水平垂直居中的方法

  • 水平居中

    • 元素居中对齐：margin: auto;

      div {
      margin: auto;
      width: 50%;（要有具体值）
      }

    • 文本居中对齐：text-align: center;

    • 图片居中对齐：margin: auto; （margin: 0 auto）

      img {
      display: block;
      margin: auto;
      width: 40%;
      }

  • 垂直居中

    • 使用padding

    • line-height

      div {
      line-height: 200px;
      height: 200px;
      }

      /* 如果文本有多行，添加以下代码: */
      div p {
      line-height: 1.5;
      display: inline-block;
      vertical-align: middle;
      }

  • 水平垂直居中

    • position 和 transform

      div {
      width: 200px;
      height: 200px;
      background: green;
      position:absolute;
      left:50%; /* 定位父级的50% */
      top:50%;
      transform: translate(-50%,-50%); /*自己的50% */
      }

    • margin:auto;和position
      　
      　 div{
      width: 200px;
      height: 200px;
      background: green;
      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      }

    • margin 负间距

      div{
      width:200px;
      height: 200px;
      background:green;
      position: absolute;
      left:50%;
      top:50%;
      margin-left:-100px;
      margin-top:-100px;
      }

• Margin塌陷/合并，解决方法

  • 塌陷： 父盒子与子盒子谁的margin-top 大就用谁的值
  • 合并： 上面盒子的margin-bottom和下面盒子的margin-top，它们之间的上下距离为较大的那个值
  • 解决方法：
    • 对于margin的大小进行调整。
    • BFC规范：可以形成一个独立的容器。不受到外界的影响，从而解决一些布局问题。
      触发条件：
      float 除 none 以外的值
      position 值为 absolute 或 fixed
      display 值为 inline-block, table-cells, flex
      overflow 除了 visible 以外的值

• 什么是浮动，清除浮动的方法

  • float：left、right、none属性定义元素在哪个方向浮动，脱离文档流，只会影响后面的元素
    注：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
  • 如何清除浮动
    clear属性：clear属性只会操作块标签，对内联标签不起作用 ，表示清除浮动的，left、right、both
    :after伪类 :
    div::after {
    content:"";
    display:block;
    clear:both;
    }

• 引入外部字体的方法

  • 使用@font-face，例：
    @font-face{
    font-family: myFirstFont;
    src: url(’/example/css3/Sansation_Light.ttf’)
    ,url(’/example/css3/Sansation_Light.eot’);
    }
    div{
    font-family:myFirstFont;
    }

• px，em，rem

  • px（像素）：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
  • em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
    • em特点
      em的值并不是固定的；
      em会继承父级元素的字体大小。
  • rem：相对根元素的字体大小，这个单位集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应

• display: none和visibility: hidden的区别：

  • 作用： 可以把某个元素隐藏起来
  • 区别：
    display:none不保存其在页面上的物理空间
    visible:hidden保留其在页面上的物理空间