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. Word2010去除灰色中括号标记

    在使用的Word复制内容时,有时会出现这种情况: 去除灰色中括号 出现这种情况,是因为无意中插入了书签.解决方案如下: 或者直接使用ctrl+shift+F5,选择要删除的标签

  2. Kubernetes学习之路（二十五）之Helm程序包管理器

    目录 1.Helm的概念和架构 2.部署Helm (1)下载helm (2)部署Tiller 3.helm的使用 4.chart 目录结构 5.chart模板 6.定制安装MySQL chart (1 ...

  3. python3获取文件及文件夹大小

    获取文件大小 os.path.getsize(file_path):file_path为文件路径 >>> import os >>> os.path.getsize ...

  4. mybatis 异常 too many connections 解决方案 mysql

    参考: https://blog.csdn.net/u011628250/article/details/54017481 https://www.cnblogs.com/baby123/p/5710 ...

  5. stl源码剖析 详细学习笔记deque（1）

    //--------------------------15/3/12---------------------------- deque { deque没有容量(capacity)观念,是动态分段的 ...

  6. 如何用istio实现请求超时管理

    前言 在前面的文章中,大家都已经熟悉了Istio的故障注入和流量迁移.这两个方面的功能都是Istio流量治理的一部分.今天将继续带大家了解Istio的另一项功能,关于请求超时的管理. 首先我们可以通过 ...

  7. NO--12模拟服务器端请求之node.js

    最近几天项目上线,工作比较忙,没时间更博了,好在今天有点时间并且同事问道我一个问题,正好一块解决 使用 Vue 写项目肯定会遇到一个问题,如何模拟服务端请求数据,那这就需要用到 node.js 了. ...

  8. Cloud Native Weekly | KubeCon首登中国，华为云亮相KubeCon 2018，微软云服务又罢工

    1.KubeCon首登中国,Kubernetes将如何再演进? 11月14日,由CNCF发起的云原生领域全球最大的峰会之一KubeCon+CloudNativeCon首次登陆中国,中国已经成为云原生领 ...

  9. 三种迭代Java ArrayList方法及比较

    闲来无事,研究一下Java Collection,首先是ArrayList. 通过三种方式遍历了长度为100000的ArrayList. import java.util.*; public clas ...

  10. [2017BUAA软工助教]个人得分总表（至alpha结束）

    一.表 学号 第0次 week1 week2 week3 个人项目 附加1 结对项目 附加2 a团队 a团队得分 a贡献分 总分(不计) 总分(记) 15061119 7 9.5 12 9 45.75 ...