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. [BZOJ2687]交与并[决策单调性]

    题意 给定 \(n\) 个区间,我们定义区间集合 \(S(|S|>1)\) 的权值为 区间交 \(\times\) 区间并,找出权值最大的区间集合. \(n\le 10^6\) 分析 首先排除区 ...

  2. SSIS 事件的向上传递

    在SSIS中,Package是Task组件的有序组合,具有层次结构,Package处于层次结构的顶层(Root Level),对于父子包结构,父包(Parent Package)通过Execute P ...

  3. Flask_admin 笔记一 （快速启用）

    1,快速启用   1) 安装flask-admin pip install flask-admin 2) 配置使用 from flask import Flask from flask_admin i ...

  4. jmeter实战1

  5. OpenGL学习（3）——Shader

    之前已经接触过Vertex Shader和Fragment Shader,这次学习如何编写Shader并封装成类. Shader源码主要有四部分: 版本声明 #version xxx core: 使用 ...

  6. Hyperledger Fabric v1.1.0安装记录（国内源版）

    1. 安装虚拟机     虚拟机软件采用:VirtualBox     操作系统选择:Ubuntu 14.04     内存:4G     CPU:2核     硬盘:20G     2.(可选)更改 ...

  7. 20135316王剑桥Linux内核学习笔记第三周

    20135316王剑桥 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC 1000029000 三个法宝:存储程序计算机.函数调 ...

  8. Beta版项目总结

    1.设想与目标 我们的产品名是理财猫,为了解决当今大学生花钱不知道节制以及不知道花的钱都去哪了的痛苦,提醒他们该记录这一天的消费情况,我们有独特的办法那就是将记账软件和闹钟结合起来,每天定时的提醒用户 ...

  9. 20190215面试-C#操作外设-多线程-shocket

    百度了下,ic卡读卡器 文章;C# 读IC卡程序这个文章还不错. 从北京金木雨电子有限公司下载了,兼容IC卡 身份证阅读器的SDK资料,里面有介绍如何连接ic读卡器,对卡进行一些操作. MasterR ...

  10. Alpha冲刺-第三天

    1.1 今日完成任务情况以及遇到的问题. 完成任务情况 杜世康:使用正则表达式对于弹幕文本中的数字,字母,符号,非法字符等过滤. 刘丹,李玉莹:实现主播管理功能 曹莹雯,尹楠: 调用NLPIR/ICT ...