css中的流，元素，基本尺寸

时间  2020-05-30
标签 css 元素 基本 尺寸 栏目 CSS 繁體版
原文   原文链接

流 元素 基本尺寸

流之因此影响整个css世界，是由于它影响了css世界的基石 --HTMLphp

HTML 常见的标签有虽然标签种类繁多，但一般咱们就把它们分为两类： 块级元素（block-level element）和内联元素（inline element）。css

1.块级元素

1.1 概念相关

“块级元素”对应的英文是 block-level element，常见的块级元素有 div,li,table等。html

块级元素和 display：block 不是一个概念浏览器

例如块级元素 li 和 table ，他们的 display 的值分别为 list-item 和 tableide

块级元素具备换行性质，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示；布局

因为这种 换行性质，理论上块级元素均可以配合 clear 属性来清除浮动带来的影响字体

.clear:after {
 content: '';
 display: table; // 也能够是 block，或者是 list-item
 clear: both;
}

实际开发中，display的值要么是block，要么是table，并不会使用list-item动画

1.2 为何 list-item会出现项目符号

全部的块级元素都有一个主盒子，而list-item除了主盒子，还有一个附加盒子spa

list-item 之因此会出现项目符号(小黑点)，是由于生成了一个附加盒子，学名为 “标记盒子”，专门来存放圆点，数字这些项目符号设计

IE不支持display：list-item 的缘由可能就是由于IE没法建立 这个标记盒子的缘由。

1.3 display:inline-block

display:inline-block 咱们能够把一个这样的元素分为两个部分组成，外在的inline内联盒子，里面的block块级盒子组成。这样，因为外在的外联盒子，它的呈现方式既能够和文字等元素同为一行，又由于内在的块级盒子，它能够设置元素的宽高。

因而，按照display的属性值不一样

display 外盒子 内盒子
block block block
inline inline inline
inline-block inline block
table block table
inline-table inline table

外盒子影响着流的走向，内盒子控制元素的基本属性

2. width/height 做用的具体细节

咱们在上面已经说过， width/height等属性做用在内盒子中，也就是容器盒子中。接下来咱们说一下具体的做用细节。

流特性体如今水平方向上，咱们来讨论width

2.1 width:auto

width的默认值就是auto

  • 充分利用空间 -- div的默认宽度通常都是100%

  • 收缩和包裹

  • 收缩到最小 -- min-content

    当每一列空间都不够的时候，文字能断就断，但中文是随便断的，英文单词不能断。

  • 超出容器限制

    没有相关设置的状况下，通常元素不会主动超过父级宽度容器，除非一些特殊状况

    例如：内容而很长的连续英文和数字

    ​ 或者内联元素被设置了 white-space:nowrap 属性

在 CSS 世界中，盒子分“内在盒子”和“外在盒子”，显示也分“内部显示”和“外部显示”，一样地，尺寸也分“内部尺寸”和“外部尺寸”。

上述的width：auto 的四条特性里面，是默认宽度 100%显示，是“外部尺寸”，其他所有是“内部尺寸”。而这惟一的**“外部尺寸”，是“流”的精髓所在。**

2.2 外部尺寸与流体特性

  1. 正常流宽度。

    当咱们在一个容器里倒入足量的水时，水必定会均匀铺满整个容器。

    a {
 display: block;
 width: 100%;
}

    默认为inline的a元素display设置为block，自己就是表示宽度铺满整个父级，后面的100%宽度就不用再加了。

    做者总结过一套三无准则: 无宽度，无图片，无浮动。

    其中无宽度的缘由就是由于一旦外部尺寸的块级元素设置了宽度，其流动性就丢失了。

  2. 格式化宽度

    格式化宽度仅出如今“绝对定位模型”中，也就是出如今 position属性值为 absolute 或 fixed 的元素中。在默认状况下，绝对定位元素的宽度表现是“包裹性”，宽度由内部尺寸决定

    可是有一种状况其宽度是由外部尺寸所决定的，例如：

    div { position: absolute; left: 20px; right: 20px; }

    假设该元素最近的具备定位特性的祖先元素的宽度是 1000 像素，则这个元素的宽度是 960（即 1000−20−20）像素。

2.3 内部尺寸与流体特性

所谓“内部尺寸”，简单来说就是元素的尺寸由内部的元素决定，而非由外部的容器决定。

如何判断一个元素是否为内部尺寸呢？

