HTML和CSS —— 2（练习）

迈不过友情╰ 2022-06-16 00:48 179阅读 0赞

Code：  
xxx.html

<!DOCTYPE html>
    
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>Framework Test page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css" />
    
    <link rel="stylesheet" href="./css/main.css">
    
    <style id="style-1-cropbar-clipper">/* Copyright 2014 Evernote Corporation. All rights reserved. */ .en-markup-crop-options { top: 18px !important; left: 50% !important; margin-left: -100px !important; width: 200px !important; border: 2px rgba(255,255,255,.38) solid !important; border-radius: 4px !important; } .en-markup-crop-options div div:first-of-type { margin-left: 0px !important; } </style></head>
    <body>
    
        <div class="grid">
    
            <div class="row">
                <div class="col-2">2 Columns</div>
                <div class="col-10 end">
                    <p>Bacon ipsum dolor sit amet tri-tip shankle brisket, pork chop tail ham ribeye short loin bacon strip steak. Meatball landjaeger venison flank. Venison leberkas turducken short ribs corned beef ball tip jerky bresaola jowl, bacon shankle capicola. Fatback pork pancetta, frankfurter beef ribs turducken bresaola sausage ham. T-bone tail ribeye sausage flank pancetta kielbasa fatback beef ribs doner frankfurter sirloin pork belly ham shoulder.</p>
                </div>
            </div>
    
            <div class="row">
                <div class="col-3">3 Columns</div>
                <div class="col-9 end">9 Columns</div>
            </div>
    
            <div class="row">
                <div class="col-4">4 Columns</div>
                <div class="col-4">4 Columns</div>
                <div class="col-4 end">4 Columns</div>
            </div>
    
            <div class="row">
                <div class="col-3">3 Columns</div>
                <div class="col-6">6 Columns</div>
                <div class="col-3 end">3 Columns</div>
            </div>
        </div>
        <script src="./js/flexibility.js"></script>
        <script type="text/javascript"> flexibility(document.documentElement); </script>
    
    </body>
    
    </html>

main.css:

/* box-sizing三个值：content-box（default），border-box，padding-box。 1.content-box：padding 和 border 的大小都不算进width中 2.padding-box: padding大小算进width中，但border大小不算进width中; 3.border-box : border 和 padding 的大小都算进 width 中; */
    * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
    
    .flex-container { }
    
    .grid { }
    
    div { border:1px solid red; display: block; }
    /* display: flex 弹性布局，它就像是一个容器，它里面的元素都属于这个容器里面了。 可以填充多余的空间。 兼容性：目前支持IE10+，Firefox 18.0+，chrome21.0+，Safari6.1+ 解决方案，使用flexibility来解决。 git：https://github.com/jonathantneal/flexibility */
    .row { -js-display: flex; display: flex; width: 100%; }
    
    .col-1 { width: 8.33%; }
    
    .col-2 { width: 16.66%; }
    
    .col-3 { width: 24.99%; }
    
    .col-4 { width: 33.32%; }
    
    .col-5 { width: 41.65%; }
    
    .col-6 { width: 50%; }
    
    .col-7 { width: 58.31%; }
    
    .col-8 { width: 66.64%; }
    
    .col-9 { width: 74.97%; }
    
    .col-10 { width: 83.3%; }
    
    .col-11 { width: 91.63%; }
    
    .col-12 { width: 100%; }
    /* 媒体查询，以@media开头 关键字only兼容老式浏览器 screen表示适用于所有类型的屏幕，平板，手机，台式机 print 打印页面时的样式 max-width 最大宽度 min-width 最小宽度 orientation 两个值，1.landscape橫屏 2.portrait竖屏 */
    @media only screen and (max-width:500px) {
        p { display: none; }
    }
    
    /* @media only screen and (max-width:500px) and (orientation : landscape) { p { display: none; } } */
    
    /* @media only screen and (min-width:500px) { p { display: none; } } */
    
    /* @media only print and (max-width:500px) { p { display: none; } } */

flexibility.js下载地址：  
[https://github.com/jonathantneal/flexibility/blob/master/flexibility.js][https_github.com_jonathantneal_flexibility_blob_master_flexibility.js]

总结：  
1.flexibility解决弹性盒子布局兼容问题;  
2.媒体查询（屏幕尺寸问题）  
3.12等份;  
4.box-sizing（padding,border大小算不算入width中）

[https_github.com_jonathantneal_flexibility_blob_master_flexibility.js]: https://github.com/jonathantneal/flexibility/blob/master/flexibility.js