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

时间  2019-11-07
标签 css世界 详细 重点 笔记 技巧 栏目 CSS 繁體版
原文   原文链接

概述

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

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

何为“流”

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

什么是流体布局

利用元素“流”的特性实现的各种布局效果。由于“流”自己具备自适应特性，因此“流体布局”每每都是具备自适应性。
元素宽度按照分辨率宽度进行长度、宽度的调整，但布局不变。

“未定义行为”

当某个浏览器中出现与其余浏览器 不同的行为或样式表现；
Web应用场景变幻无穷，Web标准也是不可能面面俱到的，也会存在规范描述之外的场景，此时，各大浏览器厂家只能根据本身的理解与喜爱去实现，一旦个性化就会出现差别

currentColor 变量

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

currentColor-CSS3超高校级好用CSS变量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

充分利用可用空间

<div>、<p>这些元素的宽度默认是100%于父级容器的

收缩与包裹

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

收缩到最小

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

超出容器限制

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

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

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

外部尺寸与流体特性

正常流宽度

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

流动性

宽度100%显示，

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

格式化宽度

触发条件
  • “绝对定位模”（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%），还有“自适应性（元素尺寸由内部元素决定， 但永远小于“包含块”容器的尺寸）” 
<button>按钮</button>
<input type="button" value="按钮">

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

  • 按钮上的文字个数比较有限，没机会换行
  • <button>标签按钮才会自动换行，<input>标签按钮，默认white-space:pre，是不会换行的，须要将pre值重置为默认的normal

应用

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

.box {
   padding: 10px;
   background-color: #cd0000;
　 text-align: center;
}
.content {
　 display: inline-block;
　 text-align: left;
}
<div class="box">
    <p id="content" class="content">文字内容</p>
</div>

首选最小宽度

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

最大宽度

是元素能够有的最大宽度（ 若是内部没有块级元素或者块级元素没有设定宽度值,其实是最大的连续内联盒子的宽度）

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

box-sizing 发明的初衷

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

易产生不必的消耗

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

关于 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属性的计算高度canvas

注意

max-height不能设置很大，若是延迟时间长，会有延迟的感受。浏览器

内联元素

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

内容区域（content area）

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

可是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，所以，对于这些元素，内容区域能够当作元素自身markdown

内联盒子

元素的“外在盒子”，用来决定元素是内联仍是块级 
<span>、<a>和<em>等

行框盒子

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

包含盒子（“包含块”）

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

幽灵空白节点

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

深刻理解 content

替换元素

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

特性

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

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

有本身的尺寸

其默认的尺寸（不包括边框）是300像素×150像素，如<video>、<iframe>或者<canvas>

在不少CSS属性上有本身的一套表现规则

vertical-align属性，对于替换元素和非替换元素，vertical-align属性值的解释是不同

替换元素的尺寸计算规则

固有尺寸

替换内容本来的尺寸有着本身的宽度和高度

HTML尺寸

HTML原生属性width和height属性、<input>的size属性、<textarea>的cols和rows属性等

CSS尺寸

经过CSS的width和height或者max-width/min-width和max-height/min-height设置的尺寸

为什么图片以及其余表单类替换元素设置display:block宽度却没有100%容器

CSS尺寸 > HTML尺寸 > 固有尺寸
  1. 若是没有CSS尺寸和HTML尺寸，则使用固有尺寸做为最终的宽高
  2. 若是没有CSS尺寸，则使用HTML尺寸做为最终的宽高
  3. 若是有CSS尺寸，则最终尺寸由CSS属性决定
  4. 内联替换元素和块级替换元素使用上面同一套尺寸计算规则

列外

在没有src属性下，各个浏览器表现的各不相同;src缺省的<img>不是替换元素，而是一个普通的内联元素
  • IE浏览器下是28×30
  • Chrome浏览器下是0×0
  • Firefox浏览器下显示的是0×22

应用

异步加载的图片；使用一张透明的图片占位
<img>
<img>直接没有src属性;当图片的src属性缺省的时候，图片不会有任何请求，是最高效的实现方式

图片资源的固有尺寸是没法改变

设置图片个尺寸不是直接设置图片的固有尺寸，图片的固有尺寸是没法设置；可是设定width和height会影响图片的尺寸

查看示例app

缘由
  • 图片中的content替换内容默认的适配方式是填充（fill）
  • <img>和其余一些替换元素的替换内容的适配方式能够经过object-fit属性修改了；（相似于background-size原理）

替换元素和非替换元素的距离有多远

替换元素和非替换元素之间只隔了一个src属性

特色
  • Firefox浏览器下,最终的宽度是100%自适应父容器的可用宽度的。其表现和普通的<span>相似，已经彻底不是替换元素了
  • Chrome浏览器其实也有相似的表现，只是须要特定的条件触发而已,不为空的alt属性值