​ 假如这个元素里面没有内容，宽度就是 0，那就是应用的“内部尺寸”。

“内部尺寸”有下面 3 种表现形式：

  1. 包裹性。

    “包裹性”，除了“包裹”，还有“自适应性”。“自适应性”是区分后面两种尺寸表现很重要的一点。自适应，指的是元素尺寸由内部元素决定。

    按钮就是 CSS 世界中极具表明性的 inline-block 元素，可谓展现“包裹性”最好的例子，具体表现为：按钮文字越多宽度越宽（内部尺寸特性），但若是文字足够多，则会在容器的宽度处自动换行（自适应特性）。

    “包裹性”对实际开发的做用

    请看这个需求：页面某个模块的文字内容是动态的，多是几个字，也多是一句话。然 后，但愿文字少的时候居中显示，文字超过一行的时候居左显示。该如何实现？

    官方演示代码链接

  2. 首选最小宽度

    在 CSS 世界中，图片和文字的权重要远大于布局，所以，CSS 的设计者显然是不会让图文在 width:auto 时宽度变成 0 的，此时所表现的宽度就是“首选最小宽度”。

    • 汉字最小宽度是每一个字的宽度

    • 英文最小宽度是由连续的英文字符单元决定，终止于空格，短横线及其余非字母符号

      想让英文字符和中文同样一个字符为最小宽度，可使用css中的 word-break:break-all 属性

    • 相似图片这样的替换元素的最小宽度就是该元素内容自己的宽度

  3. 最大宽度

    最大宽度就是元素能够有的最大宽度。

    若是内部没有块级元素或者块级元素没有设定宽度值，则“最大宽度”其实是最大的连续内联盒子的宽度。

2.4 width 值做用的细节

对于一个元素，咱们设定其宽度为 100px，以下：div { width: 100px; } 请问，100px 的宽度是如何做用到这个元素上的？

width 是做用在“内在盒子”上的,实际上，这个内在盒子是由不少部分组成 --- 盒子模型

盒子模型

咱们的这个“内在盒子”又被分红了 4 个盒子，分别是 content box、padding box、border box和 margin box

“margin 的背景永远是透明的”，所以不可能做为 backgound-clip 或 backgroundorigin属性值出现。margin 一旦设定具体宽度和高度值，其自己的尺寸是不会因 margin值变化而变化的。

width宽度做用在content盒子上

假设一个盒子的css以下：

div { width: 100px; padding: 20px; border: 20px solid; }

那么它的宽度就变成了 100 + 20x2 + 20x2 = 180 px 了

合情合理，可是这种机制会致使如下问题：

  1. 流动性丢失
  2. 与现实世界表现不一致的困扰

有没有什么办法能避免这种盒子计算而致使的错位问题呢，方法之一就是采用书写方式约束，使用“宽度分离原则”

2.4 CSS流体布局下的宽度分原则

所谓“宽度分离原则”，就是 CSS 中的 width 属性不与影响宽度的 padding/border（有时候包括 margin）属性共存

如何实现？

分离，width 独立占用一层标签，而padding、border、margin 利用流动性在内部自适应呈现。

例子：

这里有一个div盒子

  • 常规布局

    .box {
 width: 100px;
 border: 1px solid;
}

    此时宽度为102像素，咱们如今但愿元素内边框有20像素的留白，咱们通常会想到的解决办法是加padding的值

    .box {
 width: 100px;
 padding: 20px;
 border: 1px solid;
}

    ok 此时有了留白，可是咱们发现宽度变成了 102 + 40 = 142px, 咱们常规的会使用减小宽度来实现咱们的要求

    .box {
 width: 60px; // 经过计算，减去 40 像素
 padding: 20px;
 border: 1px solid;
}

    要求实现了，可是若是咱们是经过计算，才能达到咱们想要的，之后的调试会有更多的麻烦。

  • 宽度分离

    .father {
 width: 102px;
}
.son {
 border: 1px solid;
 padding: 20px;
}

    嵌套一层标签，父元素定宽，子元素由于 width 使用的是默认值 auto，因此会如水流般自动填满父级容器。

    宽度仍是 102 像素，子元素的 content box 自动变成了 60 像素，和上面反例的表现同样。

    也就是说，使用“宽度分离”后，我们不须要烧脑子去计算了，并且页面结构反而更稳固。

    这个作法的惟一缺点就是要多嵌套一层html标签，和对开发者极高的css要求水平。

    针对这中状况，有没有即无需计算，又不用额外的套用标签而实现呢？ ----> box-sizing

