《CSS 世界》 PDF版 链接 , 使用纸质书效果更好

第4章 深入理解 content

4.1 content - 替换元素

1. 替换元素是指内容可以被替换。如：<img>,<object>,<video>,<iframe>,表单元素。所有替换元素都是内联水平元素。
2. 替换元素特点

• 外观不受css控制，如无法改变单选复选的样式
• 有默认的尺寸，大多为300px*150px，img为0，表单元素根据浏览器本身
• css属性有自身的一套规则，替换元素的基线为元素下边缘，非替换元素是字符x的下边缘
• 没有::after和::before

3. <input type="button">和<button>区别在于前者的white-space是pre后者是normal，内容足够多时<button>自动换行。
4. 无法改变替换元素内容的固有尺寸。

<div class="div"></div> 
<!--这个 div 的图片大小不会变-->
<style>
div:before {    
  content: url(1.jpg);    
  display: block;    
  width: 200px; 
  height: 200px;}
</style>

5. 替换元素img没有src时，火狐浏览器下就是一个内联标签，而谷歌浏览器要有一个不为空的alt值，IE则有一个默认的占位符。
6. 谷歌浏览器下所有元素都支持content，但其他浏览器只有::after和::before支持。
7. content属性生成的对象叫匿名替换元素，有如下特点

• content生成的文本不能复制和选中
• 能左右:empty元素，即使用content生成了文字，但依然当做空
• content动态生成值无法获取

8. css counter

• counter-reset
• counter-increment
• counter()/counters()

