CSS 盒模型与box-sizing

一、盒模型

一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在。

MDN的描述:

When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

Every box is composed of four parts (or areas), defined by their respective edges: the content edgepadding edgeborder edge, and margin edge.

CSS盒模型有四条边:外边距边、边框边、内填充边、内容边(Content edge、Padding edge、Border edge和Margin edge),四条边由内到外把它划分为四个区域:内容区域、内边距区域、边框区域、外边距区域(Content area、Padding area、Border area和Margin area)。

box_model

  • 内容区域(content area )是包含元素真实内容的区域。
  • 内边距区域(padding area) 延伸到包围padding的边框。如果content area设置了背景、颜色或者图片,这些样式将会延伸到padding上。
  • 边框区域(border area )是包含边框的区域,扩展了内边距区域。
  • 外边距区域(margin area)用空白区域扩展边框区域,以分开相邻的元素。

通过CSS属性(width、height、padding、border和margin)来控制它们的尺寸。

二、box-sizing(css3属性)

1.box-sizing的值

1 /* 关键字 值 */
2 box-sizing: content-box;/*默认值*/
3 box-sizing: border-box;
4 
5 /* 全局 值 */
6 box-sizing: inherit;
7 box-sizing: initial;
8 box-sizing: unset;

2.box-sizing的作用

box-sizing的作用就是告诉浏览器,使用的盒模型是W3C盒模型,还是IE盒模型。

a.当 box-sizing 的值为 content-box(默认值) 时,其尺寸计算公式为:

width = content-width;
height = content-height;

b.当 box-sizing 的值为 border-box 时,其尺寸计算公式为:

width = content-width   padding-left   padding-right   border-left-width   border-right-width;
height = content-height   padding-top   padding-bottom   border-top-height   border-bottom-height;

无论取何值,盒子尺寸是一样的,改变的是盒子的容量(盒子内部的width和height的计算方式)。

w3c_and_ie_box_model

补充:IE6、7为W3C盒模型。

3.对于box-sizing属性值的选择

在项目里,究竟该使用哪种盒模型?我也不知道啊

在MDN上有这样一句话:

Some experts recommend that web developers should consider routinely applying box-sizing: border-box to all elements.

一些专家甚至建议所有的Web开发者们将所有的元素的 box-sizing 都设为 border-box。

Twitter的开源框架Bootstrap3就全局设置了box-sizing: border-box,由此可见IE盒模型的是比较受欢迎的。

补充:

W3C在CSS3中,加入了 calc() 函数。

CSS函数

calc()
可以用在任何一个需要
<length>
<frequency>
<angle>
<time>
<number>
、或
<integer>
的地方。有了
calc(),
你就可以通过计算来决定一个CSS属性的值了。

/* property: calc(expression) */
width: calc(100% - 80px);

使用 calc() 函数,我们可以在 content-box 里实现 border-box,相对的,在 border-box 里实现 content-box 也是可以的。

本文转载于:猿2048➝https://www.mk2048.com/blog/blog.php?id=hij20jaa&title=CSS 盒模型与box-sizing

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370224.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java课程设计 购物车系统(个人博客) 201521123052 蓝锦明

1. 团队课程设计博客链接 课程设计团队博客 2. 个人负责模块或任务说明 &#xff08;1&#xff09;制作图形菜单引导界面 &#xff08;2&#xff09;定义各获取和输出类函数 3. 自己的代码提交记录截图 4. 自己负责模块或任务详细说明 import java.text.NumberFormat; public c…

7-12(图) 社交网络图中结点的“重要性”计算(30 分)

在社交网络中&#xff0c;个人或单位&#xff08;结点&#xff09;之间通过某些关系&#xff08;边&#xff09;联系起来。他们受到这些关系的影响&#xff0c;这种影响可以理解为网络中相互连接的结点之间蔓延的一种相互作用&#xff0c;可以增强也可以减弱。而结点根据其所处…

linux系统的安装程序,Linux系统安装

为了不影响本机系统&#xff0c;建议在虚拟机上创建并安装Linux系统&#xff0c;本次安装centos7 64位的镜像。详细步骤如下&#xff1a;1、首先在虚拟机主页创建新的虚拟机。... 图1.1 2、选择自定义安装&#xff0c;这样方便我们更好了解虚拟机&#xff0c;然后点击下一步。.…

百米路由器2登陆地址_腾达无线路由器怎么安装,真的不错

