當你設定一個元素樣式為 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. 简单几何(向量旋转+凸包+多边形面积) UVA 10652 Board Wrapping

    题目传送门 题意:告诉若干个矩形的信息,问他们在凸多边形中所占的面积比例 分析:训练指南P272,矩形面积长*宽,只要计算出所有的点,用凸包后再求多边形面积.已知矩形的中心,向量在原点参考点再旋转,角 ...

  2. BZOJ3831 : [Poi2014]Little Bird

    设f[i]表示到i最少休息次数,f[i]=min(f[j]+(h[j]<=a[i])),i-k<=j<i,单调队列优化DP #include<cstdio> #defin ...

  3. BZOJ3745 : [Coci2014]Norma

    考虑枚举右端点,用线段树维护[i,nowr]的答案. 当右端点向右延伸时,需要知道它前面第一个比它大/小的数的位置,这里面的最值将发生改变,这个使用单调队列求出,然后将所有的l都加1. 注意常数优化. ...

  4. 20145315 《Java程序设计》实验三实验报告

    实验三 敏捷开发与XP实践 实验内容 下载并学会使用git上传代码: 与同学结对,相互下载并更改对方代码,并上传: 实现代码的重载. 实验步骤 下载并用git上传代码: 1.下载并安装好git,在cm ...

  5. 洛谷 P1541 乌龟棋 Label：O（n^4）的dp

    题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家控制一个乌龟棋子从起 ...

  6. 【TYVJ】1463 - 智商问题（二分/分块）

    http://tyvj.cn/Problem_Show.aspx?id=1463 二分的话是水题啊.. 为了学分块还是来写这题吧.. 二分: #include <cstdio> #incl ...

  7. java操作FTP，实现文件上传下载删除操作

    上传文件到FTP服务器: /** * Description: 向FTP服务器上传文件 * @param url FTP服务器hostname * @param port FTP服务器端口,如果默认端 ...

  8. zabbix配置文件详解

    Zabbix之配置文件详解   zabbix配置文件种类: zabbix_server配置文件zabbix_server.conf zabbix_proxy配置文件zabbix_proxy.conf ...

  9. CVE-2014-4113 windows通杀本地提权0day

    这个0day的发现挺有意思的,是老外CrowdStrike 发现的,被老外监测程序发现显示从WEBSHELL使用Win64.exe来提升权限. 原文地址:http://blog.crowdstrike ...

  10. Ubuntu 14.04 LTS 下 android 2.3.5 源码编译过程

    Ubuntu 14.04 LTS 下 android 2.3.5 源码编译过程   在新的Ubuntu 64位系统下去编译早期的安卓源码是会出现很多问题的,因为64位系统在安装完成后,很多32位的兼容 ...