应用
基于伪元素的图片内容生成技术

查看示例异步

  • 不能有src属性
  • 不能使用content属性生成图片
  • 须要有alt属性并有值
  • Firefox下::before伪元素的content值会被无视，::after无此问题

替换元素和非替换元素之间只隔了一个CSS content属性

在Chrome浏览器下，全部的元素都支持content属性，而 其余浏览器仅在::before/::after伪元素中才有支持

查看示例

注意
content属性改变的仅仅是视觉呈现，当咱们以右键或其余形式保存这张图片的时候，所保存的仍是原来src对应的图片

content与替换元素关系剖析

content属性生成的内容都是 替换元素
  • content生成的文本是没法选中、没法复制;没法被屏幕阅读设备读取，也没法被搜索引擎抓取;替换的仅仅是视觉层
  • content动态生成值没法获取

content 内容生成技术

清除浮动

content字符内容生成

content图片生成

div:before {
　 content: url(1.jpg);
}

content attr属性值内容生成（比较经常使用）

img::after {
　  /* 生成alt信息 */
　  content: attr(alt); 
　  /* 其余CSS略 */
}

字体图标

理解content计数器

padding 属性

padding 与元素的尺寸

内联元素的padding在垂直方向一样会影响布局，但仅仅是视觉表现

内联元素没有 可视宽度和可视高度的说法（clientHeight和clientWidth永远是0）， 垂直方向的行为表现彻底受line-height和vertical-align的影响;视觉上并无改变和上一行下一行内容的间距

应用

增长连接或按钮的点击区域大小

利用内联元素的padding实现高度可控的分隔线

元素发生锚点定位;标题距离页面的顶部有一段距离

padding 的百分比值

块状特性的元素

padding百分比值不管是 水平方向仍是垂直方向均是相对于宽度计算

内联元素

  • 一样相对于宽度计算
  • 默认的高度和宽度细节有差别
  • padding会断行

padding 与图形绘制

移动端菜单“三道杠”

双层圆点图形效果

margin 属性

margin 与元素尺寸以及相关布局

元素尺寸的相关概念

元素内部尺寸

  • $().innerWidth()和$().innerHeight()；
  • content + padding；
  • DOM API clientWidth clientHeight

元素尺寸

  • $().width()和$().height()；
  • content + padding + border；
  • DOM API offsetWidth offsetHeight

元素外部尺寸

  • $().outerWidth(true) $().outerHeight(true)
  • content + padding + border + margin

margin与元素的内部尺寸(针对具备块状特性的元素)

只有元素是“充分利用可用空间”(宽度自动100%)

margin才能够改变元素的可视尺寸

应用

列表块两端对齐，一行显示3个，中间有2个20像素的间隙 
ul {
　  margin-right: -20px;
}
ul > li {
　  float: left;
　  width: 100px;
　  margin-right: 20px;
}

正确看待 CSS 世界里的 margin 合并

什么是margin合并

块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距

注意

  • 块级元素，但不包括浮动和绝对定位元素，尽管浮动和绝对定位可让元素块状化
  • 只发生在垂直方向，须要注意的是，这种说法在不考虑writing-mode的状况

margin合并的多种场景

相邻兄弟元素margin合并

p { margin: 1em 0; }
<p>第一行</p>
<p>第二行</p>

父级和第一个/最后一个子元素

解决margin合并

margin-top合并

  • 父元素设置为块状格式化上下文元素（overflow：hidden）
  • 父元素设置border-top值
  • 父元素设置padding-top值
  • 父元素和第一个子元素之间添加内联元素进行分隔

margin-bottom合并

  • 父元素设置为块状格式化上下文元素（overflow：hidden）
  • 父元素设置border-bottom值
  • 父元素设置padding-bottom值
  • 父元素和第一个子元素之间添加内联元素进行分隔
  • 父元素设置height、min-height或max-height

margin合并的计算规则

正正取大值

正负值相加

负负最负值

margin 合并的意义

兄弟元素的margin 合并

让图文信息的排版更加舒服天然

兄弟元素的margin 合并

在页面中任何地方嵌套或直接放入任何裸""<div>""，都不会影响原来的块状布局。

深刻理解 CSS 中的 margin:auto

触发条件

width或height为auto时;元素是具 有对应方向的自动填充特性

填充规则

填充闲置尺寸
  • 若是一侧定值，一侧auto，则auto为剩余空间大小
  • 若是两侧均是auto，则平分剩余空间

应用

左右对齐

查看示例

margin 无效情形解析

  • display 计算值inline的内联元素
  • 表格中的<tr>和<td>元素或者设置display 计算值是table-cell 或table-row
  • margin 合并的时候，更改margin 值

