css 世界学习总结 - 第三章流、元素与基本尺寸

最新推荐文章于 2023-03-27 14:44:42 发布

wxy201008

最新推荐文章于 2023-03-27 14:44:42 发布

阅读量685

点赞数 1

分类专栏：自学笔记文章标签： css

本文链接：https://blog.csdn.net/qq_15102659/article/details/113554896

版权

自学笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

css 世界学习总结 - 第三章流、元素与基本尺寸

文章目录

css 世界学习总结 - 第三章流、元素与基本尺寸

流体布局引出的几种网页布局方式

布局方式	描述	特点	场景
静态布局	Static Layout，传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。一般需要设置最小宽度	不能根据用户的屏幕尺寸做出不同的表现	传统PC网页
流式布局	Liquid Layout，页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）	网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用）	屏幕分辨率变化时，页面里元素的大小会变化而但布局不变
自适应布局	Adaptive Layout，使用@media分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围	屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化	-
响应式布局	Responsive Layout，一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果	每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变	多终端页面
弹性布局	rem/em布局，包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位	理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应	移动端

结论：

如果只做pc端，那么静态布局（定宽度）是最好的选择；
如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的3选择，一份css+一份js调节font-size搞定；
如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

流体布局是什么

所谓“流体布局”，指的是利用元素“流”的特性实现的各类布局效果。因为“流”本身具有自适应特性，所以“流体布局”往往都是具有自适应性的。
但是，“流体布局”并不等同于 “自适应布局”。
“自适应布局”是对凡是具有自适应特性的一类布局的统称，“流体布局”要狭窄得多。例如，表格布局也可以设置为100%自适应，但表格和“流”不是一路的，并不属于“流体布局”。
通俗的说，流体布局就是在width:auto;或者格式化宽/高中，通过设定margin/border/padding来影响content的布局的方式

什么是块级元素

HTML标签通常分为块级元素(block-level element)和内联元素(inline element)
块级元素：一个水平流上只能单独显示一个块级元素如
内联元素：一个水平流可显示多个内联元素（常用如 img a span button input etc）

哪些元素是内联元素

从表现看就行为表现来看，“内联元素”的典型特征就是可以和文字在一行显示。因此，文字是内联元素，图片是内联元素，按钮是内联元素，输入框、下拉框等原生表单控件也是内联元素

为什么list-item元素会出现项目符号

list-item 使用附加的标记盒子，专门用来放圆点、数字这些项目符号。

盒子模型

每个元素都有两个盒子，外在盒子和内在盒子。外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现什么的。或则内在盒子叫“容器盒子”

盒子模型	外在盒子	内在盒子
block	block	block
inline	inline	inline
inline-block	inline	block

width/height作用在内在盒子，也就是内容盒子上

深藏不露的width:auto

充分利用可用空间 块级元素的默认宽度是父级元素的宽度的100%
收缩与包裹 当元素处于浮动、绝对定位或者为内联块元素或table元素，父级元素失去原有宽度收缩到与内部元素一样
收缩到最小 这个容易出现在table-layout为auto的表格中，为了不超过父级元素的宽度
超出容器限制 除非有明确的width相关设置，否则上面3种情况尺寸都不会主动超过父级容器宽度，但是存在一些特殊情况。除非是很长的英文，或者设置white-space: nowrap

外部尺寸与流体特性

1.正常流宽度 100%

在页面中随便扔一个div元素，其尺寸表现就会和水流一样铺满容器。这就是block 容器的流特性。

所谓流动性是一种根据 margin/border/padding/content 属性对其内容区域自动分配水平空间的机制

举一个书中的例子

See the Pen oNYgyEJ by wxy ( @wxy521) on CodePen.

这是一个对比演示，上下两个导航均有margin和padding，前者无width设置，完全借助流的特性，后者宽度width:100%。
结果，后者的尺寸超出了外部的容器，完全就不像“水流”那样完全利用容器空间，即所谓的“流动性丢失”

