《CSS世界》读书笔记——流、元素与基本尺寸

2018-05-29  本文已影响0人  Honwiy

一、块级元素

块级元素是指一个水平留上只能单独显示一个元素，多个块级元素则换行显示。

1.1 块级元素和display:block一样？

块级元素与display:block不一样
<li>元素默认的display值是list-item，
<table>元素默认的display值是table。
两者均为块级元素，但display不是block。

1.2 为什么实际开发时多使用block或table，不使用list-item？

  1. list-item字符的比较多
  2. 会出现不需要的项目符号，可以通过加一行list-style:none声明来隐藏。
  3. IE不支持伪元素的display值是list-item。

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

list-item除了主块级盒子之外，还有一个附加的标记盒子，标记盒子专门用来防止原点、数字等项目符号。

1.4 盒子display:inline-block

有两个盒子，同时含有inline以及block的特性。既能和图文一行显示(inline特性)，又能直接设置windth/height(block特性)。

1.5 display:inline-table是怎样组成的？

外面是“内联盒子”，里面是“table盒子”，得到一个和文字在一行中的显示的表格。

1.6 width/height作用在哪个盒子上？

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

二、width/height 作用的具体细节

2.1 width:auto

width的默认值是auto。

auto包含了以下4中不同宽度表现：

  1. 充分利用可用空间。<div>、<p>这些元素的宽度默认是 100%于父级容器的。
    这种充分利用可用空间的行为还有个专有名字，叫作 fill-available。
  2. 收缩与包裹。典型代表就是浮动、绝对定位、inline-block元素或table元素。
  3. 收缩到最小。该情况很容易出现在table-layout为auto的表格中，如下图所示。
    最左边单元格收缩导致一柱擎天效果
  4. 超出容器限制。除非有明确的width相关设置，否则不会超过父级容器宽度。单页存在一些特殊情况，如内容很长的连续的英文和数字、内联元素被设置了white-space:nowrap。
2.1.1 外部尺寸与流体特性

（1）正常流宽度

所谓流动性，并不是看上去的宽度100%显示那么简单，而是一种margin/border/padding/content内容区域自动分配水平空间的机制。
三无准则：无宽度，无图片，无浮动。为何要“无宽度”？表现为外部的块级元素一旦设置了宽度，流动性就丢失了。

（2）格式化宽度

格式化宽度进出现在“绝对定位模型”中，也就是出现在position属性为absolute或fixed的元素中。
当left/top或top/bottom对立方位的属性值同时存在时，元素的宽度表现为格式化宽度。
格式化宽度具有完全的流体性，margin/border/padding/content内容区域同样会自动分配水平（和垂直）空间。

2.1.2 内部尺寸与流体特性

（1）包裹性

包裹性除了包裹，还有自适应性。所谓自适应性，指的是元素尺寸由内部元素决定，但永远小于“包装块”容器的尺寸。

（2）首选最小宽度

首选最小宽度指的是元素最适合的最小宽度。

（3）最大宽度。

最大宽度就是元素可以有的最大宽度。

2.2 width值作用的细节

div { 
  width: 100px; 
  padding: 20px; 
  border: 20px solid; 
}
宽度是180像素的盒模型

造成宽度设定和表现不合理的原因：

（1）流动性丢失

对于块状元素，如果width:auto，则元素具有流动性，会铺满整个容器。一旦设定了具体值，则元素的流动性会被阻断。

流动性缺失示意图
（2）与现实世界表现不一致

使用宽度分离原则可以避免页面布局错位的问题。

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

所谓宽度分离原则，就是CSS中的width属性不与影响宽度的padding/border属性共存，也就是不能出现以下类似的组合：

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

为了防止上述现象，在使用时，应将width分离出来，独立占用一层标签，而padding\border\margin利用流动性在内部自适应呈现。

2.3.1 为何要宽度分离

由于盒尺寸中的 4 个盒子都能影响宽度，自然页面元素的最终宽度就很容易发生变化而导致意想不到的布局发生。

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

2.4.1 box-sizing的作用

box-sizing改变了width作用的盒子，支持情况如下：

