学习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如何进行通信的
什么是B/S架构(Browser/server):浏览器和服务器架构
- Bootstrap 、AngularJs
SPA 全称:single-page application单页面应用 说明:类似原生客户端软件更流畅的用户体验的页面.所有的资源都是按需加载到页面上. JSR 全称:Java Specificati ...
- 【CSS学习】--- 背景
一.前言 元素的背景区域包括:元素的内容.内边距和边框区域. CSS中用于设置背景的属性有: background-color 设置背景颜色 background-image 设置背景图片 backg ...
- 基于InfluxDB实现分页查询功能
InfluxDB作为时序数据库中的翘楚,应用范围非常广泛,尤其在监控领域. 最近做了一个功能,将InfluxDB中的数据查询出来后,在前台分页展现,比如每页10条,一共100页,可以查看首页.末页,进 ...
- 排错-lr回放错误Vuser failed to initialize extensi...解决方法
lr回放错误:Vuser failed to initialize extension LrXml.dll解决方法 by:授客 QQ:1033553122 步骤1:找到LR安装位置,打开协议目录 ...
- React.js 新手教程
正如你能从标题猜到的,这篇文章的目标是给那些有很少编程经验的读者的.比如,像我这样的人:因为迄今为止,我才探索了编程世界6个月.所以,这将是一篇新手村教程! 你只需要拥有对 HTML 和 CSS 的理 ...
- Linux下内存查看命令
在Linux下面,我们常用top命令来查看系统进程,top也能显示系统内存.我们常用的Linux下查看内容的专用工具是free命令. Linux下内存查看命令free详解: 在Linux下查看内存我们 ...
- C语言四舍五入
//今天遇到了四舍五入的问题,这些问题如果不看别人的真的难想出这么巧妙的方法啊.努力积累,早日成为大佬. int i = (int)(a + 0.5) ////小数部分大于0.4,加上0.5就会超过整 ...
- win7系统开机后电脑桌面背景变黑的解决方法
自从微软放弃了对win7系统的维护更新,一些BUG也就慢慢出现了,最近用户反映,开机后电脑桌面背景变黑,即使重新换了桌面背景,还是会出现这种情况.下面小编就来告诉大家怎样解决这一问题. 1.点击开始菜 ...
- work flow 工作流程
常用git 命令 v-1 # 切换分支 git checkout site-v1.7.8 # 提交代码前,先拉取分支 git pull # 拉取失败说明有冲突,解决冲突... # 保存在stash之中 ...