1、标准盒子的尺寸计算

盒子自身的尺寸:内容的宽高+两侧内边距+两侧边框

盒子在页面中占位的尺寸:内容的宽高+两侧内边距+两侧边框+两侧外边距

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>盒子自身尺寸</title>

     <style>

         div.box1{

             width:200px;

             height:200px;

             padding:20px;

             border:5px red solid;

         }

         /*盒子自身的宽度:200px + 20px*2 + 5px*2 = 250px*/

         /*盒子自身的高度:200px + 20px*2 + 5px*2 = 250px*/

         div.box2{

             width:200px;

             height:200px;

             padding:20px;

             border:5px red solid;

             margin:50px 100px;

             margin-left:-100px;/*当左侧外边距变为负值:盒子的占位宽度:200px + 20px*2 + 5px*2 + (-100px) + 100px= 250px*/

         }

         /*盒子占位的宽度:200px + 20px*2 + 5px*2 + 100px*2= 450px*/

         /*盒子占位的高度:200px + 20px*2 + 5px*2 + 50*2 = 350px*/

         /* 当盒子的外边距为负值时，盒子占位的尺寸有可能小于盒子自身的尺寸*/

     </style>

 </head>

 <body>

     <div class="box1"></div>

     box2前面的文字

      <div class="box2"></div>

     box2后面的文字

 </body>

 </html>

2、框架盒子(怪异盒子)的尺寸计算

　　直接将宽/高属性设定为盒子自身的整体尺寸，如果带有内边距或边框，则通过缩小内容区域来实现

实现盒子类型的转换
box-sizing:盒子类型设置

3、思考：当盒子无法确定具体的宽高数值时，怎么办？
问题任务:需要设定一个带有30px边框的盒子，整体宽度为浏览器窗口的50%
解决办法:将盒子转换成为框架盒子！

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>问题任务</title>

     <style>

         *{

             margin:0;

             padding:0;

         }

         .box{

             background-color:black;

             color:white;

             border:30px red solid;

             width:50%;

             box-sizing: border-box;

             padding:30px;

         }

     </style>

 </head>

 <body>

     <div class="box"></div>

 </body>

 </html>

4、box-sizing的实际应用:
要求一:实现一个两栏并列的网页布局(提示:通过float属性实现并列)
要求二:其中左列为30%宽，右列为70%宽
要求三:两列盒子中的内容距离盒子边缘有一定的空白距离

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>两列布局</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         div{

             float:left;

             height:300px;

             padding:50px;

             box-sizing:border-box;

         }

         .leftbox{

             background-color:#0d8ddb;

             width:30%;

         }

         .rightbox{

             background-color: pink;

             width:70%;

         }

     </style>

 </head>

 <body>

     <div class="leftbox">左边的盒子内容</div>

     <div class="rightbox">右边的盒子</div>

 </body>

 </html>

【CSS】盒子模型的计算的更多相关文章

  1. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  2. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  3. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  4. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  5. 前端面试必备的css盒子模型

    今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. css盒子模型（box-sizing）

    盒子模型 关于CSS重要的一个概念就是CSS盒子模型.它控制着页面这些元素的高度和宽度.盒子模型多少会让人产生一些困惑,尤其当涉及到高度和宽度计算的时候.真正盒子的宽度(在页面呈现出来的宽度)和高度, ...

  8. 前端之CSS——盒子模型和浮动

    一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  9. 学习css盒子模型

    在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...

  10. css盒子模型的宽度不包括margin

    看到教程上和一些博客上盒子模型的宽度 = content + padding + margin + border,应该是不包括margin的 <!DOCTYPE html> <htm ...

随机推荐

  1. mfc CString,string,char* 之间的转换

    知识点: CString转char*,string string转char*,CString char* 转CString,string 一.CString转char*,string //字串转换测试 ...

  2. jqGrid 列内容超过一定长度省略表示

    jqgrid初始化方法中的,对应列添加formatter方法 colNames : [ "描述" ], colModel : [ { name : 'description', i ...

  3. 移动端三合一瀑布流插件（原生JS）

    没有前言,先上DEMO(手机上看效果更佳)和 原码. 瀑布流形式的图片布局方式在手机等移动端设备上运用广泛,比较常见的是下面前两种: 一.等宽等高 这种形式实现起来非常容易,这里就不再多说. 二.等宽 ...

  4. Gulp：插件编写入门

    之前挖了个坑,准备写篇gulp插件编写入门的科普文,之后迟迟没有动笔,因为不知道该肿么讲清楚Stream这货,毕竟,gulp插件的实现不像grunt插件的实现那么直观. 好吧,于是决定单刀直入了.文中 ...

  5. Asp.Net_的传值跟存储值操作

    页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryString,Session,Cookie ...

  6. Excel读取Word Table元素

    Option Explicit Sub Mian() Application.ScreenUpdating = False Application.DisplayAlerts = False Appl ...

  7. TKmath Package gp数据类型

    点,向量,方向 二维:gp_Pnt2d, gp_Vec2d, gp_Dir2d:它们的内部都存储 gp_XY 三维:gp_Pnt, gp_Vec, gp_Dir:它们的内部都存储 gp_XYZ 轴向与 ...

  8. 一个Boss直聘机器人, 自动回复发简历

    goBoss 基佬github地址 这是基于go语言编写的一款boss直聘机器人软件(牛人版).附上Python版本, 无需配置Go环境, 我会提供windows和macos的可执行程序.不喜勿喷O( ...

  9. win10引导错误的修复（内容系转载）

    #!尊重原作者,再此声明此内容属于网络转载,只是为了能保留下来方便日后查阅!!! win10误删引导文件,0xc0000098的解决方案,bcd引导文件受损情况分析 一.※相对简单的解决方法,对应的情 ...

  10. SpringMVC（三）-- springmvc的系统学习之数据的处理，乱码及restful

    资源:尚学堂 邹波 springmvc框架视频 一.提交数据的处理 1.提交的域名称和处理方法的参数一致 (1)提交的数据:http://localhost:8080/data/hello.do?na ...