参考：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. Sqoop 1.99.4 安装

    1.安装准备工作:已经装好的 hadoop 环境是 hadoop-2.5.1 64位下载的sqoop安装包(注意是hadoop200)http://www.us.apache.org/dist/sqo ...

  2. Fedora 17下安装Oracle 10g详细图文教程

    一.硬件要求——内存 & swap & 硬盘 最小内存与swap: 1 GB of RAM & swap 建议内存与swap: 2 GB of RAM & swap [ ...

  3. 零基础学Python 3之环境准备

    一. 配置python 3 环境 1. Python 3 下载 64位 https://www.python.org/ftp/python/3.4.2/python-3.4.2.amd64.msi 3 ...

  4. iOS 通览(二)

    一.关键词 extern:C语言的函数外部声明. 如果你要在一个.c或者.m中使用另外一个.c文件的函数的话,需要在文件中写入目标函数的外部引用的声明. 二.自定义View 自定义View添加控件对象 ...

  5. 1047: [HAOI2007]理想的正方形 - BZOJ

    Description 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小.Input 第一行为3个整数,分别表示a,b,n的值第二行至第a ...

  6. C#学习笔记(二)

    1.注释:注销,解释2.单行://多行:/**/文档注释:///按enter主食要保证 别人一看就明白3.快速对期待吗:ctrl+k+d,按住ctrl不放,按k,迅速抬起,再按d(按D得时候k已经抬起 ...

  7. 汇编之FS段寄存器

    FS寄存器指向当前活动线程的TEB结构(线程结构) 偏移  说明 000  指向SEH链指针 004  线程堆栈顶部 008  线程堆栈底部 00C  SubSystemTib 010  FiberD ...

  8. ural 1069

    题意:删除一棵树上的叶子 每删除一片叶子就写下连着该片叶子的节点  让你还原一棵树 记录每个节点连着的叶子数 0表示此时这个节点就是叶子  -1表示这个节点已经删除 删除的只能是0  就是说是叶子 暴 ...

  9. python datetime笔记

    python datetime笔记 http://mint-green.diandian.com/post/2011-09-09/4892024 获取当前时间,并通过字符串输出. 格式为:%Y-%m- ...

  10. 将ANGULAR与后端请求结合

    简单的结合,却是很多应用的基础.RESTFUL就此而生.瘦服务,富客户. <!DOCTYPE html> <html lang="en" ng-app=" ...