當你設定一個元素樣式為 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. git中进入带有空格的目录下的解决办法

    比如:要进入Program Files目录下 有两种方法: 1.将Program Files目录用引号引起来. $ cd "Program Files" 2.将空格处使用空格引号 ...

  2. HDU 1026 (BFS搜索+优先队列+记录方案)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1026 题目大意:最短时间内出迷宫.迷宫里要杀怪,每个怪有一定HP,也就是说要耗一定时.输出方案. 解 ...

  3. css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类。自己留存

    今天发下我自己的 css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类. @charset "utf-8"; /*! * @名称:base.css * @功能 ...

  4. CentOS 实现自动登陆

    1. 在ssh-client一边使用ssh-keygen生成一对rsa key $ssh-keygen -t rsa 2. 在ssh-client一边使用ssh-add将刚生成的private key ...

  5. 【C语言】06-基本数据类型

    C语言有丰富的数据类型,因此它很适合用来编写数据库,如DB2.Oracle都是C语言写的. C语言的数据类型大致可以分为下图中的几类: 回到顶部 一.变量 跟其他语言一样,C语言中用变量来存储计算过程 ...

  6. ThinkPHP添加模板时,犯的三个错

    错误一:低级错误,将n打成看m,如图1 图1 这个找错,花了我将近2小时.扫了好几遍与之相关的代码,上网查了好些. 错误二:这个算是个低能的高级错误了.具体模板显示的效果如图2 图2 只要将相对地址及 ...

  7. Scrum会议1

    小组名称:天天向上 项目名称:连连看 参会成员:王森(Master)张金生 张政 栾骄阳 时间:2016.10.16 会议内容: 1.连连看游戏选取图片素材. 2.连连看的界面设计 3.连连看具体的功 ...

  8. POJ 2104&HDU 2665 Kth number(主席树入门+离散化)

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 50247   Accepted: 17101 Ca ...

  9. html5_d登陆界面_注册界面

    <!DOCTYPE html><html><head><script type="text/javascript">function ...

  10. 微信的User-Agent

    Mozilla/5.0 (Linux; U; Android 5.0.2; zh-cn; MI 2C Build/LRX22G) AppleWebKit/533.1 (KHTML, like Geck ...