第3章 流、元素和基本概念

块级元素

li元素默认的display值是list-item,和table都是块级元素,在一个水平流上只能单独显示一个元素,多个则换行显示。可以配合clear属性来清除浮动带来的影响。

.clear:after {
    content: '';
    display: table; /*也可以是block,或是list-item*/
    clear: both;
}

实际开发中,不推荐使用list-item,一是会出现项目符号,而是IE不支持伪元素:after

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

list-item元素出现项目符号是因为生成了一个附加盒子(标记盒子),专门用来放圆点、数字这些项目符号。IE下伪元素不支持list-item或许就是无法创建标记盒子导致的。

display: inline-table;的盒子是怎样组成的

外面内联,里面table,元素和文字在一行显示。

width/height作用在哪个盒子上

width/height作用在里面的盒子,也就是容器盒子

width/height作用的具体细节

块级元素的流体特性主要体现在水平方向上。

深藏不漏的width:auto

width的默认值是auto,它至少包含4中不同的宽度表现:

  1. 充分利用可用空间。元素默认宽度是100%父级容器。
  2. 收缩与包裹。典型代表是浮动、绝对定位和inline-block元素或table元素。
  3. 收缩到最小。这个最容易出现在table-layoutauto表格中。
  4. 超出容器限制。除非有明确的width设置,否则表格min-content的尺寸都不会主动超出父容器的宽度。特殊情况:内容很长的英文和数字,或者内联元素设置为white-space:nowrap;。这种情况称为max-content

1. 外部尺寸与流体特性

  1. 正常流宽度。无宽度,无图片,无浮动。充分利用浏览器自身的行为特性来完成页面布局。表现为“外部尺寸”的块级元素一旦设置了宽度就会丢失流动性。
  2. 格式化宽度。仅出现在“绝对定位模型”中,在默认情况下,绝对定位元素的宽度表现为“包裹性”,宽度由内部尺寸决定。对于非替代元素,当left/toptop/bottom对立方位的属性值同时存在的时候,元素的宽度表现为格式化宽度,其宽度大小相对于最近的具有定位特性的祖先元素计算。格式化宽度具有完全的流体性,也就是margin/padding/border/content区域会自动分配水平(垂直)空间。

2. 内部尺寸与流体特性

内部尺寸有3种表现特性:

  1. 包裹性。对于一个元素,如果其display:inline-block;,那么里面的内容宽度不会超过容器。

包裹性在实际开发中的作用

需求:页面某个模块的文字内容是动态的,可长可短。文字少的时候居中显示,文字超过一行的时候居左显示。该如何实现?

.box {
    text-align: center;
}

.content {
    display: inline-block;
    text-align: left;
}

除了inline-block元素,绝对定位和浮动元素都具有包裹性,均有类似的智能宽度行为。

  1. 首选最小宽度。元素最适合的最小宽度。具体表现规则:

  2. 最大宽度。最大连续内联盒子的宽度。

width值作用的细节

  1. 流动性丢失
  2. 与实际表现不一致

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

宽度分离原则,就是CSS中的width属性不与影响宽度的padding/border属性共存。

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

width独占一层标签,而padding/border/margin利用流动性在内部自适应呈现。

.father {
    width: 100px;
}

.son {
    margin: 0 20px;
    border: 1px solid #ccc;
}

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

box-sizing的作用

默认情况下,width是作用在content box上,box-sizing的作用就是可以把width作用的盒子变成其他几个。

box-sizing: border-box;就是让100像素的宽度直接作用在border box上,从默认的content box变成border box。此时,content box从宽度值中释放,形成了局部的流动性,和padding一起自动分配width值。

box-sizing不支持margin-box,只有当元素没有水平margin时,box-sizing才能真正计算,宽度分离等策略可以彻底解决所有的宽度计算问题。

在CSS世界中,唯一离不开box-sizing:border-box;的就是原生普通文本框inputtextarea的100%自适应父容器宽度。
替换元素的特性之一是尺寸由内部元素决定,且无论其display属性值是inline还是block。对于非替换元素,如果display值是block,就会具有流动性,宽度由外部尺寸决定,但是替换元素的宽度不受display水平影响,因此,通过修改textareadisplay水平是无法让尺寸100%自适应父容器。

相对简单的height:auto

关于height:100%

对于width属性,父元素width设为auto,其百分比也支持;但是对于height属性,如果父元素height设为auto,只要子元素在文档流中,其百分比完全被忽略。

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

1. 父级没有具体高度值,height:100%;会无效

浏览器渲染的基本原理:首先,先下载文档内容,加载头部的样式资源,然后按照从上而下、自外而内的顺序渲染DOM内容。

如果包含块的高度没有显式指定(即高度由内容决定),并且该元素不是绝对定位,则计算值为auto

2. 让元素支持height:100%效果

  1. 设定显式的高度值。
html, body {
    height: 100%;
}
  1. 使用绝对定位。
div {
    height: 100%;
    position: absolute;
}

绝对定位的宽高百分比计算是相对于padding box,也就是会把padding大小值计算在内。非绝对定位元素则是相对于content box计算。

图片左右半区点击分别上一张图下一张图效果

在图片外面包一层具有“包裹性”同时具有定位特性的标签。

.box {
    display: inline-block;
    position: relative;
}

在图片上覆盖两个绝对定位,同时设height:100%;,则无论图片多高,左右半区都能自动和图片高度一模一样,无需任何使用JS的计算。

min-width/max-widthmin-height/max-height

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

min-width/max-width出现的场景一定是自适应布局或流体布局中。

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

为了避免图片在移动端展示过大影响体验,经常会有下面的max-width限制:

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

height:auto;是必须的,否则如果原始图片有设定heightmax-width生效时图片就会被水平压缩。强制heightauto可以确保宽度不超出的同时使图片保持原来的比例。

与众不同的初始值

max-width/max-height的初始值是nonemin-width/min-height的初始值是auto

  1. min-height/width的值为auto合法。
  2. 数值变化无动画。min-height的初始值是auto

超越!important,超越最大

1. 超越!important

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

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

最终图片显示宽度256px

2. 超越最大

超越最大指的是min-width覆盖max-width,此规则发生在min-widthmax-width冲突的时候。

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

最小宽度设置比最大宽度还大,这个时候,min-width显示,max-width被忽略。.container元素表现为至少1400px宽度。

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

元素展开收起时有明显的高度滑动效果

.element {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s;
}

.element.active {
    max-height: 666px;
}

max-height使用足够安全的最小值,避免出现延迟。

内联元素

在CSS世界中,内联元素是最为重要的。这些CSS属性往往具有继承特性。

哪些元素是内联元素

1. 从定义看

内联元素特指“外在盒子”,和display:inline;的元素不是一个概念。

2. 从表现看

内联元素的典型特性是可以和文字在一行显示。

内联盒模型

  1. 内容区域。
  2. 内联盒子。
  3. 行框盒子。
  4. 包含盒子。

幽灵空白节点

幽灵空白节点具体指的是:在HTML5文档声明中,内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明,不占据任何宽度,看不见也无法通过脚本获取,但又确实存在,表现如同文本节点一样。

幽灵空白节点是一个存在于每个“行框盒子”前面,同时具有该元素的字体和行高属性的0宽度的内联盒。