功勋卓越的 border 属性

了解各类 border-style 类型

应用

三道杠

.icon-menu {
　 width: 120px;
　 height: 20px;
　 border-top: 60px double;
　 border-bottom: 20px solid;
}

border-color 和 color

border-color默认颜色就是color色值;没有指定 border-color颜色值的时候，会使用当前元素的 color计算值做为边框色

border 与透明边框技巧

增长点击区域大小

.icon-clear {
　 width: 16px;
　 height: 16px;
　 border: 11px solid transparent;
}

字母 x—CSS 世界中隐匿的举足轻重的角色

字母x与CSS中的x-height

图片描述

  • ascender height: 上下线高度
  • cap height: 大写字母高度
  • median: 中线
  • descender height: 下行线高度

字母x与CSS中的ex

ex是CSS中的一个相对单位; 小写字母x的x-height（不受字体和字号影响的内联元素的垂直居中对齐效果）；内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度；

查看示例

注意

  • vertical-align:middle

    • 指的是基线往上1/2 x-height高度;内联元素垂直居中是对文字

内联元素的基石 line-height

内联元素的高度之本——line-height

  • 非替换元素的纯内联元素，其可视高度彻底由line-height决定
定了用来计算行框盒子高度的基础高度; 经过改变“行距”来实现

查看示例

“行距”

![x-height2](F:markdown-笔记css世界x-height2.png)

行距 = line-height - font-size

做用

能够瞬间明确咱们的阅读方向，让咱们阅读文字更轻松

"半行距"

当前文字的上方和下方；这个“行距”的高度仅仅是完整“行距”高度的一半

计算公式

半行距 = (line-height - font-size )/2;

替换元素的高度与line-height的关系

line-height不能够影响替换元素；可是在视觉上是受到line-height影响了，那是由于把“幽灵空白节点”的高度变高了；图片为内联元素，会构成一个“行框盒子”，而在HTML5文档模式下，每个“行框盒子”的前面都有一个宽度为0的“幽灵空白节点”特性表现和普通字符如出一辙；

块级元素的高度与line-height的关系

经过改变块级元素里面内联级别元素占据的高度实现

为何 line-height 可让内联元素“垂直居中”

CSS中“行距的上下等分机制”

单行文字垂直居中

只须要line-height这一个属性就能够

近似垂直居中

文字字形的垂直中线位置广泛要比真正的“行框盒子”的垂直中线位置低

多行文本垂直居中

须要line-height属性的好朋友vertical-align属性帮助

查看示例

深刻 line-height 的各种属性值

line-height:normal

不一样系统不一样浏览器的默认line-height都是有差别

![3](F:markdown-笔记css世界3.png)

line-height应该重置为多大的值,是使用数值、百分比值仍是长度值

数值

如line-height:1.5，其最终的计算值是和当前font-size相乘后的值

百分比值

如line-height:150%，其最终的计算值是和当前font-size相乘后的值

长度值

也就是带单位的值，如line-height:21px或者line-height:1.5em;最终的计算值是和当前font-size相乘后的值

区别

  • 使用数值；全部的子元素继承的都是这个值
  • 使用百分比值或者长度值；全部的子元素继承的是最终的计算值

应用

重图文内容展现的网页或者网站
考虑到文章阅读的温馨度，line-height值能够设置在1.6～1.8
偏重布局结构精致的网站
长度值或者数值

内联元素 line-height 的“大值特性”

终父级元素的高度都是由 数值大的那个line-height决定

line-height 的好朋友 vertical-align

vertical-align 家族基本认识

线类

如baseline（默认值）、top、middle、bottom

文本类

如text-top、text-bottom；

上标下标类

如sub、super

数值百分比类

如20px、2em、20%等 百分比是相对于line-height的计算值计算

vertical-align 做用的前提

只能做用在display计算值为 inline、inline- block，inline-table或table-cell的元素上

vertical-align 和 line-height 之间的关系

对字符而言， font-size越大字符的基线位置越往下，由于文字默认所有都是基线对齐，因此当字号大小不同的两个文字在一块儿的时候，彼此就会发生上下位移，若是位移距离足够大，就会超过行高的限制，而致使出现意料以外的高度

应用

  • 图片之间间隙问题
默认和基线（也就是这里字母x的下边缘）对齐，字母x往下的行高产生的多余的间隙就嫁祸到图片下面，让人觉得是图片产生的间隙，实际上，是 “幽灵空白节点”、line-height和vertical-align属性共同做用的结果

深刻理解 vertical-align 线性类属性值

inline-block与baseline

一个inline-block元素，若是里面没有内联元素，或者overflow不是visible，则该元素的基线就是margin底边缘；
不然其基线就是元素里面最后一行内联元素的基线

　应用

