Page layout and device adaptation

1. Have a div centered vertically in the horizontal page

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. Fixed left and right scroll

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

3. Flying wing

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. text and more

Draft design requires up 640 in the display device 320, since the iPhone dpr 4: 2
VW: Windows percentage of the width of a width of the apparatus 1vw = percent
if the draft design 640 to be displayed on the device 320, then 1vw one per cent = 320, that 1vw = 3.2px

rem: calculated font-size html tag

em: calculated font-size of the parent element

ie6 from bilateral issue (to the floating element to display: inline) ie6 (overflow: hidden; fontsize: 0;)

The default page insert a picture stays down 3 pixels big problem (img: display-block / vertical-align: top)

Hyperlinks loaded picture will resolve the border issue in ie in the set img border: none;

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

End mobile solutions 1px 2px border will be displayed when resolving problems with scaling to achieve

in case! Doctype html does not exist what would happen the following ie8 box model will trigger weird, weird actual width of the box model is high we set the width / height (border padding will be calculated in width and height)

img alt tags and title attributes are conducive to seo optimization, alt is when there is no picture or the wrong path when the show alt content title is a title when the mouse on the picture content

You write pages will be considered when optimizing a page from what?
1. The text of the hyperlink is best to use different flash animation or picture hot zone pictures alt and title should be added, for some small figure also does not make sense to add alt = "" title = "" Picture integration (Figure Sprite)
2. clear code structure

pointer-events: none; shielded mouse events

If the content does not want to follow along with the transparent area
1 with the RGBA background color () Set
2. Locating separate out the background and content

Page layout and device adaptation

Guess you like