2.5 改变width/height 做用细节的 box-sizing

box-sizing 被直译为“盒尺寸”，实际上，其更准确的叫法应该是“盒尺寸的做用细节”，或者说得更通俗一点，叫“width 做用的细节”，也就是说，box-sizing 属性的做用是改变 width 的做用细节。

正常状况下width做用在盒模型中的四个盒子中的content盒子上，box-sizing的做用就是能够把width做用的盒子变成其余的几个盒子上，有如下几种写法

.box1 { box-sizing: content-box; } /* 默认值 */
.box2 { box-sizing: padding-box; } /* Firefox 曾经支持 */
.box3 { box-sizing: border-box; } /* 全线支持 */
.box4 { box-sizing: margin-box; } /* 从未支持过 */

拿 .box3 { box-sizing: border-box; } 来讲，就是把原来的宽度做用对象从content-box转到了border-box

.box {
 width: 100px;
 box-sizing: border-box;
}   
此时这个盒子的宽度是100px

.box {
 width: 100px;
 box-sizing: border-box;
 border: 1px solid;
} 
这事的宽度仍是100px

2.6 height: auto 和 height: 100%

宽度稀缺，高度无限，因此在css中高度较宽度更简单纯洁

height: auto

全部的元素盒子在页面中表现的每一个有多高，加在一块儿，就是最终的高度值

height: 100%

height 和 width 还有一个比较明显的区别就是对百分比单位的支持。对于 width 属性，就算父元素 width 为 auto，其百分比值也是支持的，可是对于 height 属性，若是父元素height 为 auto，只要子元素在文档流中，其百分比值彻底就被忽略了。

对于普通文档流中的元素，百分比高度值要想起做用，其父级必须有一个能够生效的高度值。

为什么父级没有具体高度值的时候，height:100%会无效？

若是包含块的高度没有显式指定（即高度由内容决定），而且该元素不是绝对定位，则计算值为auto。一句话总结就是：由于解释成了 auto。要知道，auto 和百分比计算，确定是算 不了的。

如何让元素支持 height:100%效果

  1. 设定显式的高度值。这个没什么好说的，例如，设置 height:600px，或者能够生效的百分比值高度。

    html, body {
 height: 100%;
}

  2. 使用绝对定位。

    div {
 height: 100%;
 position: absolute;
}

    此时的 height:100%就会有计算值，即便祖先元素的 height 计算为 auto 也是如此。

    绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的:

    绝对定位的宽高百分比计算是相对于 padding box 的

    非绝对定位元素则是相对于 content box 计算的

3. min-width/max-width和min-height/max-height

3.1为流体而生的 min-width/max-width

网页宽度在 1200～1400 像素自适应，既知足大屏的大气，又知足笔记本的良好显示

.container {
 min-width: 1200px;
 max-width: 1400px;
}

无须 width 设置，直接使用 min-width/max-width

再好比一个图片的盒子宽度已定：

img {
 max-width: 100%;
 height: auto!important;
}

height:auto 是必需的，不然，若是原始图片有设定 height，max-width 生效的时候，图片就会被水平压缩。强制 height 为 auto 能够确保宽度不超出的同时使图片保持原来的比例。但这样也会有体验上的问题，那就是在加载时图片占据高度会从 0 变成计算高度，图文会有明显的瀑布式下落。

3.2 不同凡响的初始值

width/height 的默认值是 auto，而 min-width/max-width 和 min-heigh/max-height 的初始值则要复杂些

max-width 和 max-height 的初始值是 none

min-width 和 min-height 的初始值是 auto

3.3 超越!important，超越最大

超越!important

min-width/max-width 和 min-height/max-height 属性间，以及与width 和 height 之间有一套相互覆盖的规则。这套规则用一句比较通俗的话归纳就是:超越!important，超越最大。

<img src="1.jpg" style="width:480px!important;">
img { max-width: 256px; }

以上代码做用后，img的宽度为 max-width的宽度 -- 256px，style、!important 统统靠边站！由于 max-width 会覆盖 width。

超越最大

.container {
 min-width: 1400px;
 max-width: 1200px;
 }

最小宽度竟然比最大宽度设置得还大, 最后谁会生效？

遵循“超越最大”规则（注意不是“后来居上”规则），min-width 活下来，max-width 被忽略，因而，.container 元素表现为至少 1400 像素宽