图标与文字居中
  • 图标高度和当前行高都是20px
  • 图标标签里面永远有字符
  • 图标CSS不使用overflow:hidden保证基线为里面字符的基线，可是要让里面潜在的字符不可见

查看示例

vertial-align:top/bottom

  • 内联元素：元素底部和当前行框盒子的顶部对齐
  • table-cell元素：元素底padding边缘和表格行的顶部对齐

vertial-align:middle

  • 内联元素：元素的垂直中心点和行框盒子基线往上1/2 x-height处对齐
  • table-cell元素：单元格填充盒子相对于外面的表格行居中对齐

查看示例

深刻理解 vertical-align 文本类属性值

vertical-align:text-top

盒子的顶部和父级内容区域的顶部对齐

vertical-align:text-bottom

盒子的底部和父级内容区域的底部对齐

vertical-align 上标下标类属性值

vertical-align:super

提升盒子的基线到父级合适的上标基线位置

vertical-align:sub

下降盒子的基线到父级合适的下标基线位置。

基于 vertical-align 属性的水平垂直居中弹框

查看示例

魔鬼属性 float

float 的本质与特性

浮动的本质就是为了 实现文字环绕效果。 而这种文字环绕，主要指的就是文字环绕图片显示的效果

特性

包裹性

  1. 包裹

    • 假设浮动元素父元素宽度200px，浮动元素子元素是一个128px宽度的图片，则此时浮动元素宽度表现为“包裹”，就是里面图片的宽度128px;

  2. 自适应性

    • 若是浮动元素的子元素不仅是一张128px宽度的图片，还有一大波普通的文字,浮动元素宽度就自适应父元素的200px宽度，最终的宽度表现也是200px

块状化并格式化上下文

元素一旦float的属性值不为none，则其display计算值就是block或者table

破坏文档流

没有任何margin合并

float 的做用机制

  1. 行框盒子若是和浮动元素的垂直高度有重叠，则行框盒子在正常定位状态下只会跟随浮动元素
  2. 块状盒子中的“行框盒子”被浮动元素限制，没有任何的重叠

float 更深刻的做用机制

浮动锚点

是float元素所在的“流”中的一个点，这个点自己并不浮动，就表现而言如同一个空的内联元素，有内联元素天然就有“行框盒子”

浮动参考

是浮动元素对齐参考的实体: float元素的“浮动参考”是“行框盒子”，也就是float元素在当前“行框盒子”内定位

float 与流体布局

查看示例

.animal元素没有浮动，也没有设置宽度， 所以，流动性保持得很好，设置margin-left、border-left或者padding-left均可以自动改变content box的尺寸，继而实现了宽度自适应布局效果

float 的自然克星 clear

什么是 clear 属性

clear属性是 让自身不能和前面的浮动元素相邻，注意这里“前面的”3个字，也就是clear属性对“后面的”浮动元素是漠不关心的

成事不足败事有余的 clear

查看示例

  • clear属性只有块级元素才有效;
  • 因为clear:both的做用本质是让本身不和float元素在一行显示，并非真正意义上的清除浮动

CSS 世界的结界—BFC

BFC 的定义

“CSS世界的结界”;经过一些特定的手段造成的封闭空间，里面的人出不去，外面的人进不来，具备极强的防护力

表现原则

  • BFC元素是不可能发生margin重叠
  • BFC元素清除浮动

触发BFC条件

  • <html>根元素
  • float的值不为none
  • overflow的值为auto、scroll或hidden
  • display的值为table-cell、table-caption和inline-block中的任何一个
  • position的值absolute
只要元素符合上面任意一个条件， 就无须使用clear:both属性去清除浮动

BFC 与流体布局

img { float: left; }
.animal { overflow: hidden; }
<div class="father">
　 <img src="me.jpg">
　 <p class="animal">小猫1，小猫2，...</p>
</div>
通流体元素在设置了overflow:hidden后， 会自动填满容器中除了浮动元素之外的剩余空间，造成自适应布局效果，并且这种自适应布局要比纯流体自适应更加智能

最佳结界 overflow

要想完全清除浮动的影响，最适合的属性不是clear而是overflow。通常使用overflow:hidden，利用BFC的“结界”特性完全解决浮动对外部或兄弟元素的影响

overflow 剪裁界线 border box

当子元素内容超出容器宽度高度限制的时候，剪裁的边界是 border box的内边缘

注意

要尽可能避免滚动容器设置padding-bottom值，除了样式表现不一致外，还会致使scrollHeight值不同
  • Chrome:若是容器可滚动（假设是垂直滚动），则padding-bottom也算在滚动尺寸以内
  • IE和Firefox浏览器忽略padding-bottom

overflow 与锚点定位

