當你設定一個元素樣式為 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. Gap

    Gap Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  2. BZOJ4327 : JSOI2012 玄武密码

    对所有询问串建立AC自动机. 然后将母串在AC自动机上跑,每走到一个点x,从x点出发沿着fail指针能到的所有前缀都是匹配成功的,暴力向上走,碰到走过的就break,这样每个点最多只会被标记一次. 时 ...

  3. BZOJ3641 : 货车运输

    若一条边的v小于等于u,则贡献为l*w/v,否则贡献为l*w/u 将边按v从小到大排序,将询问按u从小到大排序 用树链剖分维护链上和,val[0]表示第一种情况下的贡献,val[1]表示第二种情况下的 ...

  4. BZOJ1111 : [POI2007]四进制的天平Wag

    POI2007完结撒花~ 首先将n转化为四进制,从低位到高位DP f[i]表示这一位不向下一位借位 g[i]表示这一位向下一位借位,但借的那个不算在i f[0]=0,g[0]=inf f[i]=mer ...

  5. POJ 2117 (割点+连通分量)

    题目链接: http://poj.org/problem?id=2117 题目大意:在一个非连通图中,求一个切除图中任意一个割点方案,使得图中连通分量数最大. 解题思路: 一个大陷阱,m可以等于0,这 ...

  6. JS URL传中文参数引发的乱码问题

    今天的项目中碰到了一个乱码问题,从JS里传URL到服务器,URL中有中文参数,服务器里读出的中文参数来的全是“?”,查了网上JS编码相关资料得以解决. 解决方法一: 1.在JS里对中文参数进行两次转码 ...

  7. freemarker 图片输出、多张图片输出（图片重复原因及解决）

    单张图片显示: 先写好word格式的文档,在其中插入一张图片,然后重命名为ftl,再用编辑器打开,把图片那一段base64信息用freemarker表达式替换掉. 之后把图片的信息输出到模板即可. 多 ...

  8. Add SSH Key to GitLab on Windows

    Download Git for windows Open Git Bash Type in "ssh-keygen -t rsa", and then press Enter b ...

  9. javascript 三个 对话框

    用法: 一般写在 </html>之后,<script language="javascript">代码必须放在这里面</script> 三个常用 ...

  10. juniper-cisco-HP上网设置

    网络拓扑: 路由模式: 第一步.配置防火墙的接口地址 编辑外网接口: 配置内网口(原理同上)(interface mode:nat) 第二步.配置防火墙的路由 第三步.配置防火墙安全策略 Cisco交 ...