weixin_33810006
weixin_33810006

《css世界》- 详细重点笔记与技巧

概述

在《css世界》这本书中有一些“黑魔法”给列举出来，在结合自己的理解。 篇幅有点长，希望大家能够坚持看完，一定会有收获！！！
以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等;

ps: 特别是 “line-height、vertical-align”内容需要反复仔细研究阅读

何为“流”

成为 文档流，将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素 （引导元素排列和定位）

什么是流体布局

利用元素“流”的特性实现的各类布局效果。因为“流”本身具有自适应特性，所以“流体布局”往往都是具有自适应性。
元素宽度按照分辨率宽度进行长度、宽度的调整，但布局不变。

“未定义行为”

当某个浏览器中出现与其他浏览器 不一样的行为或样式表现；
Web应用场景千变万化，Web标准也是不可能面面俱到的，也会存在规范描述以外的场景，此时，各大浏览器厂家只能根据自己的理解与喜好去实现，一旦个性化就会出现差异

currentColor 变量

当前的文字颜色;凡事需要使用颜色值的地方，都可以使用currentColor替换，比方说背景色 – background-color, 渐变色 – gradient, 盒阴影 – box-shadow, SVG的填充色 – fill等等 
div { color:#3c3c3c; border: 1em solid currentColor; }

currentColor-CSS3超高校级好用CSS变量

块级元素

默认情况下，块级元素会新起一行;占据其父元素（容器）的整个空间
  • 块级盒子负责结构
  • 内联盒子负责内容

应用

正是由于“块级元素”具有换行特性，因此理论上它都可以配合clear属性来清除浮动带来的影响 
.clear:after {
　 content: '';
   display: table;　// 也可以是block，或者是list-item
　 clear: both;
}

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

list-item（“ 附加盒子”）名“ 标记盒子”；因为生成了一个附加的盒子， 学名“标记盒子”（marker box），专门用来放圆点、数字这些项目符号；

display:inline-block 或者 display:xx-xx 理解（容器盒子）

元素都两个盒子，外在盒子和内在盒子；
外在盒子：外在的“内联盒子”（inline）
内在盒子：内在的“块级容器盒子”（block）

深藏不露的 width:auto

充分利用可用空间

、

这些元素的宽度默认是100%于父级容器的

收缩与包裹

浮动、绝对定位、inline-block元素或table元素

收缩到最小

出现在table-layout为auto的表格中；当每一列空间都不够的时候，文字能断就断，但中文是随便断的，英文单词不能断

超出容器限制

内容很长的连续的英文和数字，或者内联元素被设置了white-space:nowrap

“内部尺寸”和“外部尺寸”

“内部尺寸”: 尺寸由内部元素决定
“外部尺寸”: 宽度由外部元素决定

外部尺寸与流体特性

正常流宽度

、

这些元素的宽度默认是100%于父级容器；display:block;

流动性

宽度100%显示，

margin/border/padding和content内容区域自动分配水平空间

格式化宽度

触发条件
  • “绝对定位模”（position属性值为absolute或fixed的元素中）
表现
绝对定位元素的宽度表现是“包裹性”，宽度由内部尺寸决定
特殊
  • 当left/top或top/bottom对立方位的属性值同时存在，元素的宽度表现为“格式化宽度”，
  • 其宽度大小相对于最近的具有定位特性（position属性值不是static）的祖先元素计算 
div { position: absolute; left: 20px; right: 20px; } 
div { position: absolute; top: 20px; bottom: 20px; } // 但不知道为什么不行

内部尺寸与流体特性

包裹性

除了“包裹”（max-width:100%），还有“自适应性（元素尺寸由内部元素决定， 但永远小于“包含块”容器的尺寸）”

著名的“按钮”元素：极具代表性的inline-block元素

  • 按钮上的文字个数比较有限，没机会换行

应用

文字少的时候居中显示，文字超过一行的时候居左显示

.box {
   padding: 10px;
   background-color: #cd0000;
　 text-align: center;
}
.content {
　 display: inline-block;
　 text-align: left;
}

    
文字内容

首选最小宽度

元素最适合的最小宽度
  • 东亚文字（如中文）最小宽度为每个汉字的宽度:font-size:14px;
  • 西方文字最小宽度由特定的连续的英文字符单元决定（一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等）

最大宽度

是元素可以有的最大宽度（ 如果内部没有块级元素或者块级元素没有设定宽度值,实际上是最大的连续内联盒子的宽度）

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

box-sizing 发明的初衷

解决 替换元素宽度自适应问题

易产生没必要的消耗

  • 通内联元素（非图片等替换元素），box-sizing无论是什么值，对其渲染表现都没有影响
  • search类型的搜索框，其默认的box-sizing就是border-box（如果浏览器支持），因此，*对search类型的而言也是没有必要的消耗

关于 height:100%

父元素height为auto，只要子元素在文档流中，其百分比值完全就被忽略了;百分比高度值要想起作用，其父级必须有一个可以生效的高度值;

为何height:100%无效

包含块的高度没有显式指定（即 高度由内容决定），并且该 元素不是绝对定位，则计算值为auto 
'auto' * 100/100 = NaN

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

  • 设定显式的高度值
  • 使用绝对定位

width:100%效

width:100%有效包含块的宽度取决于该元素的宽度，那么产生的布局在CSS 2.1中是未定义的

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

max-* 初始值是none

假如说 max-width初始值是auto,我们的width永远不能设置为比auto计算值更大的宽度值

min-* 初始值 0（实践为auto）

  • min-wdith/height值为auto合法
  • 数值变化无动画

max-width 超越!important，超越最大

max-width会覆盖width,不是普通的覆盖，是超级覆盖;比直接在元素的style属性中设置CSS声明还要高

min-width超越最大

min-width和max-width冲突; 遵循“超越最大”规则（注意不是“后来居上”规则）， min-width覆盖

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

我们展开的元素内容是动态的，换句话说高度是不固定的 
.element {
　 max-height: 0;
　 overflow: hidden;
　 transition: max-height .25s;
}
.element.active {
　 max-height: 666px;　　/* 一个足够大的最大高度值 */
}

max-height值比height计算值大的时候，元素的高度就是height属性的计算高度

注意

max-height不能设置很大，如果延迟时间长，会有延迟的感觉。

内联元素

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

内容区域（content area）

围绕 文字看不见的盒子，其大小仅受字符本身特性控制,本质上是一个 字符盒子（character box）；

但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身

内联盒子

元素的“外在盒子”，用来决定元素是内联还是块级 
、和等

行框盒子

由一个一个“内联盒子”组成的

包含盒子（“包含块”）

由一行一行的“行框盒子”组成(CSS规范中，并没有“包含盒子”的说法，更准确的称呼应该是“ 包含块”)

幽灵空白节点

内联元素的所有解析和渲染会有前面有一个“空白节点”；不占据任何宽度，看不见也无法通过脚本获取（ 文档声明必须是HTML5文档声明（HTML代码如下）） 
div {
　 background-color: #cd0000;
}
span {
　 display: inline-block;
}

深入理解 content

替换元素

过修 改某个属性值呈现的内容就可以被替换的元素; 如“img”

特性

内容的外观不受页面上的CSS的影响

需要类似appearance属性，或者浏览器自身暴露的一些样式接口，例如::-ms-check{}

有自己的尺寸

其默认的尺寸（不包括边框）是300像素×150像素，如