触发条件

  • URL地址中的锚链与锚点元素对应并有交互行为

    • 由”内而外”的锚点定位会触发窗体的重定位，也就是说，若是页面也是能够滚动的，则点击选项卡按钮后页面会发生跳动

  • 可focus的锚点元素处于focus状态

    • 相似连接或者按钮、输入框等能够被focus的元素在被focus时发生的页面重定位现
    • 页面窗体就有滚动条，绝大多数状况下，也都不会发生跳动现象

锚点定位做用的本质

经过改变容器滚动高度或者宽度来实现;容器的滚动高度，而不是浏览器的滚动高度; 并且定位行为的发生是由内而外

定位行为的发生是由内而外

普通元素和窗体同时可滚动的时候，会由内而外触发全部可滚动窗体的锚点定位行为

overflow:hidden跟overflow:auto和overflow：scroll

别就在于有没有那个滚动条。元素设置了overflow:hidden声明， 里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在

float 的兄弟 position:absolute

当 absolute和float同时存在的时候， float属性是无任何效果的

absolute 的包含块

元素用来计算和定位的一个框

计算规则

  1. 根元素（不少场景下能够当作是<html>）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小
  2. position是relative或者static，则“包含块”由其最近的块容器祖先盒的content box边界造成
  3. position:fixed,是“初始包含块”

  4. position:absolute，则“包含块”由最近的position不为static的祖先元素创建

    1. 内联元素也能够做为“包含块”所在的元素

      内联元素的“包含块”是由“生成的”先后内联盒子决定的，与里面的内联盒子细节没有任何关系

    2. 包含块”所在的元素不是父块级元素，而是最近的position不为static的祖先元素或根元素

      1. 绝对定位元素默认的最大宽度就是“包含块”的宽度

    3. 边界是padding box而不是content box

      由于绝对定位元素的定位值和列表容器的padding值耦合在一块儿了:咱们对padding间距进行调整的时候，绝对定位元素的right、top值也必定要跟着一块儿调整，不然就会出现样式问题

具备相对特性的无依赖 absolute 绝对定位

一个绝对定位元素，没有任何left/top/right/bottom属性设置，而且其祖先元素所有都是非定位元素: 当前位置

特性

  • 代码更简洁
  • 相对定位特性:仅仅是不占据CSS流的尺寸空间而已

absolute 与 overflow

若是 overflow不是定位元素， 同时绝对定位元素和overflow容器之间没有定位元素，则overflow没法对absolute元素进行剪裁

若是overflow的属性值不是hidden而是auto或者scroll，即便绝对定位元素高宽比overflow元素高宽还要大，也都不会出现滚动条

应用

  • 局部滚动的容器中模拟近似position:fixed的效果

查看示例

absolute 与 clip

clip属性要想起做用，元素必须是 绝对定位或者固定定位

从新认识的 clip 属性

fixed固定定位的剪裁

overflow属性每每就力不能及了，由于fixed固定定位元素的包含块是根元素，除非是根元素滚动条，普通元素的overflow是根本没法对其进行剪裁的; 可是clip能够

最佳可访问性隐藏

它具 有更强的广泛适应性，任何元素、任何场景均可以无障碍使用

深刻了解 clip 的渲染

  • clip隐藏仅仅是决定了哪部分是可见的，非可见部分没法响应点击事件等
  • 视觉上隐藏，可是元素的尺寸依然是本来的尺寸，在IE浏览器和Firefox浏览器下抹掉了不可见区域尺寸对布局的影响，Chrome浏览器却保留了

absolute 的流体特性

当 absolute 遇到 left/top/right/bottom 属性

absolute元素才 真正变成绝对定位元素

若是咱们仅设置了一个方向的绝对定位,没有设置方向依然保持了相对特性

absolute 的流体特性

流体特性:对立方向同时发生定位的时候

设置了对立定位属性的绝对定位元素的表现神似普通的<div>元素，不管设置padding仍是margin，其占据的空间一直不变，变化的就是content box的尺寸

absolute 的 margin:auto 居中

.element {
　 width: 300px; height: 200px;
　 position: absolute; 
　 left: 0; right: 0; top: 0; bottom: 0;
　 margin: auto;
}

position:relative 才是大哥

relative 与定位

相对自身

相对于自身进行偏移定位

查看示例

  • 当相对定位元素同时应用对立方向定位值的时候；只有一个方向的定位属性会起做用；孰强孰弱则是与文档流的顺序有关的，默认的文档流是自上而下、从左往右

无侵入

即便本身移动，也会在原来的位置留下空间

当relative进行定位偏移的时候，通常状况下不会影响周围元素的布局

relative 的最小化影响原则

  1. 尽可能不使用relative，若是想定位某些元素，看看可否使用“无依赖的绝对定位”
  2. 若是场景受限，必定要使用relative，则该relative务必最小化(再增长div嵌套，且没有定位)