<style>
.reset { padding-left: 20px; counter-reset: wangxiaoer; line-height: 1.6; color: #666; }
.counter:before { 
    content: counters(wangxiaoer, '-') '. '; 
    counter-increment: wangxiaoer; 
 }
</style>
<div class="reset">
    <div class="counter">我是王小二
        <div class="reset">
            <div class="counter">我是王小二的大儿子</div>
            <div class="counter">我是王小二的二儿子
                <div class="reset">
                    <div class="counter">我是王小二的二儿子的大孙子</div>
                    <div class="counter">我是王小二的二儿子的二孙子</div>
                    <div class="counter">我是王小二的二儿子的小孙子</div>
                </div>
            </div>
            <div class="counter">我是王小二的三儿子</div>
        </div>
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四
        <div class="reset">
            <div class="counter">我是王小四的大儿子</div>
        </div>
    </div>
</div>

4.2 温和的 padding

内联元素的 clientHeight和clientWidth永远是0,垂直方向的行为表现完全受line-height和vertical-align的影响, 而设置 padding可以对background 产生影响
技巧:

1. 增加链接或按钮的可点击大小同时不影响当前的内容布局
   artical a { paddingL .25em 0;}

2.登录 | 注册垂直分格符号 在这里 css 模拟出的管道符号的vertical-align是从 baseline 起步的,然后向下走1px,向上走10px

a + a:before {
  content: "";
  font-size: 0;
  padding: 10px 3px 1px;
  margin-left: 6px;
  border-left: 1px solid gray;
}

自身变化却不影响周围元素定位的方法有relative box-shadow outline inline 元素的 padding,其中inline 元素的 padding会影响外部尺寸(增加可点击面积), 而box-shadow和outline不会

4.2.2 padding的百分比值

• padding 的百分比值是相对于父元素宽度计算的
• 内联元素的 padding 会断行 , 参见 P78
• padding:50%没显示为正方形的原因是内联元素的垂直 padding会让幽灵空白节点显现, 那么设置font-size:0即可显示为正方形

4.2.3 标签元素内置的 padding

1. ol/ul列表内置padding-left且单位是px, Chrome 下是40px
2. 很多表单元素内置padding:
   • 所有浏览器<input> <textarea> <button>内置padding
   • 部分浏览器<select>内置padding
   • 所有浏览器<radio> <checkbox>无内置padding
   • <button>按钮的padding最难控制! 表现为 Firefox 设置 padding 为0但左右仍然有;IE7下button 里文字变多时左右 padding 逐渐增大(可通过设置overflow:visible消除).
   • 可使用<label>来解决上述<button> padding兼容性问题, 参见P80

4.2.4 padding 与图形绘制

带动画的三道杠:

原书中使用padding绘制的确可行,不过要追求动画的话还是选择创建三个标签比较好

    .line{
      width: 150px;
      height: 3px;
      background-color: #00CCFF;
      position: absolute;
      top:50%;
      left:50%;
      margin-left: -75px;
      transition : all 0.3s ease-in-out;
     }
    .line-middle{ margin-top: 0px;}
    .line-top{ margin-top:-40px; }
    .line-bottom{ margin-top:40px; }
    .wrap:hover .line-top{transform: translateX(0) translateY(40px) rotate(-45deg);}
    .wrap:hover .line-bottom{transform: translateX(0) translateY(-40px) rotate(45deg);}
    .wrap:hover .line-middle{opacity:0}

双层圆点效果 比较简单所以不贴代码了,只是说可以用 padding 实现

4.3 激进的 margin

• 可以用margin-left:auto来替代float:left实现右对齐效果
• 块级元素垂直居中的一种方法

.father{width:300px;height:150px;position:relative;}
.son{
  position:absolute:
  top:0;right:0;left:0;bottom:0;
  width:200px;height:100px;
  margin:auto;
}

此时 .son自动填充父级元素可用尺寸为300x150,但是它宽高被限制, 那么多余的空间就是margin:auto计算的空间, 也就是说,
为什么原始情况下margin: auto 0不会让元素垂直居中?
答: 因为width和height的对应方向填充特性不同, width:auto会填充至100%,但height:auto会使得元素高度变为0. 而margin:auto的计算规则是对应方向可用填充空间-元素实际大小,剩余部分进行 auto划分

4.3.5 margin 无效情形

详细情况建议看书

1. inline的非替换元素(例如span)的垂直margin无效, 但inline 替换元素(如img)的垂直 margin 有效,而且没有margin 合并问题
2. display: table-cell | table-row 的marigin 无效
3. margin 合并的时候, 若父元素设置margin-top:50px则子元素尝试设置的margin-top:30px无效
4. 绝对定位元素非定位方位的margin 无效. 例如img{ top:10%; left:30%},此时right和bottom处于auto状态,也就是右侧和底部没有定位, 此时在这两个方位上设置margin就看不到定位变化.可以结合前面的top:0 ; bottom:0; left:0; right:0的 margin计算规则来理解
5. 定高容器的子元素的margin-bottom无效 , 定宽容器的子元素的margin-right无效
6. 书中6.4节和5.3节(图片的位置被vertical-align:baseline限制死了导致margin-top不起作用)相关的内容

4.4 功勋卓越的 border

• 实现一个没有下边框的边框效果时, 结合设置宽度为0和style 为 none会使得渲染性能最高div{border:1px solid; border-bottom:0 none;}
• border-color的默认值会使用当前元素的color值, 据此可以简化hover时的 css 代码
• 可以用border绘制梯形和三角形

第5章 内联元素与流

5.2 内联元素的基石 line-height

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

例如设计师标注了文字字形上边缘到图片下边缘间距20px, 同时font-size: 14px; line-height:1.5 , 那么文字的实际margin-top值应该是17px, 因为(14*1.5 - 14)/2再向下取整是3px. 一般文字上间距向下取整, 文字下边距向上取整

• line-height可以影响替换元素(如图片高度)吗? 答案是 不可以. 图文混排时line-height只能决定最小高度, 剩下的替换元素带来的高度增加还会受到vertical-align的影响
• 对于块级元素line-height对其本身是没有任何作用的, 如果改变line-height的时候块级元素的高度跟着变化 , 实际上是通过改变块级元素里面的内联元素占据的高度实现的
• 设置display:inline-block的时候会重置从父元素继承来的line-height, 同时该'行框盒子'会附带一个幽灵空白节点来使父元素的line-height生效, 该效果在实现多行文本居中的时候有体现
• line-height的值为150% | 1.5em | 18px时先在父元素计算后再继承 , 为1.5时先继承再在子元素里计算
• CSS 中计算行高的时候, 行高值不要向下舍入,而要向上舍入,例如下面的代码,在 Chrome 中1.42857*14px就会以19px 呈现, Firefox 是20px 倒没错, 为了让Chrome它们都呈现20px设置1.42858更好一点

body{
  line-height:1.42858;   /* 20px/14px ~ 1.4285714 */
  font-size: 14px;
}

• 几个靠在一起的inline元素会共同组成一个"行框盒子",该行框盒子表现出来的line-height会取它们(包括幽灵空白节点)的最大值

5.3 line-height 的好朋友 vertical-align

• vertical-align:baseline相当于vertical-align:0
• vertical-align只能对内联元素以及table-cell元素起作用. 有些属性会在背后默默改变display的计算值从而导致vertical-align不起作用(例如浮动和绝对定位会让元素块状化)
• 一个 inline-block 元素，如果里面没有内联元素，或者 overflow 不是 visible， 则该元素的基线就是其 margin 底边缘;否则其基线就是元素里面最后一行内联元素的基线。
• 掘金

为什么 span{ font-size:20px ; line-height:20px}后auto计算的高度是28px或其它不等于20的数值?

• 测试发现, PingFang SC 的文字形成的content-area的高度大小 = font-size*1.4例如50px 对应70px , 而 Arial 就是font-size:100px对应113px , 另外 Firefox 浏览器可能会比 Chrome多1px
• W3C 说 行内盒内容区域高度在规范里面没有定义，浏览器可以自己折腾
• 结论是: 行内盒的内容区域高度计算没有统一的标准，不同的字体或者不同的浏览器都可能导致不同的结果，且其高度与 line-height 无关。由此我们无法确切地获得一个跨浏览器的行内盒的内容区域高度。同样我们也无法确切获得一个跨浏览器的行内盒高度（因为其计算式里面就包括了不定变量内容区域高度）
• 但是, 我们应该准确计算行盒高度(最好把幽灵空白节点设为line-height:0)

为什么 span 的父元素高度受到父元素的 font-size 和自身的 font-size 影响?

答:因为对字符而言, font-size越大字符的基线位置就越往下, 因为文字默认全部都是基线对齐, 所以当字号大小不一样的两个文字在一起的时候, 彼此就会发生上下位移

不同字号文字高度超出行高示意图

清除幽灵空白节点给图片带来的图片间隙方法 间隙示意

1. 图片块状化
2. 设置line-height:0或者通过font-size:0; line-height:默认浮点数的途径来间接得到line-height:0
3. 图片设置其它vertical-align属性, 例如top | middle | bottom

不定长定宽弹框 垂直居中

.container{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  overflow:auto;
}
/* inline-block配合伪类的解决方案*/
.container{
  font-size: 0;
  text-align:center;
}
.container:before{
  content:'';
  display:inline-block;
  width: 0;
  height:100%;
  vertical-align:middle;
}
.dialog{
  display:inline-block;
  vertical-align:middle;
  font-size: 14px;
}
/* flex 的解决方法 如果有2个 dialog,他们会先左右平分空间,再居中显示*/
.container{
  display:flex;
}
.dialog{
  margin : auto;
}
/* flex 还能这样写  如果有两块 dialog,它们会按照 flex 的指定对齐方式两个人一起显示在中间*/
.container{
  display:flex; justify-content:center; align-items:center;
}
.dialog{}
/* 父元素设置 table-cell 子元素设置 inlne-block 也可以, 但是这样父元素就不兼容 fixed 全屏显示了, 定宽高的话倒是还不错*/

第6章 流的破坏与保护

6.1 魔鬼 float

• float会让几乎所有元素的display变成block(除了inline-table会变成table以外) , 因此如果再多写一句display:block就浪费空间了.
• float的本意是构建"文字环绕效果" , 不推荐依赖它来布局, 但是有必要了解它来解释一些样式 bug
• "文字环绕效果"是"父级高度塌陷"和"行框盒子区域限制"共同作用的结果
• 如果行框盒子和浮动元素的垂直高度有重叠, 则行框盒子在正常定位状态下只会跟随浮动元素, 而不会发生重叠 . 例如文字会自动避开左侧的float:left的图片,此时无论给文字的行框盒子设置margin-left为负多少甚至是负无穷也不会生效(但是设置大于图片宽度的正值是有效的).
• 在 CSS 世界中, float 元素的"浮动参考"是"行框盒子" , 具体表现为: 三行文字的右侧有个float:right的元素的话, 它会紧跟在第3行的行框盒子右侧. 若float 元素周围都是块级元素, 那么可视为它正在依赖一个叫做浮动锚点(float anchor)的点,这个点就表现而言像一个没有 magin border padding 的空内联元素

6.2 float 的天然克星 clear

• 官方文档定义: "clear 元素的边不和前面的浮动元素相邻"

经典例子: 10个设置了float:left的 li, 再设置li:nth-of-type(3){ clear:both}, 结果表现为2行:
■ ■
■ ■ ■ ■ ■ ■ ■ ■
即clear 属性让自身不和前面的浮动元素相邻, 但对后面的浮动元素不闻不问

• clear属性只对块级元素有效

6.3 BFC

• 实用设置方法:
  • overflow:auto/hidden
  • display:inline-block for IE6/IE7
  • display:table-cell
• 能发挥作用的场景:
  • 消除父子元素margin 合并 : 在父元素上设置 BFC
  • 消除兄弟元素margin 合并 在其中一个节点外包裹一层 BFC
  • 清除浮动

6.4 overflow

• overflow-x和overflow-y的 visible值和其他值不共存
• 虽然文字打点的效果核心是text-overflow:ellipsis但是该表现依赖于overflow:hidden; white-space : nowrap;
• tabindex值相同时, 越靠前越在外的元素越先被访问 , tabindex="-1"的元素不会被tab 到 详解

6.5 position:absolute

• absolute和float一样具有包裹性
  • 让宽度表现从"包裹性"切换为"最大可用宽度"
    正常情况下，文档流中的文字内容不可超过包含块，元素的大小也不可超过包含块。但存在一种特殊情况，即是连续的英文字符和数字是可以突破这个限制的。除此之外我们也可以手动设置white-space:nowrap让宽度表现从包裹性变成最大可用宽度 可以参考 P182 关于包含块的部分
• absolute也有"块状化"特性, 所以经常一起出现的一句display:block可以说是多余的
• 提问:absolute 和 relative 相对的是 content-box / padding-box / border-box / margin-box?
  答: 被定位元素拿自己的margin-box去撞参考元素的padding-box . 参考 P183 & demo
• "无依赖绝对定位" : 即absolute的元素未设置top/left/right/bottom时所处的状态, 也不需要设置position:relative的父元素, 特别适合用来加New Hot 图标等脚标,无依赖绝对定位元素会自动跟在文字的前面或后面,再用 margin-top 和 margin-left 微调位置即可. 脚标 demo 下拉列表 demo

6.6 absolute 的流体特性

• position:absolute;top:0;right:0;bottom:0;left:0相比position:absolute;top:0;left:0;width:100%;height:100%的区别在于前者保留了流体特性, 换句话说前者充满了可用空间的是虚拟的margin-box, 而后者是content-box,即使强制设置box-sizing:border-box也还是和 margin-box差了一点.

6.9 大哥position:relative

• relative设置固定px单位的偏移时是相对自身, 而百分比值是相对于包含块
• top和bottom这两个垂直方向的百分比值是相对高度计算的
• 与绝对定位的拉伸表现不同, relative的top/bottom 或left/right同时设置时, 要整个你死我活,只有一个能生效(与文档流顺序有关) . 默认的文档流是自上而下\从左往右, 因此top/bottom同时使用只有top生效, 同理left
• relative 最小化影响原则:
  • (1) 尽量不使用 relative , 定位元素时优先使用"无依赖的绝对定位"
  • (2) 如果场景受限一定要用relative, 则务必relative 最小化

 <div class="box2" style ="position:relative">
    <img src="https://eleme.setsuna.wang/touma2.jpg" alt="" style="position:absolute;right:0;top:0">
    <p>some thing</p>
    <p>some thing</p>
    <p>some thing</p>
    <p>some thing</p>
  </div>
<!--  relative最小化原则, 把上面的代码按照下面的方式来定位 img, 能保持更好的 index 层级 -->
<div class="box1">
    <div style ="position:relative">
      <img src="https://eleme.setsuna.wang/touma2.jpg" alt="" style="position:absolute;right:0;top:0">
    </div>
    <div class="box1">sth</div>
    <div class="box1">sth</div>
    <div class="box1">sth</div>
    <div class="box1">sth</div>
  </div>

6.10.3 fixed 背景锁定

具体参考书中 P209 , 思路是 移动端@touchmove.preventPC 端根元素 overflow:hidden, 同时在 window 系统中要注意解决滚动条消失带来的宽度变化以及页面晃动问题, 可使用透明的 border-right 来填充windows 滚动条的原位置

第7章 CSS 世界的层叠规则

对于relative / absolute元素, 当其index不为auto的时候 , 就会创建一个层叠上下文, 如下面的例子,后者判断层级时优先比较了所在的层叠上下文

<div style="position:relative; z-index:auto;">
    <!-- 美女 -->
    <img src="1.jpg" style="position:absolute; z-index:2;">  
</div>
<div style="position:relative; z-index:auto;">
    <!-- 美景 -->
    <img src="2.jpg" style="position:relative; z-index:1;">  
</div>

<div style="position:relative; z-index:0;">
    <!-- 美女 -->
    <img src="1.jpg" style="position:absolute; z-index:2;">  
</div>
<div style="position:relative; z-index:0;">
    <!-- 美景 -->
    <img src="2.jpg" style="position:relative; z-index:1;">  
</div>

CSS3会创建层叠上下文的属性

• z-index值不为auto的flex项(父元素display:flex|inline-flex).
• 元素的opacity值不是1.
• 元素的transform值不是none.
• 元素mix-blend-mode值不是normal.
• 元素的filter值不是none.
  -元素的isolation值是isolate.
• will-change指定的属性值为上面任意一个。
• 元素的-webkit-overflow-scrolling设为touch.

再看一个例子:

<style>
  .container{
    background: white;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    width:400px;
    height: 150px;
    position:relative;
    z-index:-1;
  }
  .container:before,.container:after{
    content:'';
    position: absolute;
    width: 90%;
    height: 20%;
    background-color: antiquewhite;
    bottom:0;
  }
  .container:before{
    transform: skewX(12deg) rotate(4deg);
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
    z-index:-1;
    transform-origin: bottom right;
    right:0;
    bottom:0;
  }
  .container:after{
    transform: skewX(-12deg) rotate(-4deg);
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
    z-index:-1;
    transform-origin: bottom left;
    left:0;
    bottom:0;
  }
  .box{
    width: 300px;
    height: 200px;
  }
  .fixed{
    z-index:-50;
    margin-top:-70px;
    background: red;
    width: 400px;
    height: 400px;
  }
</style>
<body>
  <div class="container">
    ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl 
  </div>
</body>

表现为:

container成为了层级上下文,所以排序为层级上下文的文字内容> z-index 为负值的两个框框 > 层级上下文的背景,对应顶图中2 > 6 > 7 的排序

对应顶图中 5 > 6的排序

7.7 z-index "不犯二" 准则

"不犯二准则" :
"对于非浮层元素,避免设置z-index值,z-index没有任何理由超过2

换句话说, 对于页面上的主体元素遵循 z-index不犯二 准则 , 而对于浮层元素(小图标定位->弹框组件层->弹框中的出错提示效果 层级越来越高)使用层级计数器来递增, 也不要太大, 9就差不多了

第8章 强大的文本处理能力

使用和系统相同的字体:

html { font:menu;  }
body { font-size: 16px; }

个人喜欢:

body { font-family: "Helvetica","Microsoft Yahei",sans-serif; }

8.5 @font-face

@font-face {
  font-family: 'sell-icon';
  src:  url('fonts/sell-icon.eot?s6c1hl');
  src:  url('fonts/sell-icon.eot?s6c1hl#iefix') format('embedded-opentype'),
    url('fonts/sell-icon.ttf?s6c1hl') format('truetype'),
    url('fonts/sell-icon.woff?s6c1hl') format('woff'),
    url('fonts/sell-icon.svg?s6c1hl#sell-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'sell-icon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-arrow_lift:before {
  content: "\e900";
}

1. eot 是 IE 私有的,IE6~8仅支持这一种字体格式, 如果无需兼容 IE8可以果断舍弃 eot
2. ? : IE9之前的版本会把?之后的内容当做 url 的参数, #iefix可以让请求地址短一些,因为请求地址是不包含锚点标志#及其后面的内容的
3. 写两个 src: 测试工程师测试低版本的 IE 浏览器喜欢使用兼容模式, 而兼容模式的 IE7和 IE8不认识问号解决方案,导致第二个 src 无法识别, 因此多了第一行
4. svg为了支持iOS 4.1及其之前版本, 现在可以果断舍弃
5. ttf作为系统安装字体比较多, Web 开发也能用 , 尺寸略大, 不需兼容安卓4.3之前版本的话可以舍弃
6. woff和woff2是 web open font format的缩写, 加载速度快, Web 开发首选字体
7. format让浏览器提前知道字体的格式, 以决定是否加载这个字体,而不是加载完了再判断.
8. font-family和font-style在拥有同字体名的多字体设置时才有用,例如响应式图标字体效果 参见 P252
   
   响应式图标字体效果
9. unicode-range 可以针对指定字符使用其它字体替换, 例如替换中文引号

8.6 文本控制

• letter-spacing控制字符间距, 可以用来制作字符飞入效果
• word-spacing原意是控制单词之间距离, 但实际上只控制了空格的宽度
  
• word-break:break-all所有都换行 , word-wrap:break-word如果有"空格 CJK 字符"之类的换行点存在就不打英文的主意了
• 一本万利的text-transform: uppercase , 适用于身份证输入x 的时候自动转换为大写 X / 验证码输入时转换大写 demo

虽然显示为大写了但是 value 值还是小写, 所以传后台时要转换一下

• :first-letter的颜色权重总是多了一层 P277
  • :first-letter可以用来单独调整￥这类控制价格的字符的样式 , 而不必额外创造一个 dom 结构了
• white-space不同取值意义

9 元素的装饰和美化

• CSS1-CSS3 <color>颜色知识知多少？
  CSS1&2的时候只支持17个颜色关键字, CSS3新增的颜色关键字在IE8中是不支持的.

9.2.2 与众不同的background-position百分比计算方式

• positionX = ( 容器的高度 - 图片的高度) * percentX
• positionY = ( 容器的宽度 - 图片的宽度) * percentY

11 cursor

• 可以使用各种各样的 cursor 来提高用户体验,例如zoom-in zoom-out default none help text move nwse-resize等等
• direction可以改变元素左右排序
• writing-mode:vertical-rl古诗竖版样式

附

• 改变元素的收缩性可通过object-fit(替换元素)或
  width:-webkit-fit-content | fill-available | min-content来操作,具体内容去翻鑫空间