CSS3-box盒布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒布局——display:box;</title>
    <style>
        li:after {
            content: '';
            clear: both;
            display: block;
        }
        li {
            *zoom: 1;
        }
        /*div[id] {*/
            /*height: inherit;*/
        div{
            float: left;
            padding: 20px;
            margin: 5px;
            background: rgb(113, 175, 255);
            color: #314b6e;
            font: bold 14px "微软雅黑";
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        /*float*/
        /*div.float{*/
            /*width: auto;*/
            /*height: 400px;*/
        /*}*/
        .left, .right {
            width: 300px;
        }
        .center {
            width: 500px;
        }
        /*column*/
        div.column {
            display: inline-block;
            -webkit-columns: 300px 3;
            -moz-columns: 300px 3;
            columns: 300px 3;
            background: rgb(250, 255, 150);
        }
        .Cleft, .Cright {
            /*width: 300px;*/
            /*宽度就不能设置了*/
        }
        .Ccenter {
            /*width: 500px;*/
        }
        /*box*/
        div.box{
            display: -moz-box;
            display: -webkit-box;
            background: rgb(250, 255, 150);
        }
        .Bleft,.Bright,.Bcenter{
            float: none;/*特别注意,使用box盒模型的时候不能有浮动*/
        }
        .Bleft {
            width: 300px;
        }
        .Bright {
            width: 100px;
        }
        .Bcenter {
            width: 500px;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <h1>实验——常规布局</h1>
        <h4>总结:高度不一致时,底部不能对齐:解决办法:其实也可以外加一个父元素,给父元素一个高度,然后子元素继承父元素高度也是可以的,但是缺点是没父元素的高度是给定的,不能虽内容的改变而改变了</h4>
        <!--<div class="float">-->
        <div class="left">
            每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。总之,谨慎使用下拉菜单,重要选择最好不要使用下拉菜单。每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。
        </div>
        <div class="center">
            每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。总之,谨慎使用下拉菜单,重要选择最好不要使用下拉菜单。每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。总之,谨慎使用下拉菜单,重要选择最好不要使用下拉菜单。每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。
        </div>
        <div class="right">
            总之,谨慎使用下拉菜单,重要选择最好不要使用下拉菜单。每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。
        </div>
        <!--</div>-->
    </li>
    <hr/>
    <li>
        <h1>column多栏布局</h1>
        <h4>总结:虽然高度一致,底部也可以对齐。但缺点是无法设置各个元素的宽度不一样也不能控制每一栏中显示什么内容,因为内容都是分配的</h4>
        <div class="column">
            <div class="Cleft">
                人类生性懒惰,没有人喜欢填写一堆表单。表单中每个字段都有可能让用户放弃填写。每个人打字速读不同,在移动设备上打字更是一件苦差事。尽可能删除没必要的字段,只保留那些有必要的。如果真的有很多信息要用户填写,试着将它们分散在不同页面,一页提交后再填写下一页。人类生性懒惰,没有人喜欢填写一堆表单。表单中每个字段都有可能让用户放弃填写。每个人打字速读不同,在移动设备上打字更是一件苦差事。尽可能删除没必要的字段,只保留那些有必要的。如果真的有很多信息要用户填写,试着将它们分散在不同页面,一页提交后再填写下一页。
            </div>
            <div class="Ccenter">
                每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。总之,谨慎使用下拉菜单,重要选择最好不要使用下拉菜单。每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。总之,谨慎使用下拉菜单,重要选择最好不要使用下拉菜单。每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。
            </div>
            <div class="Cright">
                在介绍产品时,增加一些个性化的信息(比如原产地),会让用户觉得产品友好和亲近。通常,指明产品在哪里被制造还能够让用户下意识地认为产品有较好的质量。
            </div>
        </div>
    </li>
    <hr/>
    <li class="box">
        <h1>box盒布局</h1>
        <h4>总结:即使高度不一致时,底部也可以对齐。同样也可以单独设置每一栏的宽度和显示的内容</h4>
        <h4>/*特别注意,使用box盒模型的时候,各个元素之间不能有float浮动属性*/</h4>
        <div class="box">
            <div class="Bleft">
                每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。总之,谨慎使用下拉菜单,重要选择最好不要使用下拉菜单。每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。
            </div>
            <div class="Bcenter">
                每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。总之,谨慎使用下拉菜单,重要选择最好不要使用下拉菜单。每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。总之,谨慎使用下拉菜单,重要选择最好不要使用下拉菜单。每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。
            </div>
            <div class="Bright">
                每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。
            </div>
        </div>
    </li>
    <hr/>
</ul>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏拂晓风起

cocos2d-js V3.0 V3.1使用DragonBones

23730
来自专栏移动开发之家

移动端跨平台开发的深度解析

跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,...

10520
来自专栏编程微刊

百度地图API的使用示例

刚刚工作的时候写过百度地图API文档,那时候没有记录到技术博客里面,今天在群里看见有个姑娘在问这个问题,重温了一遍,这个API还算好用。百度地图API,集成简单...

11240
来自专栏python爬虫实战之路

利用scrapy进行八千万用户数据爬取与优化(一)

最近准备把数据分析这块补一下,加上一直在听喜马拉雅的直播,有一个比较喜欢的主播,突然萌生了爬取喜马拉雅所有主播信息以及打赏信息,来找一找喜马拉雅上比较火的主播和...

78820
来自专栏知晓程序

触发「对方正在输入…」,你需要这么做 | 晓技巧

20040
来自专栏Windows Community

UWP 手绘视频创作工具技术分享系列 - 手绘视频导出

手绘视频最终的生成物是视频文件,前面几篇主要讲的是手绘视频的创作部分,今天讲一下手绘视频的导出问题。主要以 UWP 为例,另外会介绍一些 Web 端遇到的问题和...

40860
来自专栏一个番茄说

iOS 开发安全那些事儿

​ 随着移动互联网的普及,被越来越多的心怀不轨的人觊觎,也越来越多的安全问题暴露了出来。开发者开发出来的应用被安装在设备上之后,用户并不具有专业的安全知识。...

11830
来自专栏WeTest质量开放平台团队的专栏

安卓易学,爬坑不易——腾讯老司机的RecyclerView局部刷新爬坑之路

安卓开发者都知道,RecyclerView比ListView要灵活的多,但不可否认的里面的坑也同样埋了不少人。下面让我们看看腾讯开发工程师用实例讲解自己踩坑时的...

11620
来自专栏FreeBuf

使用树莓派打造面部识别安全设备

清单 硬件部分 Raspberry Pi 2 Model B PIR运动传感器(通用) Microsoft LifeCam 3000 HD摄像头 伺服马达FS5...

28380
来自专栏数据小魔方

不用编程,教你轻松搞定数据地图

这篇文章,教会大家使用菜单类工具搞定数据地图,包括数据的获取、经纬度解析、数据地图生成等三大技能。 利用Excel2016版的PowerQuery的数据爬取功能...

43850

扫码关注云+社区

领取腾讯云代金券