强悍的 position:fixed 固定定位

position:fixed 不同的“包含块”

position:fixed固定定位元素的“包含块”是<html>根元素；

理解 CSS 世界的层叠上下文和层叠水平

当内容发生层叠的时候，必定会有一个先后的层叠顺序产生

什么是层叠上下文

自成一个小世界。这个小世界中可能有其余的“层叠结界”，而自身也可能处于其余“层叠结界”中

什么是层叠水平

同一个层叠上下文中元素在z轴上的显示顺序

理解元素的层叠顺序

元素发生层叠时有着特定的垂直显示顺序

![css3](F:markdown-笔记css世界css3.png)

务必牢记的层叠准则

谁大谁上

当具备明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个

后来居上

当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素

深刻了解层叠上下文

层叠上下文的特性

  • 层叠上下文的层叠水平要比普通元素高
  • 层叠上下文能够阻断元素的混合模式
  • 层叠上下文能够嵌套，内部层叠上下文及其全部子元素均受制于外部的“层叠上下文”
  • 每一个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只须要考虑后代元素
  • 每一个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中

层叠上下文的建立

天生派

页面根元素天生具备层叠上下文，称为根层叠上下文。
  • <html>

正统派

z-index值为数值的定位元素的传统“层叠上下文”。

position值为relative/absolute以及Firefox/IE浏览器（不包括Chrome浏览器）下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会建立层叠上下文

扩招派

其余CSS3属性
  • 元素为flex布局元素（父元素display:flex|inline-flex），同时z-index值不是auto
  • 元素的opacity值不是1
  • 元素的transform值不是none
  • 元素mix-blend-mode值不是norma
  • 元素的filter值不是none
  • 元素的isolation值是isolate
  • 元素的will-change属性值为上面2～6的任意一个（如will-change:opacity、will-chang:transform等）
  • 元素的-webkit-overflow-scrolling设为touch

层叠上下文与层叠顺序

  • 若是层叠上下文元素不依赖z-index数值，则其层叠顺序是z-index:auto，可当作z:index:0级别
  • 若是层叠上下文元素依赖z-index数值，则其层叠顺序由z-index值决定

z-index 负值深刻理解

z-index负值渲染的过程就是一个寻找第一个层叠上下文元素的过程，而后层叠顺序止步于这个层叠上下文元素

z-index“不犯二”准则

定位元素一旦设置了z-index值

从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了巨大的z-index值也没法覆盖其余元素的问题

避免z-index“一山比一山高”的样式混乱问题

line-height 的另一个朋友 font-size

font-size 和 vertical-align 的隐秘故事

line-height的部分类别属性值是相对于font-size计算的，vertical-align百分比值属性值又是相对于line-height计算的

理解 font-size 与 ex、 em 和 rem 的关系

font-size值越大，天然ex对应的大小也就大

em相对于当前元素，

rem相对于根元素，本质差异在于当前元素是多变的，根元素是固定的，也就是说，若是使用rem，咱们的计算值不会受当前元素font-size大小的影响

理解 font-size 的关键字属性值

font-size默认值是medium，而medium计算值仅与浏览器设置有关

font-size:0 与文本的隐藏

并非全部小于12px的font-size都会被看成12px处理，有一个值例外，那就是0，也就是说，若是font-size:0的字号表现就是0，那么文字会直接被隐藏掉，而且只能是font-size:0，哪怕设置成font-size:0.0000001px，都仍是会被看成12px处理的

字体属性家族的你们长 font-family

了解衬线字体和无衬线字体

衬线字体

笔画开始、结束的地方有额外装饰并且笔画的粗细会有所不一样的字体

无衬线字体

没有这些额外的装饰，并且笔画的粗细差很少

等宽字体的实践价值

font-family: Consolas, Monaco, monospace;

等宽字体与代码呈现

利于代码呈现

ch单位与等宽字体布局

ch相关的字符是0，就是阿拉伯数字0;1ch表示一个0字符的宽度，因此6个0所占据的宽度就是6ch

字体家族其余成员

貌似粗犷、实则精细无比的 font-weight

用数值做为font-weight属性值，必须是100～900的整百数

font-weight不管是设置300、400、500仍是600，文字的粗细都没有任何变化，只有到700的时候才会加粗一下

由于咱们的系统里面缺少对应粗细的字体

具备近似姐妹花属性值的 font-style

italic

用当前字体的斜体字体

oblique

单纯地让文字倾斜

font 属性

做为缩写的 font 属性

font-size和font-family是必需的

使用关键字值的 font 属性

使用关键字做为属性值的时候必须是独立的，不能添加font-family或者font-size之类

font 关键字属性值的应用价值

