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. 利用Python统计微信联系人男女比例以及简单的地区分布

    寒暄的话不多说,直接进入主题. 运行效果图: [准备环境] Python版本:v3.5及其以上 开发工具:随意,此处使用Pycharm [依赖包] 1.itchat (CMD运行:pip instal ...

  2. cocos2d-x学习记录5——CCTransition场景过渡

    利用CCTransition能够创建出一系列的场景过渡动画,能够使场景切换时更加绚丽丰富. CCTransition派生出很多过渡动画,传入的参数一般包括过渡时间和创建的场景. MyScene.h内容 ...

  3. 图-图的表示、搜索算法及其Java实现

    1.图的表示方法 图:G=(V,E),V代表节点,E代表边. 图有两种表示方法:邻接链表和邻接矩阵 邻接链表因为在表示稀疏图(边的条数|E|远远小于|V|²的图)时非常紧凑而成为通常的选择. 如果需要 ...

  4. 火狐浏览器之伪造IP地址

    前言: 前段时间,测试过程中需要伪造来源IP地址,百思不得其解,因而发现火狐浏览器的这个Modify Headers插件,十分好用,推荐给大家. 步骤: 1.安装插件Modify Headers 进入 ...

  5. [沈航软工教学] 学生项目Coding地址汇总

    同学们把自己的coding主页链接贴在评论里,要求格式"班号+学号+coding主页链接",如: "1301+13061193 + https://coding.net/ ...

  6. 基于Winform框架DataGridView控件的SqlServer数据库查询展示功能的实现

    关键词:Winform.DataGridView.SqlServer 一个基于winform框架的C/S软件,主要实现对SqlServer数据库数据表的实时查询. 一.为DataGridView添加数 ...

  7. 安装visual studio过程

    昨天上了一天课 ,晚上回到寝室就开始装visual studio这个软件,由于室友有安装包,免去了下载软件的时间,下面是装载软件的步骤: 点击安装,就可以了,安装完显示文件包失败,还以为是哪里弄错了, ...

  8. sql两个日期之间的查询统计

    sql查询统计 sql语句: select count(code) as '统计',create_time as '订单时间' from sp_orders where datediff(create ...

  9. 在 SQL Server 中从完整路径提取文件名(sql 玩转文件路径)

    四个函数: --1.根据路径获取文件名 -- ============================================= -- Author: Paul Griffin -- Crea ...

  10. d3 数学方法（伪随机数生成器 ）

    一.正态(高斯)分布(normal (Gaussian) distribution)的随机数 /* var nomarlRandmo = d3.random.normal(); console.log ...