关于css:CSS世界-4章

36次阅读

共计 4125 个字符,预计需要花费 11 分钟才能阅读完成。

第 4 章 盒尺寸四大家族

盒尺寸中的 4 个盒子 content box、padding box、border box 和 margin box 别离对应 CSS 世界中的 content、padding、border 和 margin 属性。

4.1 深刻了解 content

4.1.1 content 与替换元素

1、什么是替换元素

依据“外在盒子”是内联还是块级咱们能够把元素分为内联元素和块级元素,而依据是否具备可替换内容,咱们也能够把元素分为替换元素和非替换元素。
替换元素,顾名思义,内容能够被替换。

<img src="1.jpg">

把下面的 1.jpg 换成 2.jpg,图片就会被替换。这种通过 批改某个属性值出现的内容就能够被替换的元素就称为“替换元素”。因而,<img>、<object>、<video>、<iframe> 或者表单元素 <textarea> 和 <input> 都是典型的替换元素。
替换元素除了内容能够替换这一个性以外,还有以下一些个性。
1)内容的外观不受页面上的 CSS 的影响。用业余的话讲就是款式体现在 CSS 作用域之外。(????)
2) 有本人的尺寸。
3)在很多 CSS 属性上有本人的一套规定。比拟具备代表性的就是 vertical-align 属性,对于替换元素和非替换元素,vertical-align 属性值的解释是不一样的。比方说,vertical-align 的默认值 baseline,基线,被定义为字符 x 的下边缘,然而到了替换元素那里就不实用了。因为替换元素的内容往往不可能含有字符 x,于是替换元素的基线被硬生生定义成了元素的下边缘。

2、替换元素的默认 display 值

所有的替换元素都是内联程度元素,也就是替换元素和替换元素、替换元素和文字都是能够在一行显示的。然而,替换元素默认的 display 值却是不一样的。

3、替换元素的尺寸计算规定

1)固有尺寸指的是替换内容本来的尺寸。例如,图片、视频作为一个独立文件存在的时候,都是有着本人的宽度和高度。这个宽度和高度的大小就是这里的“固有尺寸”。
2)HTML 尺寸这个概念稍微形象,咱们无妨将其设想成水煮蛋外面的那一层红色的膜,外面是“固有尺寸”这个蛋黄蛋白,里面是“CSS 尺寸”这个蛋壳。“HTML 尺寸”只能通过 HTMl 原生属性扭转,这些 HTML 原生属性包含 <img> 的 width 和 height 属性、<input> 的 size 属性、<textarea> 的 cols 和 rows 属性等。

<img width="300" height="100">
<input type="file" size="30">
<textarea cols="20" rows="5"></textarea>

3)CSS 尺寸特指能够通过 CSS 的 width 和 height 或者 max-width/min-width 和 max-height/min-height 设置的尺寸,对应盒尺寸中的 content box。

3 层构造的计算规定如下:

  • 如果没有 CSS 尺寸和 HTML 尺寸,则应用固有尺寸作为最终的宽高。
  • 如果没有 CSS 尺寸,则应用 HTML 尺寸作为最终的宽高。
  • 如果有 CSS 尺寸,则最终尺寸由 CSS 属性决定
  • 如果“固有尺寸”含有固有的宽高比例,同时仅设置了宽度或仅设置了高度,则元素按照固有的宽高比例显示。
  • 如果下面的条件都不合乎(如空内容的状况下,video、canvas、iframe 这些元素),则最终宽度的体现为 300 像素,高度为 150 像素。
  • 内联替换元素和块级替换元素应用下面同一套尺寸计算规定。
5、content 与替换元素关系分析

在 CSS 世界中,把 content 属性生成的对象称为“匿名替换元素”。
content 属性生成的内容都是替换元素。

4.2 温和的 padding 属性

4.2.1 padding 与元素的尺寸

CSS 中默认的 box-sizing 是 content-box,所以应用 padding 会减少元素的此村。
对于非替换元素的内联元素,不仅 padding 不会退出行盒高度的计算,margin 和 border 也都是如此,都是不计算高度,但实际上在内联盒四周产生了渲染。

4.2.2 padding 的百分比值

其一,和 margin 属性不同,padding 属性是不反对负值的;其二,padding 反对百分比值,然而,和 height 等属性的百分比计算规定有些差别,差别在于:padding 百分比值无论是程度方向还是垂直方向均是绝对于宽度计算的!

4.2.3 标签元素内置的 padding

padding 属性和 background-clip 属性配合,能够在无限的标签下实现一些 CSS 图形绘制成果。
backgrounf-clip 设置元素的背景(背景图片或色彩)是否延长到边框、内边距盒子、内容盒子上面。

4.3 激进的 margin 属性

padding 性情温和,负责内间距;而 margin 则比拟激进,负责外间距。

4.3.1 margin 与元素尺寸以及相干布局