但愿非Windows系统下不要使用“微软雅黑”字体，而是使用其系统字体 
html { font: menu; }
body { font-size: 16px; }

html { font: small-caption; }
body { font-size: 16px; }

html { font: status-bar; }
body { font-size: 16px; }

让网页的字体跟系统走

真正了解@font face 规则

@font face 的本质是变量

@font-face {
　font-family: 'example';
　src: url(example.ttf);
　font-style: normal;
　font-weight: normal;
　unicode-range: U+0025-00FF;
}

font-family

font-family能够当作是 一个字体变量;

本来系统就有的字体名称,不能随便设置

src

引入的字体资源能够是系统字体，也能够是外链字体

  • 使用系统安装字体

    • local()

  • 使用外链字体

    • url()

font-style

重置对应字体样式或字重下该使用什么字体

font-weight

它定义了不一样字重、使用不一样字体

unicode-range

让特定的字符或者特定范围的字符使用指定的字体

文本的控制

text-indent 与内联元素缩进

对文本进行缩进控制
  • text-indent的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素
  • 仅对第一行内联盒子内容有效
  • 非替换元素之外的display计算值为inline的内联元素设置text-indent值无效，若是计算值是inline-block/inline-table则会生
  • <input>标签按钮text-indent值无效
  • <button>标签按钮text-indent值有效(有兼容问题)
  • <input>和<textarea>输入框的text-indent在低版本IE浏览器下有兼容问题

letter-spacing 与字符间距

控制字符之间的间距，这里说的“字符”包括英文字母、汉字以及空格等

特性

  • 继承性
  • 默认值是normal而不是0
  • 支持负值，且值足够大的时候，会让字符造成重叠，甚至反向排列（非IE浏览器）
  • 和text-indent属性同样，不管值多大或多小，第一行必定会保留至少一个字符
  • 支持小数值，即便0.1px也是支持的，但并不总能看到效果，这与屏幕的密度有关
  • 暂不支持百分比值

word-spacing 与单词间距

增长空格的间隙宽度; 是做用在“空格”上

了解 word-break 和 word-wrap 的区别

word-break

是全部的都换行，绝不留情，一点儿空隙都不放过

word-wrap

若是这一行文字有能够换行的点，如空格或CJK（中文/日文/韩文）之类的，就不打英文单词或字符的主意了，在这些换行点换行，至于对不对齐、好很差看则不关心

white-space 与换行和空格的控制

white-space的处理模型

如何处理元素内的空白字符

white-space与最大可用宽度

当white-space设置为nowrap的时候，元素的宽度此时表现为“最大可用宽度”，换行符和一些空格所有合并，文本一行显示

如何解决 text-decoration 下划线和文本重叠的问题

border 
a {
　text-decoration: none;
　border-bottom: 1px solid;
}

了解:first-letter/:first-line伪元素

深刻:first-letter伪元素及其实例

::first-letter伪元素生效的前提

  1. 元素的display计算值必须是 block、inline-block、list-item、display:table和display:flex、table- cell或者table-caption，其余全部display计算值都没有用

  2. 常见的标点符号、各种括号和引号在::first-letter伪元素眼中所有都是“辅助类”字符

    • ·@#%&()（）[]【】{}:："“”;；'‘’》《,，.。？?!！…、/\

查看示例

::first-letter伪元素能够生效的CSS属性

  1. 全部字体相关属性：font、font-style、font-variant、font-weight、font-size、line-height和font-family
  2. 全部背景相关属性：background-color、background-image、background- position、background-repeat、background-size和 background-attachment
  3. 全部margin相关属性：margin、margin-top、margin-right、margin-bottom和margin-left
  4. 全部padding相关属性：padding、padding-top、padding-right、padding- bottom和padding-left
  5. 全部border相关属性：缩写的border、border-style、border-color、border-width和普通书写的属性
  6. color属性
  7. text-decoration、text-transform、letter-spacing、word-spacing（合适情境下）、line-height、float和vertical-align（只有当float为none的时候）等属性

应用

  • 电商价格 符号添加字体大小
电商产品常常会有价格，价格前面通常都有一个¥符号，这个符号字体每每会比较特殊，字号也比较大，同时和文字的数值有几像素的距离

注意

  • 伪元素会受到影响
p:before {
　content: '新闻：';
}
p:first-letter {
　color: silver;
}

<p>这是新闻的标题……</p>

故事相对较少的:first-line伪元素

向文本的首行添加特殊样式

生效前提与能够生效的CSS属性同上

CSS 世界的 background 很单调

隐藏元素的 background-image 到底加不加载