3.4 任意高度元素的展开收起动画技术

“展开收起”效果是网页中比较常见的一种交互形式，一般的作法是控制 display 属性值在 none 和其余值之间切换

传统实现可使用 jQuery 的 slideUp()/slideDown()方法

第一反应就是使用 height + overflow:hidden 实现。可是，不少时候，咱们展开的元素内容是动态的，换句话说高度是不固定的，所以，height 使用的值是默认的 auto

所以，下面代码呈现的效果也是生硬地展开和收起：

.element {
 height: 0;
 overflow: hidden;
 transition: height .25s;
}
.element.active {
 height: auto; /* 没有 transition 效果，只是生硬地展开 */
}

auto 是个关键字值，并不是数值，正如 height:100%的 100%没法和 auto 相计算同样，从 0px 到 auto 也是没法计算的，所以没法造成过渡或动画效果。

咱们可使用max-height来解决这一问题

.element {
 max-height: 0;
 overflow: hidden;
 transition: max-height .25s;
}
.element.active {
 max-height: 666px; /* 一个足够大的最大高度值 */
}

展开后个人高度只要比max-height小，那么元素的高度就是height的计算高度，一个高度不定的任意元素的展开动画效果就能实现了。

css世界官方demo

注意： max-height值在保证比height大的状况下尽量和的小

由于max-height可能会影响动画的时间， 比方说，咱们展开的元素高度是 100 像素，而 max-height 是 1000 像素，假如一个动画1000ms，则前 900 ms 咱们是看不到收起效果的，由于max-height 从 1000 像素到 100 像素变化这段时间，元素不会有区域被隐藏，会给人动画延迟 900 ms 的感受

4. 内联元素

4.1 哪些是内联元素

从定义：

内联元素的内联指的是外在盒子，外在盒子表现为inline的元素都是内联元素。

inline-block 和 inline-table 都是“内联元素”，由于它们的 “外在盒子”都是内联盒子。天然 display:inline 的元素也是“内联元素”，那么， 按钮元素是内联元素，由于其 display 默认值是 inline-block；img图片元素也是内联 元素，由于其 display 默认值是 inline 等。

从表现看:

就行为表现来看，“内联元素”的典型特征就是能够和文字在一行显示。

浮动元素貌似也是能够和文字在一个水平上显示的,可是浮动已经脱离文档流，不属于内联元素。

4.2 内联世界深刻的基础—内联盒模型 (import)

<p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p>

看似普通，实际上包含了不少术语和概念，或者换种通俗的说法，包含了不少种盒子。

  1. 内容区域

    内容区域指一种围绕文字看不见的盒子，其大小仅受字符自己特性控制，本质上是一个字符盒子（character box）；可是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，所以，对于这些元素，内容区域能够当作元素自身。

    这是一行普通的文字，这里有个 <em>em</em> 标签。

    以上代码表现的区域，能够理解为内容区域。

  2. 内联盒子

    若是外部含内联标签等），则属于“内联盒子”；若是是个光秃秃的文字，则属于“匿名内联盒子”

  3. 行框盒子（line box）

    每一行就是一个“行框盒子”（实线框标注），每一个“行框盒子”又是由一个一个“内联盒子” 组成的。

  4. 包含盒子/包含块（containing box）

    <p> 标签就是一个“包含盒子”（实线框标注），此盒子由一行一行的“行框盒子”组成。

4.3 幽灵空白节点

在 HTML5 文档声明中，内联元素的全部解析和渲染表现就如同每一个行框盒子的前面有一个“空白节点”同样。这个“空白节点”永远透明，不占据任何宽度，看不见也没法经过脚本获取，就好像幽灵同样，但又确确实实地存在，表现如同文本节点同样，所以，我称之为“幽灵空白节点”

<style>
  div {
    background-color: #cd0000;
  }
  span {
    display: inline-block;
  }
</style>
<body>
  <div><span></span></div>
</body>

浏览器打开上述代码，发现div的高度不是0，缘由就在于幽灵空白节点。

“幽灵空白节点”实际上也是一个盒子，不过是个假想盒，名叫“strut”，中文直译为“支柱”，是一个存在于每一个“行框盒子”前面，同时具备该元素的字体和行高属性的 0 宽度的内联盒。

Each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a “strut”.

内容总结与 张鑫旭大神 -- 《css世界》

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程