當你設定一個元素樣式為 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. Hadoop_10_shuffle02_详解Shuffle过程【来源网络】推荐更为详细

    网址:http://www.cnblogs.com/felixzh/p/4680808.html Shuffle过程,也称Copy阶段.reduce task从各个map task上远程拷贝一片数据, ...

  2. 简单几何(点的位置) POJ 1584 A Round Peg in a Ground Hole

    题目传送门 题意:判断给定的多边形是否为凸的,peg(pig?)是否在多边形内,且以其为圆心的圆不超出多边形(擦着边也不行). 分析:判断凸多边形就用凸包,看看点集的个数是否为n.在多边形内用叉积方向 ...

  3. [Leetcode] Wildcard Matching

    Implement wildcard pattern matching with support for '?' and '*'. '?' Matches any single character. ...

  4. 【BZOJ】1074: [SCOI2007]折纸origami

    http://www.lydsy.com/JudgeOnline/problem.php?id=1074 题意:一开始有一个左上角是(0,100),右下角是(100,0)的纸片,现在可以沿有向直线折n ...

  5. Hashtable和Dictionary<T,K>的使用

    由于Hashtable内部自带有排序(根据Key的HashCode来进行的),因此有时在使用Hashtable时就会造成数据顺序不可控的情况,有两种办法可以解决, 测试代码: Dictionary&l ...

  6. nosql数据库比较

  7. tomcat配置虚拟目录映射

    本文主要介绍web虚拟目录映射的两种常用方法及配置默认web应用的方法 一.在Server.xml中进行配置 在<Host>元素中添加子元素<Context path=" ...

  8. js不能执行的几个小白错误

    1.如果使用jquery,而没有将js代码写在$(function(){}):里边,没等dom全部加载完,在执行时出现错误 2.如果感觉都写对了却没有执行,那么可能是在想要执行的函数前有一加载就能执行 ...

  9. XSS挑战第一期Writeup

    0x00 起因 这期 XSS 挑战的起因是在阅读“Modern Web Application Firewalls Fingerprinting and Bypassing XSS Filters”过 ...

  10. Html - 浮动的云朵

    http://www.17sucai.com/download/9006.html @-webkit-keyframes animate-cloud { from { background-posit ...