实践模仿拼多多官网小结

px,em,rem

基础知识

来自W3C

单位	描述
%	百分比
in	英寸
cm	厘米
mm	毫米
em	1em 等于当前的字体尺寸。
ex	一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt	磅 (1 pt 等于 1/72 英寸)
pc	12 点活字 (1 pc 等于 12 点)
px	像素 (计算机屏幕上的一个点)

em

电脑都是关于像素的，在1996年在CSS1中引入em长度时,主要目的是引入一种相对于给定上下文的字体大小的单位。规范中说到：

相对单位em和ex是相对于元素本身的字体大小的。在CSS1中唯一的例外是font-size属性,它的em和ex值指的是父元素的字体大小。

在开始的时候em是一个对CSS很好的增加，它允许建立一个对你的内容敏感的设计。你可以相对于父元素来设置子元素的文本大小，或者做一些事情像用em来指定你的内边距来确保在你的文本容器中有一个比你的字间距更大的内边距。(符合邻近的视觉规律)

另一个用例，是em变得非常受欢迎的主要原因，就是可访问性原因。它的相对于DOM的根节点的性质(接下来下面将提到其约束)使它完美的根据用户偏好调整你整个设计的尺寸。浏览器支持改变默认的字体大小从而改变你整个网站中em的计算结果。

但是em有一个相当大的缺点。像在规范中列出的，它是继承的，如果你有多个嵌套的元素重载em的字体大小，每次你想计算DOM中深层的节点的字体大小的时候，你都需要经过很多数学运算。

<div class="level-1"> 
    <div class="level-2"> 
        <div class="level-3">
             <p>Hello!p> 
        div>
    div>
div>
<style>
html { 
font-size: 20px;
}
.level-1, .level-2 {
font-size:0.5em; 
} 
.level-3 {
 font-size: 2em; 
}
 style>

你觉得“Hello”文本的字体大小是多少呢？因为em的值随着DOM的级联和嵌套变化，所以真的很难跟踪发生了什么。在这个例子中,文本的字体大小是10px,因为html元素最初的20px在乘以2之前乘了两次0.5。

rem

REM,相对单位的超级英雄 ！
最后，用CSS3解决上面的问题。REM表示“Root EM”,字面上指的是根元素的em大小。在Web文档的上下文中，根元素就是你的html元素。

实例

拼多多官网只使用了px、%和rem，设置html{font-size:100px}大量使用rem，用媒体查询控制html{font-size:}的大小来保证浏览效果。大量使用%保证自适应效果，通过max-width：px,max-height: px保证在低版本浏览器的显示效果，在边框和边框周边处用px保证视觉效果。

position

基础知识

定义和用法

position 属性规定元素的定位类型。

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
默认值： static
继承性： no
版本： CSS2
JavaScript 语法： object.style.position=”absolute”

可能的值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

实例

head区域

这是拼多多的head区域，他的布局实际上如下

最外层是一个position:fixed;width:100%;height:1.03rem;top:0;width:0的容器1，黑框框起来是一个position:relative;margin:0 auto的水平居中的在容器1内的容器2，在容器2内，左边的拼多多是一个margin:.21rem 0;width:15%;height:auto;float:left的img,右边红框框起来的部分是一个position:absolute;float:right;top:50%；margin-top:-0.15rem的列表。
注意到这里拼多多图片的上下外边距设置撑大了父元素的大小，margin值的设置直接影响到右边设置top:50%的列表的定位。

标记区域

这里只谈17：00开抢部分的布局

黑框内是一个position:absolute;top:50%;margin-top:-0.04rem的容器，白框内是一个position:relative；top:40%;margin-top:-0.16rem的容器，这里使用relative的position起到了在布局流中占位置的作用。可以看出拼多多官网大量的垂直居中使用top定位加上上外边距的设置实现的。

广告区域

这是拼多多官网的广告区域。他的布局如下

黑框外是一个position:fixed;width:100%;opacity:0.65;background:black;z-index:6的容器1，黑框内是z-index:7;position:fixed的与容器1平级的容器2，容器2内，有一个width:12rem的img，红框内是一个height:.34rem;width:34rem;position: absolute; right: .03rem;top:.03rem;的容器3，容器3定位在红框处，绑定点击事件。

清除浮动

基础知识

当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
方法一：使用带clear属性的空元素
方法二：使用CSS的overflow属性
方法三：给浮动的元素的容器添加浮动
方法四：使用邻接元素处理
方法五：使用CSS的:after伪元素

实例

这里div直接设定了高度，不过下面的边线是直接加了一个容器添加的。

这里div用到了overflow:hidden清除浮动

这里左边的精选专题没有设置float:left，从而并没有发生浮动溢出的现象。

图形绘制

基础知识

after和before

before 和 after 顾名思义 其就是附着在元素前后的 伪元素，说他是伪元素的意思就是，元素不是在DOM中生成的，而是在浏览器渲染引擎渲染CSS的时候画上去的，所以你在浏览器查看元素上是看不到伪元素的HTML结果的。
还有一点与大家想象的不同的是 ，before和after 和父元素在一个线性空间内的，而是另一层元素盖在父元素上的。

在伪元素的样式上，可以使用content属性去指定 元素的内容。如果设置为 ” 或是 None，那我们是看不到该元素的。默认去情况下伪元素是行内显示的，想让它呈现出不同的效果的话，就需要设置它为块显示。

实例

这里黑框的样式如下：

 .btn {
    width: .03rem;
    height: .03rem;
    position: absolute;
    top: 50%;
    margin-top: -.04rem;
    background-color: #fcf465;
    border-radius: 50%;
    border: .02rem solid #fcf465;
}

更多右边的符号并不是大于号，而是用了::after和::before的两个三角形通过绝对定位叠加成的，将::after的边框颜色改为蓝色，::before的边框颜色改为黑色可以看的更明显一些，我们注意到这里是::after盖住::before。

滚动条设置

基础知识

滚动条组成

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

实例

实现代码如下：

.content::-webkit-scrollbar-track
{
   background-image: repeating-linear-gradient(90deg,transparent,transparent 1%,rgba(0,0,0,.1) 0,rgba(0,0,0,.1) 99%,transparent 0,transparent);
}

.content::-webkit-scrollbar
{
    height:10px;
    opacity:0;
}
.content::-webkit-scrollbar-button:start
{
        width:10px;
    height:5px;
    border-top:5px solid transparent;
    border-right:10px solid #ffe662;
    border-bottom:5px solid transparent;


}
.content::-webkit-scrollbar-button:end
{
    width:10px;
    height:5px;
    border-top:5px solid transparent;
    border-left:10px solid #ffe662;
    border-bottom:5px solid transparent;


}
.content::-webkit-scrollbar-thumb
{
   background-image: repeating-linear-gradient(90deg,transparent,transparent 2%,
    #ffe662 0,#ffe662 98%,transparent 0,transparent);
}

这个效果在IE是不显示的

用到的css3知识

rem
opacity
伪类
媒体查询
参考资料：
https://www.pinduoduo.com/index.html?utm_source=baidubz&utm_medium=BrandZ&utm_term=&utm_campaign=search&utm_content=logolink
https://www.w3cplus.com/css/r-i-p-rem-viva-css-reference-pixel.html
https://www.cnblogs.com/ForEvErNoME/p/3383539.html
http://www.jianshu.com/p/ef6b7051cfb6
http://blog.csdn.net/hanshileiai/article/details/40398177