扯点：Box Modal - 盒模型

Tony 发布于2019-08-29 12:17 / 2010人阅读

摘要：在文档中，元素被表示为一个矩形的盒子。在中，使用盒模型描述这些矩形盒子中的每一个。规定以具体单位计的内边距值，比如像素厘米等。但不允许使用负值。实际测试的百分比，测试结果并不是等于，而是近似等于。

在文档中，元素被表示为一个矩形的盒子。

在CSS中，使用盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边(margin), 边框边(border), 内填充边(padding)与内容边(content)。

计算元素宽高

box-sizing 决定元素宽度和高度如何计算

box-sizing支持的属性

content-box | border-box

值	描述
content-box	宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

padding

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。但不允许使用负值。
%	规定基于父元素的宽度的百分比的内边距。

实际测试padding的百分比，测试结果并不是等于，而是近似等于。浏览器计算会存在偏差，

border

border绘制在“元素的背景之上”,换句话来说，元素的背景是内容、内边距和边框区的背景。

border默认样式border-style:none;

默认颜色border-color: 元素文本颜色。利用这个特性，解决边框和文本颜色需要保持的设计要求。

实现透明边框 border-color:transparent;

margin

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。
%	规定基于父元素的宽度的百分比的外边距

margin: auto计算规则

设置margin: auto后，

行内元素，行内块级元素margin取值0；

块级元素，在文档流中

margin-bottom和margin-top取值0；

margin-left和margin-right取值相同，按照下面公式计算

"margin-left" + "border" + "padding" + "width" + "margin-right" = width of containing block

块级元素，不在文档流中

margin-left和margin-right取值相同，按照下面公式计算

"margin-left" + "border" + "padding" + "width" + "margin-right" = width of containing block

margin-top和margin-bottom取值相同，按照下面公式计算

"margin-top" + "border" + "padding" + "height" + "margin-bottom" = height of containing block

margin collapsing(外边距塌陷、外边距合并)

在同一个文档流中，同一个BFC内，两个相邻块级元素的垂直方向上外边距（margin-top/margin-bottom）会合并

当两个元素属于不同的BFC时，这两个元素的外边距不会合并。

发生外边距塌陷的三种基本情况

相邻的兄弟姐妹元素

块级父元素与其第一个/最后一个子元素

空块块级元素

idc机房托管私有云盒模型盒模型html吗简述html盒模型来扯点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111792.html

扯点：FC - Formatting Context

摘要：指页面中一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。两个同胞盒间的垂直距离取决于属性。同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。 FC（Formatting Context）指页面中一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。常见的FC有BFC、IFC，GFC和FFC。 BF...

notebin 2019-08-29 14:11 评论0 收藏0
编码规范系列：css规范

摘要：只有在必须将样式限制在父元素内也就是后代选择器，并且存在多个需要嵌套的元素时才使用嵌套。制定一致的注释规范。设置文件编码为。语法用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。为选择器分组时，将单独的选择器单独放在一行。为了代码的易读性，在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。每条声明语句的 : 后应该插入...

fnngj 2019-08-30 15:53 评论0 收藏0
你不知道的CSS（二）

摘要：用来控制表格单元格宽度你也许遇到过给表格设置了宽度，但是不起作用的问题。这是因为单元格的宽度是根据其内容进行调整的。显而易见的，默认情况下，单元格宽度受其内容约束。而设置了后，其单元格宽度变得可控了。本文首发于我的博客在上文《你不知道的CSS（一）》中，介绍了兄弟选择器美化表单，font-size:0消除间隙，overflow清除浮动，border绘制三角形等7个实用技巧。由于文章长...

sewerganger 2019-08-29 13:22 评论0 收藏0
基于状态机模型的斗地主游戏（NodeJs&SocketIO）

摘要：系统结构系统考虑使用和实现服务器端逻辑，前端使用。逻辑流程主要逻辑包括用户进入游戏等待对家进入游戏游戏过程结束统计这个过程。 1. 系统结构系统考虑使用Nodejs和SocketIo实现服务器端逻辑，前端使用HTML5。showImg(https://segmentfault.com/img/remote/1460000007643089); 2. 逻辑流程 1 . 主要逻辑包括用户...

NoraXie 2019-08-30 13:10 评论0 收藏0
基于状态机模型的斗地主游戏（NodeJs&SocketIO）

摘要：系统结构系统考虑使用和实现服务器端逻辑，前端使用。逻辑流程主要逻辑包括用户进入游戏等待对家进入游戏游戏过程结束统计这个过程。 1. 系统结构系统考虑使用Nodejs和SocketIo实现服务器端逻辑，前端使用HTML5。showImg(https://segmentfault.com/img/remote/1460000007643089); 2. 逻辑流程 1 . 主要逻辑包括用户...

xcold 2019-08-22 10:44 评论0 收藏0