當你設定一個元素樣式為 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. [Algorithms(Princeton)] Week1 - PercolationStats

    public class PercolationStats { private int N; private int T; private double[] results; public Perco ...

  2. [Unity2D]脚本的使用规则

    Unity2D的游戏脚本可以使用3中开发语言来编写:C#,JavaScript和BOO.你可以选择你熟悉的编程语言来编写,通常C#语言的编程功能会更加强大一些,成为首选的语言.在Unity2D中使用C ...

  3. cvReleaseImage 释放内存出错

    cvReleaseImage是OpenCV中C语言库中的释放图片内存的函数,比如我们加载或者克隆了一幅图片,当不需要这幅图片了时,我们为了避免内存泄露,需要释放这些空间,可以参见我之前的博客OpenC ...

  4. OpenCV2.4.10 Mac Qt Configuration

    Download OpenCV 2.4.10 Download CMake 2.8 Open CMake and choose the source code directory and build ...

  5. MS14-025引起的问题 - 2

    5月,微软在13日发布月度安全更新,其中 有KB2871997和 KB2928120两个知识库文章Knowledgeased(而KB2871997甚至不是Security Bulletin).对于无论 ...

  6. 【转】Windows7系统下硬盘安装全新更高版本Windows7

    原文地址:http://jingyan.baidu.com/article/656db918aee053e381249c06.html 1.下载windows7 7600 ISO镜像(RC或RTM), ...

  7. HTML: margin詳解

    margin:10px; 設置塊元素的上,右,下,左方向的值同爲10px margin:10px 30px; 設置塊元素的上和下爲10px,左和右爲30px; margin:10px 20px 30p ...

  8. java--字符串替换replace，replaceAll，replaceFirst

    1.字符串替换,replace string s="abcdfersabcdsgacabc"; 将字符串中的abc替换成bdf s.replace("abc", ...

  9. 大话数据结构（八）Java程序——双向链表的实现

    线性链表--双向链表 双向链表定义: 双向链表(double linked list): 是在单表单的每个结点中,再设置一个指向前驱结点的指针域.因此,在双向链表中的结点都有两个指针域,一个指向前驱, ...

  10. jq tab

    <div id="outer"> <ul id="tab"> <li class="current">t ...