学习CSS布局 - box-sizing
box-sizing
人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing
的CSS属性。
当你设置一个元素为 box-sizing: border-box;
时,此元素的内边距和边框不再会增加它的宽度。
这里有一个与前一页相同的例子,唯一的区别是两个元素都设置了 box-sizing: border-box;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
/** {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}*/ .simple {
width: 400px;
height: 200px;
border: 1px solid red;
margin: 20px auto; box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
.fancy {
width: 400px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
padding: 50px; box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
</style>
</head>
<body>
<div id="simple" class="simple">我是simple</div>
<div id="fancy" class="fancy">我和simple一样大了</div> <script>
var oDiv1 = document.querySelector('#simple');
console.log(oDiv1.offsetWidth, oDiv1.offsetHeight);
var oDiv2 = document.querySelector('#fancy');
console.log(oDiv2.offsetWidth, oDiv2.offsetHeight);
</script>
</body>
</html>
结果:
既然没有比这更好的方法,一些CSS开发者想要页面上所有的元素都有如此表现。
所以开发者们把以下CSS代码放在他们页面上:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
这样可以确保所有的元素都会用这种更直观的方式排版。
不过 box-sizing
是个很新的属性,目前你还应该像我上面例子中那样使用 -webkit-
和 -moz-
前缀。
这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。
原文地址:http://zh.learnlayout.com/box-sizing.html
学习CSS布局 - box-sizing的更多相关文章
- 《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
- “学习CSS布局” 笔记
学习网址:http://zh.learnlayout.com/no-layout.html 本文仅为学习笔记,内容非原创. position 默认值:static 没有添加额外属性的relative和 ...
- 学习CSS布局 - dispaly属性
"display"属性 display 是CSS中最重要的用于控制布局的属性. 每个元素都有一个默认的 display 值,这与元素的类型有关. 对于大多数元素它们的默认值通常是 ...
- 学习CSS布局 - position例子
position例子 通过具体的例子可以帮助我们更好地理解“position”.下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang= ...
- 学习CSS布局 - position
position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运 ...
- 学习CSS布局 - 盒模型
盒模型 在我们讨论宽度的时候,我们应该讲下与它相关的另外一个重点知识:盒模型. 当你设置了元素的宽度,实际展现的元素却超出你的设置: 这是因为元素的边框和内边距会撑开元素. 看下面的例子,两个相同宽度 ...
- 学习CSS布局 - 没有布局
如果你只想把所有内容都塞进一栏里,那么不用设置任何布局也是OK的. 然而,如果用户把浏览器窗口调整的很大,这时阅读网页会非常难受: 读完每一行之后,你的视觉焦点要从右到左移动一大段距离. 试着调整下浏 ...
- 学习CSS布局 - max-width
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习CSS布局 - margin: auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- APP(通信)接口定义
- canvas实现验证码
在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写. 但是在前端,用canva或者SV ...
- 2017-12-22 日语编程语言"抚子"-第三版实现初探
前文日语编程语言"抚子" - 第三版特色初探仅对语言的语法进行了初步了解. 之前的语言原型实现尝试(如编程语言试验之Antlr4+JavaScript实现"圈4" ...
- CSS--理解块级格式上下文(BFC)
1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box(块级元素)参与, ...
- python 类函数,实例函数,静态函数
一.实现方法 class Function(object): # 在类定义中定义变量 cls_variable = "class varibale" def __init__(se ...
- 使用 ISO镜像配置 本地yum 源(RHEL, CentOS, Fedora等适用)
使用 ISO镜像配置 本地yum 源(RHEL, CentOS, Fedora等适用) 1.上传ISO镜像和挂载 1) 上传Centos7.2 ISO镜像到 /usr/local/src目录 2) ...
- 关于CSS的一些基础内容
最近用到了CSS,刚好学学.CSS(Cascading Style Sheet)中文名层叠样式表,用于为html文档添加样式控制,也是一种计算机语言. 一.CSS语法a)CSS规则由选择器和声明组成, ...
- 模拟开户接口,使用python脚本实现批量用户开通
1.目的 通过模拟接口方法,实现批量用户开通 2.分析 A.接口含body和head部分,其中body中的某些变量为必填字段,包含用户的信息. B.用户信息清单可以整理成ott_after_check ...
- Linux (Fedora 28) 如何查看 CPU 温度
机器突然负载有点高,查看CPU 温度的方法: 1.yum install lm_sensors; 2.sensors-detect 3.sensors 这些需要机器具备相应的设备,如果在虚拟机运行 ...
- [MapReduce_add_2] MapReduce 实现年度最高气温统计
0. 说明 编写 MapReduce 程序实现年度最高气温统计 1. 气温数据分析 气温数据样例如下: ++023450FM-+000599999V0202701N015919999999N00000 ...