学习CSS布局 - box-sizing

时间：2022-09-01 17:45:03

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布局 - box-sizing

既然没有比这更好的方法，一些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的更多相关文章

  1. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  2. &OpenCurlyDoubleQuote;学习CSS布局” 笔记

    学习网址:http://zh.learnlayout.com/no-layout.html 本文仅为学习笔记,内容非原创. position 默认值:static 没有添加额外属性的relative和 ...

  3. 学习CSS布局 - dispaly属性

    "display"属性 display 是CSS中最重要的用于控制布局的属性. 每个元素都有一个默认的 display 值,这与元素的类型有关. 对于大多数元素它们的默认值通常是  ...

  4. 学习CSS布局 - position例子

    position例子 通过具体的例子可以帮助我们更好地理解“position”.下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang= ...

  5. 学习CSS布局 - position

    position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运 ...

  6. 学习CSS布局 - 盒模型

    盒模型 在我们讨论宽度的时候,我们应该讲下与它相关的另外一个重点知识:盒模型. 当你设置了元素的宽度,实际展现的元素却超出你的设置: 这是因为元素的边框和内边距会撑开元素. 看下面的例子,两个相同宽度 ...

  7. 学习CSS布局 - 没有布局

    如果你只想把所有内容都塞进一栏里,那么不用设置任何布局也是OK的. 然而,如果用户把浏览器窗口调整的很大,这时阅读网页会非常难受: 读完每一行之后,你的视觉焦点要从右到左移动一大段距离. 试着调整下浏 ...

  8. 学习CSS布局 - max-width

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 学习CSS布局 - margin&colon; auto&semi;

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. XML代码生成器——XMLFACTORY 简介（一）

    XML代码生成器——XMLFACTORY 简介(一) 软件开发中经常要和第三方应用交互数据,特别是在银行.电信行业,这种需求更是必不可少,往往一个系统要和三五个其它系统交互数据,而数据交换的报文经常采 ...

  2. Shell 编程基础之 While 练习

    一.语法 while [ condition ] # 当 condition 条件成立时,就进行循环,直到条件不成立停止 do #执行内容 done 二.练习 输入用户输入的参数,直到用户输入 &qu ...

  3. AX 2012 query应用collections

    QueryBuildRange range; super(); this.query().dataSourceName('VendTop10VendorsByPurchase').clearDynal ...

  4. 简易控制中心，angular的简单使用

    <html> <head> <meta charset='utf-8'> <script src="js/angular.js">& ...

  5. linux常用命令 、查看日志、web排查

    linux常用命令 ps aux|grep xxx (比如 ps aux|grep tomcat ps aux|grep tomcat-portalvip ps aux|grep nginx 等) r ...

  6. 点击按钮下载图片&lpar;ie&comma;FF&comma;chrome&rpar;

    参考网上的一些资料后,总结出来 <!DOCTYPE html><html> <head> <meta content="text/html; cha ...

  7. TOP100summit：【分享实录-途牛】价格中心系统的优化之路

    本篇文章内容来自2016年TOP100summit途牛旅游网高级架构师,技术委员会开发组长赵国光的案例分享.编辑:Cynthia 导读:价格中心系统是途牛网众多系统中很重要的一个,几乎所有的售卖价格计 ...

  8. DevExpress WinForms使用教程：WinForms Sunburst控件

    [DevExpress WinForms v18.2下载] DevExpress WinForms v18.2中包含了一个新的WinForms组件 - WinForms Sunburst,它旨在帮助开 ...

  9. 网页制作中最有用的免费Ajax和JavaScript代码库

    网上看到的一篇小文,挺有用的,收藏在这. 本文中,我整理了12个免费的Ajax和JavaScript代码库,可以帮助Web开发人员将应用程序提升到一个新水平. Ajax Instant Messeng ...

  10. e637&period; 向剪切板获取和粘贴文本

    This examples defines methods for getting and setting text on the system clipboard. // If a string i ...

相关文章