css布局2

居中

• 常用居中

elemP{
  text-align: center;
}
elelmP elemC{
  display: inline-block;
}

elemP{
  display: table;
  margin-left: auto;
  margin-right: auto;
}
elelmP elemC{
  display: table-cell;
}

elemP{
  height: Xpx;
  line-height: Xpx;
}

• 绝对定位居中技术

  • 容器内居中

       elemP{
         position: relative;
         height: 100px; //必须设置高度
       }
       elelmP elemC{
         position: absolute;
         margin: auto;
         width: ;         //设置百分比动态或固定值
         height: ;
         overflow: auto;  //防止可能的溢出
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
       }

* 视区内居中

      elemC{
        position: fixed; //
        z-index: 9999;   //
        margin: auto;
        width: ;
        height: ;
        overflow: auto;
        top: 0;left: 0;bottom: 0;right: 0;
      }

* 放置到边栏

      elemC{
        position: absolute;
        margin: auto;
        width: ;
        height: ;
        overflow: auto;
        top: 0;left: 0;bottom: 0;right: 0;
        left/right/top/bottom: auto;  //
      }

*  自适应

      elemC{
        position: absolute;
        margin: auto;
        width: ;
        height: ;
        overflow: auto;
        top: 0;left: 0;bottom: 0;right: 0;
        min-width: ; //
        max-width: ; //
      }

• 其他居中技术

  • 使用负外边距 //属于固定宽高的情况下

    elemC{
      width: ;
      height: ;
      padding: ;
      position: absolute;
      top: 50%; left: 50%;
      margin-left: -px; /* (width + padding)/2 */
      margin-top: -px; /* (height + padding)/2 */
    }

* 使用平移

    elemC{
      width:;
      height: ;
      position: absolute;
      margin: auto;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
    }

布局

浮动布局

• float: 注意设置float是影响周围元素
• clear: 浮动布局后在包裹元素设置一个clear:both消除对其他元素的影响,不过更常用的是如下方法：

.clearfix:after{
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
}

box-sizing

• content-box:(默认值)
  • element值 ＝ content(text) + padding + border + margin;
• border-box:(IE传统盒子模型)
  • element值 ＝ content(text + padding + border) + margin;
• inherit(继承)

溢出

overflow

• visible: 注意不剪切内容
• auto: 超出即添加滚动条
• hidden: 超出即隐藏
• scroll: 添加滚动条

text-overflow (注意在设置overflow: hidden； 后才有意义)

• clip: 默认
• ellipsis: 隐藏后，超出部分显示省略号

white-space

• nowrap: 强制显示在一行