當你設定一個元素樣式為 box-sizing: border-box;，這個元素的內距和邊框將不會增加元素本身的寬度。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test box-sizing</title>

    <style>

    .simple {

        width: 500px;

        margin: 20px auto;

        border: solid red 40px;

        /*-webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;*/

        box-sizing: border-box;

    }

    .fancy {

        width: 500px;

        margin: 20px auto;

        padding: 50px;

        border: solid blue 10px;

        /*-webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;*/

        box-sizing: border-box;

    }

    </style>

</head>

<body>

    <div class="simple">我們現在一樣大小了！

    </div>

    <div class="fancy">喔耶！</div>

</body>

</html>

转: css box-sizing的用法的更多相关文章

  1. 一个CSS中Z-index的用法

    一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性     大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...

  2. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

  3. CSS选择器的新用法

    前面的话 现在,预处理器(如sass)似乎已经成为开发CSS的标配,正如几年前jQuery是开发JS的标配一样.JS的querySelector借鉴了jQuery的选择器思想,CSS选择器也借鉴了预处 ...

  4. css before after基本用法【转】

    <HTML><HEAD> <meta http-equiv="content-Type"content="text/html;charset ...

  5. Css中!important的用法

    !important为开发者提供了一个增加样式权重的方法.应当注意的是!important是对整条样式的声明,包括这个样式的属性和属性值 <!DOCTYPE HTML> <html& ...

  6. CSS学习笔记（9）--详解CSS中:nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  7. CSS Box Model（盒子模型）

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

  8. CSS Box Model All In One

    CSS Box Model All In One CSS 盒子模型 All In One CSS Box Model CSS Box Model Module Level 3 W3C Working ...

  9. css和@import区别用法

    css和@import都是调用外部样式表的方法. 一.用法 (1)link: <link rel="stylesheet" type="text/css" ...

  10. 详解CSS中:nth-child的用法

    前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...

随机推荐

  1. 状压DP SGU 223 Little Kings

    题目传送门 /* 题意:n*n的矩阵,放置k个king,要求king互相不能攻击,即一个king的8个方向都没有另外的king,求方案个数 状态压缩DP:dp[i][num[j]][s] 代表在第i行 ...

  2. ural 1156. Two Rounds

    1156. Two Rounds Time limit: 2.0 secondMemory limit: 64 MB There are two rounds in the Urals Champio ...

  3. USACO 5.4 Character Recognition(DP)

    非常恶心的一题,卡了三个月,没什么动力做了,代码直接抄的别人的... 这题主要思路就是预处理出几个数组,再预处理出几个数组,最后DP,输出一下路径... 写起来挺非常麻烦,代码不贴了,丢人... 把U ...

  4. Contest Hunter Round #70 - 连续两大交易事件杯省选模拟赛

    orz lydrainbowcat [Problem A]「艦これ市」70万幕后交易事件 排序机器=-=.重要的是相同的处理. 我们可以从小到大添加数字,然后维护一个位置的序列.每一种相等的数字都在一 ...

  5. 关于JS中作用域的销毁和不销毁的情况总结

    window全局作用域->页面关掉才销毁函数执行会形成私有的作用域 1)作用域的销毁 一般情况下,函数执行形成一个私有的作用域,当执行完成后就销毁了->节省内存空间 2)作用域的不立即销毁 ...

  6. Graph database_neo4j 底层存储结构分析(3)

    3.3  通用的Store 类型 3.3.1    id 类型 下面是 neo4j db 中,每种Store都有自己的ID文件(即后缀.id 文件),它们的格式都是一样的. [test00]$ls - ...

  7. linux下查看一个进程的启动时间和运行时间

    使用 ps命令 :#ps -A -opid,stime,etime,args ps -A -opid,stime,etime,args 结果: root:src# ps -A -opid,stime, ...

  8. [转帖] Symbol Emotions Sticker 英文符号表情大全

    :-) smile :-] polite smile :-( frown :-[ another frown :-/ or :-\ skepticism, annoyance, or a slight ...

  9. [转]WinForm和WebForm下读取app.config web.config 中邮件配置的方法

    本文转自:http://blog.csdn.net/jinbinhan/article/details/1598386 1. 在WinForm下读取 App.config中的邮件配置语句如下: Con ...

  10. 【转】用JIRA管理你的项目

    原文地址:http://snowolf.iteye.com/blog/875529