當你設定一個元素樣式為 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. http://blog.csdn.net/jun55xiu/article/details/43051627

    http://blog.csdn.net/jun55xiu/article/details/43051627

  2. css 层叠样式表

    css选择器 派生选择器 根据其元素在其上下文关系来定义样式 <style type="text/css">body{ font-size:12px; color:re ...

  3. ural 1272. Non-Yekaterinburg Subway

    1272. Non-Yekaterinburg Subway Time limit: 1.0 secondMemory limit: 64 MB A little town started to co ...

  4. Pebbles

    Pebbles Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  5. GSS系列（1）——GSS1&&GSS3

    题意:询问一个区间内的最大连续子段和(GSS1),并且有单点修改的操作(GSS2). 思路:这个题目在老人家的大白鼠里出现过,不过那个是求两个下标,并且相同取更小值.——传的东西更多,判断也稍微繁琐一 ...

  6. WP7:模拟开始屏幕Tile漂动效果

    在WP7手机的开始屏幕,如果你Hold住某一个瓷贴,就会发现除了你按住的那个瓷贴其他全部下沉半透明,然后开始在不停地漂来漂去~~今天来模仿一下这个效果.新建一个项目,然后在Grid里放一个ListBo ...

  7. 【BZOJ】2818: Gcd（欧拉函数/莫比乌斯）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2818 我很sb的丢了原来做的一题上去.. 其实这题可以更简单.. 设 $$f[i]=1+2 \tim ...

  8. Mina工具类v1.5

    package com.cucpay.fundswap.util; import java.net.InetSocketAddress; import java.nio.charset.Charset ...

  9. Odoo ir actions 分析

    源代码位置:openerp/addons/base/ir/ir_actions.py 根类型:ir.actions.actions class actions(osv.osv): _name = 'i ...

  10. 安装rkhunter

    #!/bin/bash if [ ! -d /soft ];thenmkdir /soft fiwhich rkhunterif [ $? -eq 0 ];then echo "rkhunt ...