頁面布局和設備適配

1.讓一個div在頁面中水平垂直居中

1>position:absolute;  (當頁面出現滾動條的時候，用fixed)
    top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
2>position:absolute；
    top：50%；
        left:50%;
        translate:(-50%,-50%)

3>display:flex;
    justify-content:center;
        align-items:center;

2.左邊固定，右邊滾動

div.left{
    width:200px;
        height:300px;
        background:#ff0;
        float:left;
}
div.right{
        height:300px;
        background:#f00
        overflow:hidden;
}

3.雙飛翼布局

div.left{
    width:200px;
        height:300px;
        background:#ff0;
        float:left;
}
div.right{
        width:200px;
        height:300px;
        background:#ff0
}
div.main{
   height:500px;
     background:#f00;
     overflow:hidden;    //可以觸發bfc 塊級格式化上下文 可以解決子元素浮動 父元素高度塌陷問題  渲染規則：浮動元素也參與高度計算
}

4.文字內容多

640的設計稿需要在320的設備上去顯示，因為蘋果手機4的dpr:2
vw:視窗寬度的百分比 1vw = 設備寬度的百分之一
如果640的設計稿需要在320的設備上顯示，那么1vw = 320的百分之一，即1vw = 3.2px

rem:根據html標簽的font-size計算

em：根據父元素的font-size計算

ie6雙邊距問題（給浮動的元素添加display:inline）ie6(overflow:hidden;fontsize:0;)

頁面插入圖片默認向下撐大3像素問題 (img:display-block/vertical-align:top)

超鏈接加載的圖片在ie中都會解析出邊框問題 將img設置 border:none;

圖片垂直居中 img(vertical-align:middle;) span(display:inline-block;vertical-align:middle;overflow:hidden;width:0;height:100%;)

移動端1px邊框解析時會顯示2px問題的解決方式，用縮放去實現

如果！Doctype html 不存在 會發生什么 ie8以下會觸發怪異盒模型，怪異盒模型的實際寬高就是 我們設置的width/height(會將border padding計算在寬高里)

img標簽中alt 和 title屬性都有利于seo優化，alt是當圖片不存在或者路徑錯誤的時候顯示alt內容 title是鼠標放在圖片上時顯示title內容

你寫頁面的時候會從哪些方面考慮頁面優化？
1.超鏈接最好用文本，不同flash動畫或圖片熱區 圖片alt和title都要添加，對于一些沒有意義的小圖也要添加 alt = "" title ="" 圖片整合（雪碧圖）
2.代碼結構清晰

pointer-events:none; 屏蔽鼠標事件

如果不想內容跟著區域一起透明
1.把背景顏色用rgba()設置
2.用定位 背景和內容單獨出來