width的百分比，参考的是父元素的content的width。此外所有和百分比相关的位置、大小设置，都是基于父元素的content。

2.格式化宽度

格式化宽度仅出现在"绝对定位模型"中，也就是出现在position属性值为absolute和fixed的元素中，在预设情况下绝对定位元素的宽度表现是"包裹性"，“宽度由内部尺寸决定”，但是有一中情况下由外部尺寸决定。

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
典型的可替换元素有：<iframe><video><embed><img>

对于非替换元素，当 left/right 或 top/bottom 对立方位的属性值同时存在的时候，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性 (position属性值不是static) 的祖先元素计算

例子格式化宽度实现水平垂直居中

See the Pen 格式化宽度实现水平垂直居中 by wxy ( @wxy521) on CodePen.

内部尺寸与流体特性

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

1.包裹性

包裹性”除了“包裹”，还有“自适应性”。所谓“自适应性”指的是元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸(除非容器尺寸小于元素的“首选最小宽度”)。

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

2.首选最小宽度

图片和文字的权重要远大于布局，当布局中存在更高权重元素时(如width:0 不生效)最小宽度受其内容影响
(文字中的最小宽度为单个字符宽度)

word-break: break-all
break-all
对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

3.最大宽度

white-space CSS 属性是用来设置如何处理元素中的空白。

最大宽度就是元素可以有的最大宽度。“最大宽度”实际等同于“包裹性”元素设置white-space: nowrap 声明后的宽度。(连续的空白符会被合并。但文本内的换行无效) 如果内部没有块级元素或者块级元素没有设定宽度值，则“最大宽度”实际上是最大的连续内联盒子的宽度

css流体布局下的宽度分离原则

使用双层嵌套实现内容自适应

See the Pen 宽度分离 by wxy ( @wxy521) on CodePen.

所谓“宽度分离原则”就是css中的width属性不与影响宽度的padding/border（有时候包括margin）属性共存, 通过设置 padding,margin,border,内部内容通过 width：auto 自动填充

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

box-sizing的作用

box-sizing属性是改变width的作用细节,改变了width作用所在的盒子

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

如何评价*{box-sizing: border-box}

这种做法易产生没必要的消耗。通配符 * 应该是一个慎用的选择器，因为它会选择所有的标签元素。其对与某些元素 box-sizing 无论是什么值，对其渲染表现都没有影响，* 对这些元素而言就是没有必要的消耗。

/* 这样重置更合理 */
input, textarea, img, video, object {
    box-sizing: border-box;
}

box-sizing发明的初衷

box-sizing:border-box最常见的用途就是原生普通文本框input和文本域textarea的100%自适应父容器宽度

例如textarea宽度100%自适应

See the Pen textarea宽度100%自适应 by wxy ( @wxy521) on CodePen.

box-sizing被发明出来最大的初衷应该是解决替换元素宽度自适应问题。

相对简单而单纯的height:auto

height:auto也有外部尺寸特性。其仅存在于绝对定位模型中，也就是“格式化高度”与“格式化宽度”

关于height:100%

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

div {
    width: 100%; /* 这是多余的 */
    height: 100%; /* 这是无效的 */
    background: url(bg.jpg);
}

为何height:100%无效

要明白其中的原因要先了解浏览器渲染的基本原理。
首先，先下载文档内容，加载头部样式资源（如果有的话），然后按照从上而下、自外而内的顺序渲染DOM内容。
套用本例就是，先渲染父级元素，后渲染子元素，是有先后顺序的。因此，当渲染到父元素的时候，子元素的width:100%并没有渲染，宽度就是图片加文字内容的宽度；等渲染到文字这个元素的时候，父元素的宽度已经固定，此时的width:100%就是已经固定好的父元素的宽度。
宽度不够怎么办？溢出就好了，overflow属性就是为此而生的

因为没有显示定义height由仅内容填充，则解释成了auto。

'auto' * 100/100 = NaN

height:100%无效

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

设定显式的高度值

html, body {
    height: 100%;
}

使用绝对定位

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