一个元素若是display计算值为none

  • 在IE浏览器下（IE8～IE11，更高版本不肯定）依然会发送图片请求
  • Firefox浏览器不会

  • 至于Chrome和Safari浏览器则彷佛更加智能一点

    • 若是隐藏元素同时又设置了background-image，则图片依然会去加载
    • 若是父元素的display计算值为none，则背景图不会请求，此时浏览器或许放心地认为这个背景图暂时是不会使用的

元素的显示与隐藏

隐藏实践

元素不可见，同时不占据空间；辅助设备没法访问，同时不渲染

<script type="text/html">
　<img src="1.jpg">
</script>

元素不可见，同时不占据空间；辅助设备没法访问，但资源有加载，DOM可访问

.dn {
　display: none;
}

元素不可见，同时不占据空间；辅助设备没法访问，但显隐的时候能够有transition淡入淡出效果

.hidden {
　position: absolute;
　visibility: hidden;
}

元素不可见，不能点击，辅助设备没法访问，但占据空间保留

.vh {
　visibility: hidden;
}

元素不可见，不能点击，不占据空间，但键盘可访问

.clip {
　position: absolute; 
　clip: rect(0 0 0 0);
}
.out {
　position: relative; 
　left: -999em;
}

元素不可见，不能点击，但占据空间，且键盘可访问

.lower {
  position: relative;
　z-index: -1;
}

元素不可见，但能够点击，并且不占据空间

.opacity {
　position: absolute;
　opacity: 0;
　filter: Alpha(opacity=0);
}

元素看不见，但位置保留，依然能够点能够选

.opacity {
　opacity: 0;
　filter: Alpha(opacity=0);
}

display 与元素的显隐

display:none元素的background-image图片不加载

  • Firefox浏览器下不加载；包括父元素display:none也是如此

  • Chrome和Safari浏览器

    • 父元素display:none，图片不加载
    • 自己背景图所在元素隐藏，则图片依旧会去加载
  • 对IE浏览器而言，不管怎样都会请求图片资源

display:none元素的image图片全部浏览器下依旧都会请求图片资源

一些属性也是自然display:none

hidden类型的<input>输入框

动画实现

  • display:none显隐控制并不会影响CSS3 animation
  • 会影响CSS3 transition过渡效果执行（transition每每和visibility属性走得比较近）

visibility 与元素的显隐

不只仅是保留空间这么简单

visibility的继承性

父元素设置visibility:hidden，子元素也会看不见

visibility与CSS计数器

visibility:hidden不会影响计数器的计数

visibility与transition

CSS3 transition支持的CSS属性中有visibility，可是并无display

和 border 形似的 outline 属性

语法和border属性很是相似，分宽度、类型和颜色，支持的关键字和属性值与border属性如出一辙

万万不可在全局设置 outline:0 none

  • 在默认状态下，对处于focus状态的元素，浏览器会经过虚框或者外发光的形式进行区分和提示;
  • 这种虚框或者外发光效果是很是有必要的，不然用户根本就不知道本身当前聚焦在哪一个元素上，甚至所以而迷失

真正的不占据空间的 outline 及其应用

outline属性确实不占据任何空间，轮廓宽度设置得再宽广，也不会影响任何元素的任何布局，而且outline轮廓是可穿透的

改变水平流向的 direction

direction 简介

.direction {
    direction: ltr;　 // 默认值
    direction: rtl;
}
  • ltr是初始值，表示left-to-right，就是从左往右的意思。目前东亚以及欧美文字书写就是从左往右的；
  • rtl表示right-to-left，就是从右往左的意思。阿拉伯语（Arabic）、希伯来语（Hebrew）等的书写就是从右往左的

应用

如何处理这种不一样设备、不一样按钮顺序的问题

@media screen and (max-width: 480px) {
　.dialog-footer { direction: rtl; }
}

改变 CSS 世界纵横规则的 writing-mode

writing-mode 本来的做用

用来实现文字竖向呈现 
.writing-mode {
    writing-mode: lr-tb | tb-rl | tb-lr (IE8+);
    writing-mode: horizontal-tb | vertical-rl | vertical-lr;
}

writing-mode 不经意改变了哪些规则

基于 本来水平方向才适用的规则所有均可以在垂直方向适用

普通块元素可使用margin:auto实现垂直居中

水平方向也能margin合并

使用text-align:center实现图片垂直居中

使用text-indent实现文字下沉效果

.btn:active {
　text-indent: 2px;
}
.verticle-mode {
　writing-mode: tb-rl;　　
　writing-mode: vertical-rl;
}

查看示例

实现全兼容的icon fonts图标的旋转效果

查看示例

利用高度的高度自适应布局

当文档变成垂直流的时候，height高度自然自适应

writing-mode 和 direction 的关系

writing-mode

改变 文档流为垂直方向

direction

改变的是 垂直方向的内联元素的文本方向

ps:有什么不清楚、错误，欢迎提出。

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