《CSS世界》学习笔记

18813863853
277 阅读3分钟

CSS王国 浏览器

魔法师  width,display

基石  div span     


 人在做抉择的时候是需要有一些指引的。实际上，很多年前，我自己曾犹豫过，是否要继 续深入学习 CSS，探索每一个边界，因为对于个人而言，这会是一件吃力不讨好的事情，对于 CSS 这门语言，3 年学习 80 分和 10 年学习 90 分对于产品价值的区别其实有限。但那一封封交 流邮件坚定了自己的方向，艰苦的路让我一个人走就好了，等我踏遍整个 CSS 世界，再把完整 的地图绘制出来，岂不就能帮助更多人了?

所以，随着自己的不断前行，身边的人越来越少，少到好像就我一个人，无比孤寂的时候， 让我坚持下来的就是“日后可以帮助更多人，是很有价值的”的信念。

10 年过去了，10 年的努力和付出终于开始开花结果，而其中一个果实就是《CSS 世界》 这本书。

10 年风雨积累，踏遍 CSS 世界的千山万水，哪里有美景，哪里有秘境，哪里是陷阱，哪 里是路径，我全了然于心。我这样做为的就是给予清晰明确的指引，拓展对 CSS 世界的认知， 挖掘 CSS 的潜力，帮助他人突破一个又一个 CSS 学习的瓶颈。 


1995年，据说当时有几 个样式表语言，最后是 CSS胜  出 了，为什么呢? CSS 胜出 的是“层 叠”特性。 

我再重 一遍:CSS 世界的 诞生就是为图文展示服务的。 

CSS完胜  SVG  ---流 

HTML：容器

DIV ：水

SPAN：小木块

我很多年前总结过一套“ 三无准则”， “无宽 度，无图片，无浮动”。 

无宽 度：http://demo.cssworld.cn/3/2-3.php 

这是一个对比 (见图 3-7)，上下两个导 有 margin 和 padding，前者无 width 设 ，完全 助流特性，后者 度 width:100%。结果，后者的 出了外部的容器，完全就不像“水流” 那样完全利用容器 间， 所 的“流动性 ”。 

“无宽度”这条准则，少了代码，少了计算，少了维 ，何乐而不为


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

content 内容生成技术是非常强大的 

* { box-sizing: border-box; }

我们给内 加个背景 或者边 ，自然就可以看到其 间确实 padding 影 了。 

a + a:before {
       content: "";

       font-size: 0;
       padding: 10px 3px 1px;
       margin-left: 6px;

border-left: 1px solid gray;

}

.icon-menu {
  1. display: inline-block;
  2. width: 140px;
  3. height: 10px;
  4. padding: 35px 0;
  5. border-top: 10px solid;
  6. border-bottom: 10px solid;
  7. background-color: currentColor;
  8. background-clip: content-box;
}


float 都有哪些有意思的特性呢?具体如下:

•  包裹性
• 块状化并格式化上下文

 • 破 坏文档流

• 没有任何 margin 并合 

那什么时候会触发 BFC 呢?常见的情 如下:

  • <html>根

  • float 的值不为 none

  • overflow 的值为 auto、scroll 或 hidden

  • display 的值为 table-cell、table-caption 和 inline-block 中的任何一个

  • position 的值不为 relative 和 static。 换言之，只要 符 上面任意一个条件，就无须使用 clear:both 属性去清 浮动的

    影 了。因此，不要见到一个<div> 就加个类似.clearfix 的类 ，否则只能 的 CSS 基本 。 



随着 CSS3 新世界的到来，z-index 已经并非只对定位 有效，flex 子的子 也可以设 z-index 属性 





未完待续    


avatar
文章
阅读
粉丝