CSS世界学习笔记（一）
“最大宽度”与iScroll水平滚动实例页面
一般来讲，实现自定义滚动有两种原理：一种借助原生的滚动，scrollLeft/scrollTop值变化，它的优点是简单，不足是效果呆板；另一种是根据内部元素的尺寸和容器的关系，通过修改内部元素的位置实现滚动效果，优点是效果可以很绽放。iScroll就是使用的后者，因此，如果我们希望使用iScroll模拟水平滚动，只能是使用“最大宽度”，这样，滚动到底的时候才是真的到底。查看效果点击链接：https://demo.cssworld.cn/3/2-7.php
1 <div id="wrap" class="wrap"> 2 <ul> 3 <li><img src="1.jpg"></li> 4 <li><img src="1.jpg"></li> 5 <li><img src="1.jpg"></li> 6 <li><img src="1.jpg"></li> 7 <li><img src="1.jpg"></li> 8 </ul> 9 </div>
1 .wrap { 2 width: 300px; height: 200px; 3 position: relative; 4 overflow: hidden; 5 } 6 .wrap > ul { 7 position: absolute; 8 white-space: nowrap; 9 } 10 .wrap li { 11 display: inline-block; 12 }
1 new IScroll('#wrap', { 2 scrollbars: true, 3 scrollX: true, 4 scrollY: false 5 });
<textarea>宽度100%自适应效果实例页面
在CSS世界中，唯一离不开box-sizing: border-box的就是原生普通文本框〈input〉和文本域＜textarea＞的100%自适应父容器宽度。拿文本域＜textarea＞举例，＜textarea＞为替换元素，替换元素的特性之一就是尺寸由内部元素决定，且无论其display属性值是inline还是block。这个特性很有意思，对于非替换元素，如果其display属性值为block，则会具有流动性，宽度由外部尺寸决定，但是替换元素的宽度却不受display水平影响，因此，我们通过CSS修改＜textarea＞的display水平是无法让尺寸100%自适应父容器的：
1 textarea { 2 display: block; /*还是原来的尺寸*/ 3 }
所以，我们只能通过width设定让＜textarea＞尺寸100%自适应父容器。那么，问题就来了，＜textarea＞是有border的，而且需要有一定的padding大小， 否则输入的时候光标会顶着边框，体验很不好。于是，width/border和padding注定要共存，同时还要整体宽度100%自适应容器。如果不借助其他标签，肯定是无解的。在浏览器还没支持box-sizing的年代，我们的做法有点儿类似于“宽度分离”，外面嵌套＜div＞标签，模拟border和padding, ＜textarea＞作为子元素，border和padding全部为0,然后宽度100%自适应父级<div>。查看效果点击链接：https://demo.cssworld.cn/3/2-9.php
然而，这种模拟也有局限性，比如无法使用：focus高亮父级的边框，因为CSS世界中并无父选择翳，只能使用更复杂的嵌套加其他CSS技巧来模拟。因此，说来说去，也就box-sizing：border-box才是根本解决之道！
1 textarea { 2 width: 100%; 3 -ms-box-sizing: border-box; /* for IE8 */ 4 box-sizing : border-box; 5 )
在我看来，box-sizing被发明出来最大的初哀应该是解决替换元素宽度自适应问题。如果真的如作者所言，那box-sizing: border-box;是不是没用在点儿上呢？是不是应该像下面这样CSS重置才更合理呢？
1 input, textarea, img, video, object { 2 box-sizing : border-box; 3 }
替换元素的固有尺寸是无法设置的，如今在移动端retina屏幕几乎是标配，为了图片显示细腻，往往真实图片尺寸是显示图片尺寸的两倍。于是问题就来了，使用content生成图片，我们是无法设置图片的尺寸的，只能迫不得已使用一倍图，然后导致图片看上去有点儿模糊。
CSS 的有趣之处在于我们可以利用其特性表现实现其设计初衷以外的一些效果。例 如，这里有个简单的例子，利用内联元素的 padding 实现高度可控的分隔线。传统偷懒的实现方式可能是直接使用“管道符”，如：
但是使用“管道符”的话，因为是字符，所以高度不可控。如果对视觉呈现要求比较高，就需 要进行 CSS 图形模拟，其中方法之一就是可以借助内联元素和 padding 属性来实现，CSS 和 HTML 代码如下：
1 a + a:before { 2 content: ""; 3 font-size: 0; 4 padding: 10px 3px 1px; 5 margin-left: 6px; 6 border-left: 1px solid gray; 7 } 8 <a href="">登录</a><a href="">注册</a>
百分比padding值与等比例头图效果实例页面
网页开发的时候经常会有横贯整个屏幕的头图效果，我们通常的做法是定高，如 200 像素高， 屏幕小的时候图片两侧内容隐藏。然而，这种实现有一个问题，就是类似笔记本这样的小屏幕， 头图高度过高会导致下面主体内容可能一屏都实现不了，但是，如果我们使用 padding 进行等 比例控制，则小屏幕下头图高度天然等比例缩小，没有任何 JavaScript，却依然适配良好！例如：
1 <div class="box"> 2 <img src="cover.jpg"> 3 </div> 4 .box { 5 padding: 10% 50%; 6 position: relative; 7 } 8 .box > img { 9 position: absolute; 10 width: 100%; height: 100%; 11 left: 0; top: 0; 12 }
就实现了一个宽高比为 5:1 的比例固定的头图效果，上述方法包括 IE6 在内的浏览器都兼容。查看效果点击链接：https://demo.cssworld.cn/4/2-3.php 改变浏览器宽度即 可感受到等比例的变化。