腾达无线路由器怎么安装1、WAN口连接宽带进线(即网络公司进来的线或猫出来的线&#xff0c;一般颜色不一样)、LAN口连接局域网内的电脑。2、设置所连接电脑的IP地址。右键点击网上邻居属性3、右键点击本地连接属性4、选择Internet协议TCP/IP属性5、点击选择自动获得IP地址和自动…

JavaFX 2 XYCharts和Java 7功能

我最喜欢的JavaFX 2功能之一是它在javafx.scene.chart包中提供的标准图表。 该软件包提供了几种不同类型的现成图表。 除了其中之一&#xff08; PieChart &#xff09;以外&#xff0c;所有其他都是“ 2轴图”&#xff08; XYChart的特定实现&#xff09;。 在本文中&#xff…

前端基础-HTML的的标签详解

阅读目录 一、head内常用标签二、 HTML语义化三、 字符实体四、 h系列标签五、 p标签六、 img标签七、 a标签八、 列表标签九、 table标签十、 form标签 一、 head内常用标签 1、meta相关 #1、指定字符集<meta charset"gbk">#2、页面描述<meta name"…

new失败跟踪函数_WinDbg预览时间线:调试器中的时间线可以允许用户记录跟踪

时间旅行调试(TTD)允许用户记录跟踪&#xff0c;这些跟踪是对程序执行的记录。时间线是执行过程中发生的事件的直观表示&#xff0c;这些事件可以是包括断点&#xff0c;内存读/写&#xff0c;函数调用和返回以及异常。使用时间线窗口可以快速查看重要事件&#xff0c;了解相对…

linux 进程的执行时间,Linux 获取进程执行时间

Linux 获取进程执行时间1 前言测试一个程序的执行时间, 时间包括用户 CPU 时间系统 CPU 时间时钟时间之前获取之前时间都是在程序的 main 函数用 time 函数实现, 这个只能粗略的计算程序的执行时间, 不能准确的获取其他时间在看 APUE 时, 书中有关程序时间测试程序, 非常正规, …

Java环境变量的设置

1.计算机->属性->高级系统设置->环境变量 2.设置JAVA_HOME和path&#xff0c;1.5之后的JDK可以不设置classpath 3.JAVA_HOME的路径是JDK的安装路径 4.在系统变量里面找到path&#xff0c;然后点击修改&#xff0c;在最后面添加%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; 5…

华为抢购助手_华为荣耀20系列手机采用的五项新科技,科普简介

5月底荣耀20系列在上海发布&#xff0c;荣耀20系列旗舰手机拥有五项荣耀自主研发的新科技&#xff0c;包括LinkTurbo网络聚合加速、超级NFC、方舟编译器、人性化YOYO智慧生命体&#xff0c;超级蓝牙。下面分别介绍一下这五项新科技。LinkTurbo网络聚合加速先来科普一下LinkTurb…

Flex弹性布局

1 Flex: 弹性布局 (转) 任何一个容器都可以指定为 Flex 布局。 1 .box {2  display: flex;3 } 行内元素也可以使用 Flex 布局。 1 .box{2 display: inline-flex;3 } 注意&#xff0c;设为 Flex 布局以后&#xff0c;子元素的 float、 clear 和 vertical-align 属性将失效…

firewallD卸载Linux,在Ubuntu 18.04/16.04系统上安装和使用Firewalld的方法

本文介绍Firewalld在Ubuntu 18.04或Ubuntu 16.04发行版上的安装方法及基本用法。简介Firewalld是Linux防火墙管理工具&#xff0c;支持IPv4、IPv6、以太网桥和IPSet防火墙设置&#xff0c;它充当Linux内核的netfilter框架的前端&#xff0c;同时Firewalld是RHEL 7系列上的默认防…

PCGen的垃圾收集分析

介绍 我决定结合我的两个软件爱好&#xff0c;并在PCGen上进行一些分析&#xff0c; PCGen是一种流行的基于Java的开放源代码角色生成器&#xff0c;用于角色扮演游戏。 我用Censum &#xff0c;我们&#xff08; jClarity的&#xff09;新的垃圾收集日志分析工具来进行分析。 …

springboot不会运行gc_SpringBoot 和JVM 调优(深度好文,建议收藏)

点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐]项目调优作为一名工程师&#xff0c;项目调优这事&#xff0c;是必须得熟练掌握的事情。在SpringBoot项目中&#xff0c;调优主要通过配置文件和配置JVM的参数的方式进行。一、修改配置文件关于修改配置文件 application.p…

3dobject用什么打开_第一次用开塞露是什么感觉?网友:像打开了新世界的大门

第一次用开塞露是什么感觉&#xff1f;网友:像打开了新世界的大门我妈说我小时候便秘去医院&#xff0c;医生给开了支开塞露&#xff0c;然后在医院的公厕里使用的&#xff0c;我妈的描述是:“要不是我手挪走的快点&#xff0c;就直接喷我手了”。。。。。。。。。。。。。。。…

Java 7中对String.substring的更改

众所周知&#xff0c;在您生成相同源字符串的许多子字符串的情况下&#xff0c;Java会优化子字符串操作。 它通过使用(value, offset, count)存储信息的方式来做到这一点。 请参阅以下示例&#xff1a; 在上图中&#xff0c;您会看到字符串“ Hello”和“ World&#xff01;”…

原生js创建模态框

1.效果图如下&#xff1a; 2.代码如下&#xff1a; <!DOCTYPE html><html><head><meta charset"UTF-8"><title>Test</title><style>#pageMask {visibility: hidden; position: absolute;left: 0px; top: 0px;width:…

CSS节选——选择器

CSS&#xff0c;cascading style sheet&#xff0c;层叠样式表&#xff0c;请留意层叠概念。 css3为了区分伪类和伪元素&#xff0c;伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元素——::first-letter,::first-line,::before…

vue.js基础知识篇(7):表单校验详解

目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vuerequire("vue"); var VueValidatorrequire("vue-validator"); Vue.use(VueValidator); 2.直接使用script标签引入vue.js 要下载vue-validator&#xff0c…

SQL数据库中临时表、临时变量和WITH AS关键词创建“临时表”的区别

原文链接&#xff1a;https://www.cnblogs.com/zhaowei303/articles/4204805.html SQL数据库中数据处理时&#xff0c;有时候需要建立临时表&#xff0c;将查询后的结果集放到临时表中&#xff0c;然后在针对这个数据进行操作。 创建“临时表”&#xff08;逻辑上的临时表&…