如何理解Box-sizing模型?
CSS3 box-sizing 属性
http://www.w3school.com.cn/tiy/t.asp?f=css3_box-sizing
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
</style>
<div class="container">
<div class="box">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
</div>
另外1em等于16px单位
如果没有使用box-sizing:border-box的属性呢?
右半部分的div会掉下去。这是为什么呢?
别急,请耐心看下面。
左边使用了box-sizing,没把左右边框的16*2=32算上去。
右边未使用box-sizing. 是把左右边框的16*2=32算上去,208+240了。所以右半部分的div会掉下去。
其实两个div左右部分是用50%
box-sizing必须配合左右两个栏 50%才能使用!
如何理解Box-sizing模型?的更多相关文章
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- 《深入理解Java内存模型》读书总结
概要 文章是<深入理解Java内容模型>读书笔记,该书总共包括了3部分的知识. 第1部分,基本概念 包括"并发.同步.主内存.本地内存.重排序.内存屏障.happens befo ...
- 深入理解java内存模型系列文章
转载关于java内存模型的系列文章,写的非常好. 深入理解java内存模型(一)--基础 深入理解java内存模型(二)--重排序 深入理解java内存模型(三)--顺序一致性 深入理解java内存模 ...
- 【Todo】【转载】深入理解Java内存模型
提纲挈领地说一下Java内存模型: 什么是Java内存模型 Java内存模型定义了一种多线程访问Java内存的规范.Java内存模型要完整讲不是这里几句话能说清楚的,我简单总结一下Java内存模型的几 ...
- 深入理解Java内存模型(一)——基础(转)
转自程晓明的"深入理解Java内存模型"的博客 http://www.infoq.com/cn/articles/java-memory-model-1 并发编程模型的分类 在并发 ...
- 理解CSS盒子模型
概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...
- 深入理解Java内存模型之系列篇[转]
原文链接:http://blog.csdn.net/ccit0519/article/details/11241403 深入理解Java内存模型(一)——基础 并发编程模型的分类 在并发编程中,我们需 ...
- 【深入理解Java内存模型】
深入理解Java内存模型(一)--基础 深入理解Java内存模型(二)--重排序 深入理解Java内存模型(三)--顺序一致性 深入理解Java内存模型(四)--volatile 深入理解Java内存 ...
- 全面理解Java内存模型(JMM)及volatile关键字(转载)
关联文章: 深入理解Java类型信息(Class对象)与反射机制 深入理解Java枚举类型(enum) 深入理解Java注解类型(@Annotation) 深入理解Java类加载器(ClassLoad ...
- 理解 LDA 主题模型
前言 gamma函数 0 整体把握LDA 1 gamma函数 beta分布 1 beta分布 2 Beta-Binomial 共轭 3 共轭先验分布 4 从beta分布推广到Dirichlet 分布 ...
随机推荐
- .Net中多线程类的使用和总结
lock, Monitor, Thread, Join, BackGroundWorker. 消费者和生产者.Async 委托Invoke TypeHandle中BlockIndex. http: ...
- python selenium - SSL处理(https)
在实际的自动化测试实践中,因为越来越多的站点接入https,使得我们原有的python selenium2自动化测试代码进行测试时,浏览器总是报安全问题,即便在浏览器选项中将被测网址加入信任网址也没用 ...
- WPF使用X:Static做多语言支持
让程序支持多语言,一般把需要显示的字符串保存在一个资源类的static属性中. <!--[if !supportLists]--> <!--[endif]--> 微软的WPF程 ...
- Lumen开发:结合Redis实现消息队列(2)
上一篇讲了Lumen配置Redis,现在来讲一下,如何实现消息队列 2.编写任务类 2.1 任务类结构 默认情况下,应用的所有队列任务都存放在app/Jobs目录.任务类非常简单,正常情况下只包含一 ...
- Apache启动失败(Windows 无法在本地计算机启动Apache2.2)
该问题产生的原因有很多,这里就说说我遇到的问题: 这个问题是突然遇到的,启动的时候连日志都没有产生,最后是通过window的日志中发现问题所在的,如图所示: 发现是目录错了.其他问题也可以通过该日志找 ...
- 【BZOJ3672】[Noi2014]购票 树分治+斜率优化
[BZOJ3672][Noi2014]购票 Description 今年夏天,NOI在SZ市迎来了她30周岁的生日.来自全国 n 个城市的OIer们都会从各地出发,到SZ市参加这次盛会. ...
- 【BZOJ4269】再见Xor 高斯消元
[BZOJ4269]再见Xor Description 给定N个数,你可以在这些数中任意选一些数出来,每个数可以选任意多次,试求出你能选出的数的异或和的最大值和严格次大值. Input 第一行一个正整 ...
- ubuntu下操作端口的方法
最简单的一个操作:sudo ufw status可检查防火墙的状态,我的返回的是:不活动 sudo ufw version防火墙版本: ufw 0.29-4ubuntu1 Copyright 2008 ...
- Django 之 ORM 字段和字段参数
ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用描述 ...
- CentOS 7.0 systemd
CentOS 7 已经切换到 systemd,系统指令也有所变化.之前用于启动.重启.停止各种服务的service 作为向后兼容的指令还能使用,但是将来可能会消失.同时,chkconfig 也改成了s ...