《CSS 世界》读书笔记

2018-10-08  本文已影响0人  Xinxing_Li

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

第4章 深入理解 content

4.1 content - 替换元素

  1. 替换元素是指内容可以被替换。如：<img>,<object>,<video>,<iframe>,表单元素。所有替换元素都是内联水平元素。
  2. 替换元素特点
  • 外观不受css控制，如无法改变单选复选的样式
  • 有默认的尺寸，大多为300px*150px，img为0，表单元素根据浏览器本身
  • css属性有自身的一套规则，替换元素的基线为元素下边缘，非替换元素是字符x的下边缘
  • 没有::after和::before
  1. <input type="button">和<button>区别在于前者的white-space是pre后者是normal，内容足够多时<button>自动换行。
  2. 无法改变替换元素内容的固有尺寸。
<div class="div"></div> 
<!--这个 div 的图片大小不会变-->
<style>
div:before {    
  content: url(1.jpg);    
  display: block;    
  width: 200px; 
  height: 200px;}
</style>
  1. 替换元素img没有src时，火狐浏览器下就是一个内联标签，而谷歌浏览器要有一个不为空的alt值，IE则有一个默认的占位符。
  2. 谷歌浏览器下所有元素都支持content，但其他浏览器只有::after和::before支持。
  3. content属性生成的对象叫匿名替换元素，有如下特点
  • content生成的文本不能复制和选中
  • 能左右:empty元素，即使用content生成了文字，但依然当做空
  • content动态生成值无法获取
  1. 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的百分比值

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

.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

第5章 内联元素与流

5.2 内联元素的基石 line-height

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

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

5.3 line-height 的好朋友 vertical-align

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

为什么 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

6.2 float 的天然克星 clear

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

6.3 BFC

6.4 overflow

6.5 position:absolute

6.6 absolute 的流体特性

6.9 大哥position: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 的排序
这里其实.container的z-index:-1设为多少都是一样的效果, 但是如果把.container的z-index:-1去掉, .container就 不再是层级上下文了, 表现为:
对应顶图中 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 文本控制

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

属性 换行 空格和制表符 文本环绕
normal 合并 合并 环绕
nowrap 合并 合并 不环绕
pre 保留 保留 不环绕
pre-wrap (可用来显示代码片段) 保留 保留 环绕
pre-line 保留 合并 环绕

9 元素的装饰和美化

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

11 cursor

附

宽度类型 对应属性 css3 width:
充分利用可用空间 <div> <p> fit-available
包裹性(收缩到合适) float absolute inline-block table fit-content
收缩到最小 table-cell \
超出容器限制 white-space:nowrap取消环绕 \
上一篇 下一篇

猜你喜欢

热点阅读