转: css box-sizing的用法
當你設定一個元素樣式為 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的用法的更多相关文章
- 一个CSS中Z-index的用法
一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性 大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...
- CSS预处理器之SASS用法指南
CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...
- CSS选择器的新用法
前面的话 现在,预处理器(如sass)似乎已经成为开发CSS的标配,正如几年前jQuery是开发JS的标配一样.JS的querySelector借鉴了jQuery的选择器思想,CSS选择器也借鉴了预处 ...
- css before after基本用法【转】
<HTML><HEAD> <meta http-equiv="content-Type"content="text/html;charset ...
- Css中!important的用法
!important为开发者提供了一个增加样式权重的方法.应当注意的是!important是对整条样式的声明,包括这个样式的属性和属性值 <!DOCTYPE HTML> <html& ...
- CSS学习笔记(9)--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- CSS Box Model(盒子模型)
CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...
- 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 ...
- css和@import区别用法
css和@import都是调用外部样式表的方法. 一.用法 (1)link: <link rel="stylesheet" type="text/css" ...
- 详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...
随机推荐
- git中进入带有空格的目录下的解决办法
比如:要进入Program Files目录下 有两种方法: 1.将Program Files目录用引号引起来. $ cd "Program Files" 2.将空格处使用空格引号 ...
- HDU 1026 (BFS搜索+优先队列+记录方案)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1026 题目大意:最短时间内出迷宫.迷宫里要杀怪,每个怪有一定HP,也就是说要耗一定时.输出方案. 解 ...
- css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类。自己留存
今天发下我自己的 css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类. @charset "utf-8"; /*! * @名称:base.css * @功能 ...
- CentOS 实现自动登陆
1. 在ssh-client一边使用ssh-keygen生成一对rsa key $ssh-keygen -t rsa 2. 在ssh-client一边使用ssh-add将刚生成的private key ...
- 【C语言】06-基本数据类型
C语言有丰富的数据类型,因此它很适合用来编写数据库,如DB2.Oracle都是C语言写的. C语言的数据类型大致可以分为下图中的几类: 回到顶部 一.变量 跟其他语言一样,C语言中用变量来存储计算过程 ...
- ThinkPHP添加模板时,犯的三个错
错误一:低级错误,将n打成看m,如图1 图1 这个找错,花了我将近2小时.扫了好几遍与之相关的代码,上网查了好些. 错误二:这个算是个低能的高级错误了.具体模板显示的效果如图2 图2 只要将相对地址及 ...
- Scrum会议1
小组名称:天天向上 项目名称:连连看 参会成员:王森(Master)张金生 张政 栾骄阳 时间:2016.10.16 会议内容: 1.连连看游戏选取图片素材. 2.连连看的界面设计 3.连连看具体的功 ...
- POJ 2104&HDU 2665 Kth number(主席树入门+离散化)
K-th Number Time Limit: 20000MS Memory Limit: 65536K Total Submissions: 50247 Accepted: 17101 Ca ...
- html5_d登陆界面_注册界面
<!DOCTYPE html><html><head><script type="text/javascript">function ...
- 微信的User-Agent
Mozilla/5.0 (Linux; U; Android 5.0.2; zh-cn; MI 2C Build/LRX22G) AppleWebKit/533.1 (KHTML, like Geck ...