1、元素尺寸的相干概念
  • 元素尺寸:在原生的 DOM API 中写作 offsetWidth 和 offsetHeight,包含 padding 和 border,也就是元素的 border box 尺寸,所以,有时候也称为“元素偏移尺寸”。
  • 元素外部尺寸:元素的外部区域尺寸,包含 padding 但不包含 border,也就是元素的 padding box 的尺寸。在原生的 DOM API 中写作 clientWidth 和 clientHeight,所以,有时候也称为“元素可视尺寸”。
  • 元素内部尺寸:示意元素的内部尺寸,不仅包含 padding 和 border,还包含 margin,也就是元素的 margin box 的尺寸。没有绝对应的原生的 DOM API。
2、margin 与元素的外部尺寸

margin 同样能够扭转元素的可视尺寸,然而和 padding 简直是互补态势。
什么意思呢?
对于 padding,元素设定了 width 或放弃“包裹性”的时候,会扭转元素可视尺寸;然而对于 margin 则相同,元素设定了 width 值或放弃“包裹性”的时候,margin 对尺寸没有影响,只有元素是“充分利用可用空间”状态的时候,margin 才能够扭转元素的可视尺寸。

4.3.2 margin 的百分比值

和 padding 属性一样,margin 的百分比值无论是程度方向还是垂直方向都是绝对于宽度计算的,不过绝对于 padding,margin 的百分比值的利用价值就低了一截,根本原因在于和 padding 不同,元素设置 margin 在垂直方向上无奈扭转元素本身的外部尺寸,往往须要副元素作为载体,此外,因为 margin 合并的存在,在垂直方向往往须要双倍尺寸能力和 padding 体现统一。

4.3.3 正确看待 CSS 世界里的 margin 合并

1、什么是 margin 合并

块级元素的上外边距和下外边距有时会合并为单个外边距,这样的景象称为“margin 合并”。
重要信息:
1)块级元素,但不包含浮动和相对定位元素,只管浮动和相对定位能够让元素块化。
2)只产生在垂直方向,须要留神的是,这种说法在不思考 writing-mode 的状况下才是正确的,严格来讲,应该是只产生在和以后文档流方向的相垂直的方向上。因为默认文档流是程度流,因而产生 margin 合并的就是垂直方向。

2、margin 合并的 3 种场景

margin 合并有以下 3 种场景。
1)相邻兄弟元素 margin 合并。
2)父级和第一个 / 最初一个子元素。
对于 margin-top 合并,能够进行如下操作(满足一个条件即可):

  • 父元素设置为块状格式化上下文元素(https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)
  • 父元素设置 border-top 值;
  • 父元素设置 padding-top 值;
  • 父元素和第一个子元素之间增加内联元素进行分隔。

对于 margin-bottom 合并,能够进行如下操作(满足一个条件即可):

  • 父元素设置为块状格式化上下文元素;
  • 父元素设置 border-bottom 值;
  • 父元素设置 padding-bottom 值;
  • 父元素和最初一个子元素之间增加内联元素进行分隔;
  • 父元素设置 height、min-height 或 max-height。

3)空块级元素的 margin 合并。(空块级元素的上下边距合并。)
对于空块级元素的 margin 合并,能够进行如下操作(满足一个条件即可):

  • 设置垂直方向的 border;
  • 设置垂直方向的 padding;
  • 外面增加内联元素(间接 Space 键空格是没用的);
  • 设置 height 或者 min-height。
3、margin 合并的计算规定

margin 合并的计算规定总结为“正正取大值”“正负值相加”“负负最负值”3 句话。

4.3.4 深刻了解 CSS 中的 margin:auto

margin:auto 的填充规定如下:
1)如果一侧定值,一侧 auto,则 auto 为残余空间大小。
2)如果两侧均是 auto,则平分残余空间。

4.3.5 margin 有效情景解析

margin 有效的情景:
1)display 计算值 inline 的非替换元素的垂直 margin 是有效的,尽管标准提到有渲染,但浏览器体现却未寻得一点形迹,这和 padding 是有显著区别的。对于内联替换元素,垂直 margin 无效,并且没有 margin 合并的问题,所以图片永远不会产生 margin 合并。
2)表格中的 <tr> 和 <td> 元素或这是 display 计算值是 table-cell 或 table-row 的元素的 margin 都是有效的。然而,如果计算值是 table-caption、table 或 inline-table 则没有此问题,能够通过 margin 管制外间距。
3)margin 合并的时候,更改 margin 值可能是没有成果的。
4)相对定位元素非定位方位的 margin 值“有效”。(看着“有效”)
5)定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的定位“生效”。
6)遥相呼应导致的 margin 有效。(看第六章内容)
7)内联个性导致的 margin 有效。(看第五章内容)

4.4 勋绩卓越的 border 属性

4.4.1 为什么 border-width 不反对百分比值

正文完
 0