.box1 { box-sizing: content-box; } /* 默认值 */ 
.box2 { box-sizing: padding-box; } /* Firefox 曾经支持 */ 
.box3 { box-sizing: border-box; } /* 全线支持 */ 
.box4 { box-sizing: margin-box; } /* 从未支持过 */
box-sizing不同只的作用原理示意

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

下述三种情形，宽度始终都是100像素：

.box { 
 width: 100px; 
 box-sizing: border-box; 
} 
或者
.box { 
 width: 100px; 
 box-sizing: border-box; 
 border: 1px solid; 
} 
或者
.box { 
 width: 100px; 
 box-sizing: border-box; 
 padding: 20px; 
 border: 1px solid; 
}

但当遇到下图布局时，由于box-sizing不支持margin-box，还是要计算宽度。


box-sizing无效的布局
2.4.2 如何评价*{box-sizing:border-box}

（1）这种做法易产生没必要的消耗
（2）这种做法并不能解决所有问题，如box-sizing不支持margin-box，在有水平margin的不居中，不能做到真正的无计算。

2.5 相对简单而单纯的height:auto

height:auto与width:auto的特性类似。

2.6 关于height:100%

如果父元素height为auto，只要子元素在文档流中，其百分比值完全就被忽略了。如下：

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

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

2.6.1 为何height:100%无效？

如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。也就是说，此情况下，高度默认成了auto。

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

（1）设定显式的高度值。将高度设为固定像素，或者可以生效的百分比高度。如：

html, body {
  height:100%；
}

（2）使用绝对定位。如：

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

示例如下：

/*非定位元素*/
.box { 
 height: 160px; 
 padding: 30px; 
 box-sizing: border-box; 
 background-color: #beceeb; 
} 
.child { 
 height: 100%; 
 background-color: #cd0000; 
} 
/*定位元素*/
.box { 
 height: 160px; 
 padding: 30px; 
 box-sizing: border-box; 
 background-color: #beceeb; 
 position: relative; 
} 
.child { 
 height: 100%; width: 100%; 
 background-color: #cd0000; 
 position: absolute; 
}
绝对定位和费绝对定位百分比高度对比

上图可以看出，非定位元素的狂傲百分比计算不会讲padding计算在内。

三、CSS min-width/max-width和min-height/max-height二三事

min-width/max-width和min-height/max-height的共性？

它们都是与尺寸相关的，盒尺寸机制和一些值的渲染规则也是一样的。

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

min-width/max-width用于自适应布局或者流体布局，使用时无需设置width。

3.2 初始值

  • width/height初始值为auto。
  • max-width和max-height初始值为none。
  • min-width和min-height初始值为auto。

3.3 超越!important，超越最大

3.3.1 超越!important

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

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

上述代码中，256px会将480px的宽度值覆盖掉，img最后呈现的宽度是256px。

3.3.2 超越最大

超越最大指的是min-width覆盖max-width，此规则发生在min-width和max-width冲突的时候，例如如下设置，最后.container元素会表现为至少1400像素宽。

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

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

max-height配合transition一起使用，使用时，保证max-height的值不要太大。

四、内联元素

inline和block是流体布局的本质所在。
块级负责结构，内联负责内容。

4.1 那些元素是内联元素？

4.1.1 从定义看

“内联元素”的“内联”特指“外在盒子”，和“display 为 inline的元素”不是一个概念。
inline-block、inline-table和inline的元素都是“内联元素”。

4.1.2 从表现看

“内联元素”的典型特征就是可以喝文字在一行显示。因此，文字、图片、按钮、输入框、下拉框等原生表单都是内联元素。

4.2 内联世界深入的基础--内联盒模型

  • 内容区域
    内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是个字符盒子。


    内容区域示意
  • 内联盒子
    内联盒子不会让内容成块显示，而是排成一行，分为内联盒子和匿名内联盒子。下图中虚线部分为匿名内联盒子，实线为内联盒子（外部包含内联标签，如span a em）。
    内联盒子示意

  • 行框盒子


    行框盒子示意

  • 包含盒子


    包含盒子示意

4.3 幽灵空白节点

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

上一篇 下一篇

猜你喜欢

热点阅读