盒子模型不必多少，公认的盒子模型

总宽度=width + padding(padding-left,padding-right) + border(border-left,border-right)

而怪异盒子模型

总宽度=width

哎 语文老师是数学教的 没办法只能表述成这样了，没关系看图，

先看下传统盒子模型 ，结构和代码如下

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         .big-box{

             width: 100px;

             height: 100px;

             margin: 50px auto;

             background: #cacaca;

             padding: 10px;

             border: 5px solid #cf2d28;

         }

     </style>

 </head>

 <body>

     <div class="big-box"></div>

 </body>

 </html>

是的 很easy的一段代码，页面如下

这很好理解，好的 在浏览器里看下具体的盒子模型，很直观可用区域100px两边padding10px, border5px;

如果按照上面说的传统盒子计算公式就可以计算出总宽度：100+10*2+5*2 = 130 ，在浏览器指向看总宽度

显示130 X 130 perfect 完全想等。。

再看下怪异盒子模型啥样的，同样的上面结构和样式，现在在样式里面加个box-sizing:border-box;

页面展示就不看了和上面差不多，看下浏览器中具体的盒子模型

what's up，！！ 里面可用区域变成70px，而且也不是像刚才有几种颜色现在里面全是白色，但padding还是10px，border还是5px;

浏览器指向看显示总宽度100px; 和刚才定义的 总宽度=width 符合，

明白了，传统盒子padding和border的宽都是在width外面的，此时width多少就是可用区域多大，

怪异盒子就是padding和border的宽都是在width里面，width减去他俩的宽才是可用区域的宽，搜嘎

看张图

这个如果在网页中做是很好做，但是是在移动端用的，如果用传统布局和单位随着不同和越小的尺寸会把布局打乱掉，好的先布下局

         <div class="user-list">

             <ul>

                 <li>

                     <img src="data:images/user-icon (1).png">

                     <span>个人信息</span>

                 </li>

                 <li>

                     <img src="data:images/user-icon (2).png">

                     <span>银行信息</span>

                 </li>

                 <li>

                     <img src="data:images/user-icon (3).png">

                     <span>投资记录</span>

                 </li>

                 <li class="im-width"></li>

                 <li>

                     <img src="data:images/user-icon (4).png">

                     <span>取款</span>

                 </li>

                 <li>

                     <img src="data:images/user-icon (5).png">

                     <span>注资</span>

                 </li>

                 <li class="im-width"></li>

             </ul>

         </div>

样式如下

 .user-list{

     width: 100%;

     padding:0 5%;

 }

 .user-list ul{

     width: 100%;

     list-style: none;

 }

 .user-list ul li{

     float: left;

     width: 33.3%;

     height: 7.5em;

     background: #ececec;

     text-align: center;

     -moz-box-sizing: border-box;

     -webkit-box-sizing: border-box;

     -o-box-sizing: border-box;

     -ms-box-sizing: border-box;

     box-sizing: border-box;

     margin-bottom: 5px;

     border-right: 5px solid #f2f2f2;

     position: relative;

 }

 .user-list ul li.im-width{

     width: 16.7%;

     background: #f2f2f2;

 }

 .user-list ul li img{

     width: 55%;

 }

 .user-list ul li span{

     position: absolute;

     bottom:;

     left:;

     width: 100%;

     text-align: center;

     color: #464646;

     font-size: 1em;

 }

此时无论怎么改变屏幕尺寸这个布局是不会改变的，

下面box-sizing的兼容,虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀：

     -moz-box-sizing: border-box;

     -webkit-box-sizing: border-box;

     -o-box-sizing: border-box;

     -ms-box-sizing: border-box;

     box-sizing: border-box;

box-sizing怪异盒子模型在移动端应用的更多相关文章

  1. CSS3_标准盒子模型和怪异盒子模型

    #box{ width: 200px; height: 200px; background-color: pink; } 标准盒子模型 box-sizing: content-box; padding ...

  2. CSS Box Model（盒子模型）

    CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...

  3. 怪异盒子模型和行内元素的float

    设置了float属性的行内元素的display值会变成inline-block 怪异盒子模型: box-sizing:border-box:元素content包含内间距和border

  4. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  5. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. 盒子模型(Box Model)

    盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...

  7. CSS3中的弹性盒子模型

    介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案 ...

  8. 怪异盒模型和标准盒模型--CSS

    一,原理 css 属性:Box Moel分为两种:W3C标准和IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准. 怪异模式是“部分浏览器在支持W3C标准的同 ...

  9. 从CSS盒子模型说起

    前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏:前端进击者 博主博客地址:Damonare的个人博客 为学之道,莫先于穷理:穷理之要 ...

随机推荐

  1. 服务器运行环境部署（PHP）

    1.使用的是腾讯云服务器,系统为centOS: 2.LAMP环境配置查看:https://cloud.tencent.com/document/product/213/8043: 3.mysql-se ...

  2. 文科生细谈学习Linux系统的重要性

    首先大概介绍下自己,我学的是公共事业管理方面的专业,可以说是面向纯理论,社区管理社会管理的专业,但是从大二开始,对网络及服务器运维方面产生浓厚兴趣,并不断在网上找相关资料. 在这期间经历过很多,单说桌 ...

  3. 假面舞会[NOI2008]

    题目描述 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会.今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一 个自己喜欢的面具.每个面具都有一个编号,主办方会把此编号告 ...

  4. java中什么样的对象能够进入老年代

    1.大对象:所谓的大对象是指需要大量连续内存空间的java对象,最典型的大对象就是那种很长的字符串以及数组,大对象对虚拟机的内存分配就是坏消息,尤其是一些朝生夕灭的短命大对象,写程序时应避免. 2.长 ...

  5. FastDFS安装和配置，整合Nginx-1.13.3

    目录: 一:下载FastDFS  二:安装FastDFS 三:配置 四:整合Nginx和FastDFS FastDFS is an open source high performance distr ...

  6. 生成二维码的js以及调用打印插件

    插件: qrcode.js 插件下载网址:http://code.ciaoca.com/javascript/qrcode/ 用法实例: <script type="text/java ...

  7. txt文件怎么设置默认打开是用这个EditPlus软件打开

    1.如果是正常安装的Editplus,只需要右击“txt文件”,在“打开方式”中选择“打开程序”,再点击“浏览”,找到“Editplus”打开,再将“始终使用选择的程序打开这种文件”前面的“口”选中, ...

  8. [填坑]树上差分 例题：[JLOI2014]松鼠的新家（LCA）

    今天算是把LCA这个坑填上了一点点,又复习(其实是预习)了一下树上差分.其实普通的差分我还是会的,树上的嘛,也是懂原理的就是没怎么打过. 我们先来把树上差分能做到的看一下: 1.找所有路径公共覆盖的边 ...

  9. Spring中各jar包的作用

    Spring AOP:Spring的面向切面编程,提供AOP(面向切面编程)的实现 Spring Aspects:Spring提供的对AspectJ框架的整合 Spring Beans:Spring ...

  10. 基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统

    很久没更新博客,最近也有点忙,然后业余时间搞了一个比较完整基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统的流程系统,希望对 ...