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;然后点击下一步。.…

REST与Apache Camel

在Camel中公开HTTP终结点的方法有很多&#xff1a;jetty&#xff0c;tomcat&#xff0c;servlet&#xff0c;cxfrs和restlet。 其中的两个组件– cxfrs和restlet也只需几行代码即可支持REST语义。 这个简单的示例演示了如何使用camel-restlet和camel-jdbc进行CRUD操作。 四个HT…

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

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

input点击链接另一个页面,各种操作。

1.链接到某页<input type"button" name"Submit" value"确 定" class"btn" οnclick"location.hreffilename.html" />2.返回(等同后退)<input name"Submit2" type"button" class"btn"…

80. Remove Duplicates from Sorted Array II

题目描述 Follow up for “Remove Duplicates”: What if duplicates are allowed at most twice? For example, Given sorted array nums [1,1,1,2,2,3], Your function should return length 5, with the first five elements of nums being 1, 1, 2, 2 and 3. It doesn…

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…

merge

merge语句具有按条件获取要更新或插入到表中的数据行&#xff0c;然后从1个或多个源头对表进行更新或向表中插入行两方面的能力。经常用在数据仓库中移动大量数据。 语法: merge<hint> into<table_name> using<table_view_or_query> on<condition> whe…

可以优化同步吗?

总览 有一个常见的误解&#xff0c;因为JIT很智能&#xff0c;并且可以消除对象的同步&#xff0c;而该对象仅存在于不影响性能的方法中。 比较StringBuffer和StringBuilder的测试 这两个类基本上做相同的事情&#xff0c;除了一个是同步的&#xff08;StringBuffer&#xff0…

perl exe执行提示缺少文件解决方法

在项目开发中&#xff0c;使用perl语言编译的exe可执行文件;在项目中使用了XML::LibXML模块&#xff1b;发现exe在本机电脑执行正常&#xff0c;但在其他同事执行时却提示缺少libxml2-2.dll等文件。 问题现象&#xff1a; 无法启动此程序&#xff0c;因为计算机中丢失libxml2-2…

华为抢购助手_华为荣耀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 属性将失效…

洛谷P3045 [USACO12FEB]牛券Cow Coupons

P3045 [USACO12FEB]牛券Cow Coupons 71通过248提交题目提供者洛谷OnlineJudge标签USACO2012云端难度提高/省选-时空限制1s / 128MB提交 讨论 题解 最新讨论更多讨论 86分求救题目描述 Farmer John needs new cows! There are N cows for sale (1 < N < 50,000), and …

python数据挖掘电影评分分析_Pyhon数据分析项目——男女电影评分差异比较

《用Python玩转数据》数据分析项目一、程序功能基于MovieLens100k数据集中男性女性对电影的评分来判断男性还是女性电影评分的差异性更大。二、数据来源数据集下载&#xff1a;http://files.grouplens.org/datasets/movielens/ml-100k.zip数据含义&#xff1a;u.data表示100k条…

发掘Apache Camel的力量

最近几年&#xff0c;ESB软件越来越受欢迎。 如果大多数人通常知道什么是ESB&#xff0c;那么他们很少会清楚地了解这种体系结构的不同组件的确切作用。 例如&#xff0c;Apache ServiceMix由三个主要组件组成&#xff1a;Apache Karaf&#xff08;OSGI容器&#xff09;&#…