CSS盒子模型

浏览数：42 / 时间：2015年06月09日

今天就以不规则布局来学习，之前做这个我花了很多时间还没达到很完美的效果！

这次用这个来box-sizing:border-box布局，发现效果还差一点点，所以多多指教了！

<!DOCTYPE html>
<html>
    <head>
        <title>盒子模型</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Pragma" name="no-store" />
        <meta http-equiv="Cache-Control" name="no-store" />
        <meta http-equiv="window-target" content="_top" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="HandheldFriendly" content="true" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta content="telephone=no" name="format-detection" />
        <meta name="renderer" content="webkit">
        <meta name="screen-orientation" content="portrait">
        <meta name="full-screen" content="yes">
        <meta name="x5-orientation" content="portrait">
        <meta name="x5-fullscreen" content="true">
        <meta name="msapplication-tap-highlight" content="no">
        <link rel="stylesheet" href="css/template.css" />
<style>
    .bg1{background:#00CC66;}
    .bg2{background:#AAAAAA;}
    .bg3{background:#EEEEEE;}
    .bg4{background:#000000;}
    .bg5{background:#505050;}
    .bg6{background:#CCCCCC;}
    .h100{height:100px;}
    .h145{height:145px;}
    aside{width:30%;float: left;}
    .con{width:70%;float: left;}
    .w48p{width:48%;}
    .mr4p{margin-right:4%;}
    .mr2p{margin-right:2%;}
    .mb10{margin-bottom:10px;}
    .ptb10{padding:10px 0;}
    li{display: inline-block;}
    .w28p{width:28%;}
    .w68p{width:68%;}
    .w15p{width:15%;}
    .w53p{width:53%;}
    .w30p{width:30%;}
    .h210{height:210px;}

</style>
    </head>

    <body>
        <section class="wrap grid p5">
            <aside class="box p5">
                <div class="box h145 bg1 mb10"></div>
                <div class="box h145 bg2"></div>
            </aside>
            <section class="box con p5">
                <div class="box h100 bg3"></div>
                <div class="box h100 ptb10">
                    <div class="box bg4 w48p fl mr4p"></div>
                    <div class="box bg5 w48p fl"></div>
                </div>
                <div class="wrap grid box h100 bg6"></div>
            </section>
        </section>
        
        <section class="wrap grid p5">
            <ul class="box h100 m5">
                <li class="w30p h100 bg4 fl mr2p"></li>
                <li class="w68p h100 bg5 fl"></li>
            </ul>
            <ol class="box h100 m5">
                <li class="w53p h100 bg2 fl mr2p"></li>
                <li class="w28p h100 bg3 fl mr2p"></li>
                <li class="w15p h100 bg1 fl"></li>
            </ol>
            <section class="box m5">
                <div class="w30p h210 bg1 fl mr2p"></div>
                <div class="w68p h100 w100p fl">
                    <ul class="box h100 mb10">
                        <li class="w28p h100 bg3 mr4p fl"></li>
                        <li class="w68p h100 bg6 fl"></li>
                    </ul>
                    <ul class="box h100">
                        <li class="w68p h100 bg2 mr4p fl"></li>
                        <li class="w28p h100 bg5 fl"></li>
                    </ul>
                </div>
            </section>
    </section>
    
    </body>

</html>

View Code

下面是我自己总结的CSS，有兴趣可以参考：

@charset "utf-8";html,body{background:#fe6c9c;color:#505050;font-size:62.5%;-webkit-user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-box-sizing:border-box;box-sizing:border-box}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
body,button,input,select,textarea{font:1.4rem \5b8b\4f53,‘Helvetica Neue‘,Arial,‘Liberation Sans‘,FreeSans,‘Hiragino Sans GB‘,sans-serif\"Microsoft YaHei"\"微软雅黑";line-height:2rem}
h1,h2,h3,h4,h5,h6{font-weight:normal}
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:none}
textarea{resize:none;-webkit-appearance:none;outline:0}
a,img{-webkit-touch-callout:none}
a{background:transparent}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
input[type="search"]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
input[type=button]{outline:0;-webkit-appearance:none}
table{border-collapse:collapse;border-spacing:0}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
th{text-align:inherit}
fieldset,img{border:0}
abbr,acronym{border:0;font-variant:normal}
del{text-decoration:line-through}
ol,ul{list-style:none}
caption,th{text-align:left}
sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}
sup{top:-0.5em}
sub{bottom:-0.25em}
ins,a,a:hover{text-decoration:none}
a:focus,*:focus{outline:0}
.clearfix:before,.clearfix:after{display:table;content:""}
.clearfix:after{clear:both;overflow:hidden}
.clearfix{zoom:1}
.clear{clear:both;display:block;overflow:hidden;height:0;font-size:0;line-height:0}
.hide{display:none}
.block{display:block}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.tac{text-align:center}
.tal{text-align:left}
.tar{text-align:right}
.dib{display:inline-block}
.vab{vertical-align:bottom}
.vam{vertical-align:middle}
.vat{vertical-align:top}
.box{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%}
.grid,.wrap,.grid:after,.wrap:after,.grid:before,.wrap:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.grid{*zoom:1}
.grid:before,.grid:after{display:table;content:"";line-height:0}
.grid:after{clear:both}
.grid{list-style-type:none;padding:0;margin:0}
.grid>.grid{clear:none;float:left;margin:0!important}
.col{height:100%;display:-webkit-box;-webkit-box-orient:vertical;display:flex;display:-webkit-flex;flex-direction:column}
.row{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;flex-direction:wrap;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;width:100%;height:auto;margin:auto}
.flex1{-webkit-box-flex:1;-webkit-flex:1;flex:1}
.flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2}
.flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3}
h1{font-size:2.4rem}
h2{font-size:2.2rem}
h3{font-size:1.8rem}
@media only screen and (min-width:360px){h1{font-size:2.8rem}
h2{font-size:2.6rem}
h3{font-size:2.2rem}
body,button,input,select,textarea{font-size:1.8rem;line-height:2.6rem}
}
.outL{white-space:normal;word-break:break-all;width:100px}
.outH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100px}
.ellipsis{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wrapper{position:absolute;top:0;right:0;bottom:0;left:0;padding:5px 5px 60px 5px;overflow:auto;margin-top:44px;-webkit-overflow-scrolling:touch}
header,footer{position:fixed;right:0;left:0;z-index:1;text-align:center;background:#ccc}
header{top:0;height:44px}
footer{bottom:0}
input::-webkit-input-placeholder{color:#ffa500}
textarea::-webkit-input-placeholder{color:#ffa500}
input::-webkit-input-speech-button{display:none}
.wrap{float:left;width:100%}
.w100p{width:100%}
.w20p{width:20%}
.m5{margin:5px}
.p5{padding:5px}
.pt5{padding-top:5px}
.flexcontent{margin:5px 1px;-webkit-flex:1;flex:1;-webkit-box-flex:1;background:hotpink}