参考：http://www.w3school.com.cn/cssref/pr_box-sizing.asp

CSS3 box-sizing 属性

定义和用法

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

语法

box-sizing: content-box|border-box|inherit;
值     　　　　　　　　　　描述

content-box     这是由 CSS2. 规定的宽度高度行为。

　　　　　　　　　宽度和高度分别应用到元素的内容框。

　　　　　　　　　在宽度和高度之外绘制元素的内边距和边框。


border-box     为元素设定的宽度和高度决定了元素的边框盒。

　　　　　　　　  就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

　　　　　　　　　通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。


inherit        规定应从父元素继承 box-sizing 属性的值。

实例：

<!DOCTYPE html>

<html>

<head>

<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:%;

border:1em solid red;

float:left;

}

</style>

</head>

<body>

<div class="container">

<div class="box">这个 div 占据左半部分。</div>

<div class="box">这个 div 占据右半部分。</div>

</div>

</body>

</html>

(十二)学习CSS之box-sizing 属性的更多相关文章

  1. (十二)学习CSS之display属性

    参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOC ...

  2. 还需要学习的十二种CSS选择器

    在前面的文章中,我们在介绍了<五种你必须彻底了解的CSS选择器>,现在向大家介绍,还需要学习的另外十二种CSS选择器.如果你还没有用过,就好好学习一下,如果你已经熟知了就当是温习. 一.X ...

  3. 第十二课 CSS基本选择器 css学习2

    基础选择器一.标签选择器(元素选择器)标签选择器是指用HTML标签名称作为选择器,按标签名称分类语法:标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;} 二.类选择器1.类选择器使用&q ...

  4. 从零开始学习html（十二）CSS布局模型——下

    五.什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样, 每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧. ...

  5. 从零开始学习html（十二）CSS布局模型——上

    一.css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了. 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之 ...

  6. (二)学习CSS之cursor属性

    参考:http://www.w3school.com.cn/tiy/t.asp?f=csse_zindex cursor 属性规定要显示的光标的类型(形状). <html> <bod ...

  7. Html学习之十二（CSS选择器的应用二）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. css display:box 新属性

    一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 前提:使用如下属性,必须在父代设置displ ...

  9. 第一周复习二 （CSS样式表及其属性）

    样式表三种写法 1内联写法:style直接写在标签内.个人感觉多用于个别标签,一般情况优先级较高 style="font-size:16px;" 2内嵌写法:写在<head& ...

随机推荐

  1. oracle中的隐式提交（auto commit）

    通常我们执行sql或pl/sql时,需要我们手工提交.这样才能使所做的更改永久保存到数据库. 但有时即使我们没有在sql或pl/sql中发出commit命令,所做的更改也会被提交.这种提交是在某些特定 ...

  2. 【发问】代表ODBC、Ibatis 发问 Hibernate、Linq、Entity、JPA

    分页: 多表关联查询: 多表操作 临时表: 存储过程式长语句 : Hibernate与iBATIS的比较 博客分类: db iBATISHibernateSQL数据结构ORM  1.出身 hibern ...

  3. Linux的安全模式

    今天尝试了一下开机启动,在rc.local中进行设置,但是我写的java -jar transport.jar是一个Hold处理,无法退出:导致开机的时候一直停留在等待页面. 处理机制: 1. 在Li ...

  4. python学习笔记21（正则表达式）

    正则表达式模式: 模式 描述 ^ 匹配的开始的 $ 匹配行尾 . 匹配除换行符的任何单个字符.使用-m选项允许其匹配换行符也是如此. [...] 匹配括号内任何单个字符 [^...] 匹配非单个字符集 ...

  5. 1189: [HNOI2007]紧急疏散evacuate - BZOJ

    Description 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是'.',那么表示这是一块空地:如果是'X',那么表示这是一面墙,如果是'D',那么表示这是一 ...

  6. 3.8 spring-qualifier 子元素的使用与解析

      对于 qualifier 子元素,我们接触的更多的是注解形式,在使用Spring 自动注入时,Spring 容器中匹配的候选 Bean 数目必须有且仅有一个.当找不到一个匹配的 Bean 时, S ...

  7. mac下设置maven环境

    在mac系统下设置maven环境. 1.首先通过终端打开    .bash_profile 2.设置maven解压后的路径地址 环境变量设置如下: MAVEN_HOME .PATH 两个变量即可 3. ...

  8. 转Spring+Hibernate+EHcache配置(二)

    Spring AOP+EHCache简单缓存系统解决方案 需要使用Spring来实现一个Cache简单的解决方案,具体需求如下:使用任意一个现有开源Cache Framework,要求可以Cache系 ...

  9. 对JAVA动态代理的理解

    叫动态代理就代表着有“静态代理”这回事. 而且,通常“动态”至少听着更NB一点. 关键就在于不明白啥叫“动”,这个得跟“静”比较下. 在我的理解,静态代理得自己声明一个类,实现跟被代理对象同样的接口. ...

  10. WAF SSI

    http://www.2cto.com/Article/201405/299154.html