绝对定位元素的百分比计算和非绝对定位的百分比计算是有区别的，区别在于绝对定位的宽高百分比计算是相对与padding box的，也就是说会把padding大小的值计算在内，但是，非绝对定位元素则是相对于content box计算的

如绝对定位和非绝对定位元素百分比值计算区别

See the Pen 绝对定位和非绝对定位元素百分比值计算区别 by wxy ( @wxy521) on CodePen.

任意大小图片的左右半区布局

See the Pen 任意大小图片的左右半区布局 by wxy ( @wxy521) on CodePen.

只要在图片上覆盖两个绝对定位，同时设height:100%，则无论图片多高，我们的左右半区都能自动和图片高度一模一样，无须任何使用javascript计算

CSS min-width/max-width和min-height/max-height

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

比如，网页宽度在1200～1400像素自适应，既满足大屏的大气又满足笔记本的良好显示，此时，min-width/max-width就可以大显神威了

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

公众号的热门文章中，经常会有图片，这些图片都是用户上传产生的，因此尺寸会有大有小，为了避免图片在移动端展示过大的影响体验，常常会有下面的max-width限制

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

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

与众不同的初始值

min-weidht/min-height 的初始值是auto，max-width/max-height 的初始值是 none

超越!important，超越最大

超越 !important 指的是 max-width 会覆盖 width

比方说，针对下面的 HTML 和 CSS 设置，图片最后呈现的宽度是多少？

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

答案是256px。style、!important通通靠边站！因为max-width会覆盖width

超越最大指的是 min-width 的值大于 max-width 值时取 min-width 的值
超越最大值得是 min-width 覆盖 max-width ，此规则发生在 min-width 和 max-width 冲突时

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

最小宽度比最大宽度设置得还要大，遵循“超越最大”规则(注意不是“后台者居上”规则) 值取min-width,max-width被忽略，于是，.container元素表现为至少1400像素宽

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

第一反应就是使用height + overflow:hidden实现，但是，很多时候我们展开的元素内容是动态的，换句话说高度不是固定的，因此，height使用的值是默认的auto，应该都知道的auto是个关键字值，并非数值，正如height: 100%的100%无法和auto相计算一样，从0px到auto是无法计算的，因此无法形成过渡或动画效果

/* 因此，下面代码呈现的效果也是生硬的展开和收起 */
.element {
    height: 0;
    overflow: hidden;
    transition: height .25s;
}

.element.active {
    height: auto; /* 没有transition效果，只是生硬的展开 */
}

/* 难道就没有什么一劳永逸的实现方法吗？有，不妨试试max-height */
.element {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s;
}

.element.active {
    max-height: 666px /* 一个足够大的高度值 */
}

其中展开后的max-height值，我们只需要设定为保证比展开内容高度大的值就可以，因为max-height值比height计算值大的时候，元素的高度就是height属性的计算高度,
在本交互中，也就是height: auto时候的高度值。于是，一个高度不定的任意元素的展开动画就实现了

应用：

/* 使用max-height实现任意高度元素的展开收起动画 */
@mixin slide-vertical($maxHeight, $initMaxHeight:0, $duration:.25s) {
  max-height: $initMaxHeight;
  overflow: hidden;
  transition: max-height $duration;
  &.active {
    max-height: $maxHeight;
  }
}

See the Pen max-height与任意高度元素滑动展开收起效果 by wxy ( @wxy521) on CodePen.

但是，使用此方法也有一点要注意，既虽然从适用范围讲，max-height值越大使用场景越多，但是，如果max-height值太大，在收起的时候可能会有“效果延迟”的问题。比方说，展开的元素高度是100px，而max-height是1000px，动画时间是250ms，假设动画函数是线性的，则前255ms我们是看不到收起效果的，因为max-height从1000像素到100像素变化这段时间，元素不会有区域被隐藏，会给人动画延迟225ms的感觉

因此，建议max-height使用足够安全的最小值，这样，收起时即使有延迟效果，也会因为时间很短，很难给用户察觉，并不会影响体验