前端复习总结（2）

常见的页面布局

静态布局
流式布局
弹性布局
响应式布局

响应式布局

css3媒体查询是响应式方案的核心
响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容

animation和transition

transition是过渡属性，强调过渡，他的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。

animation是动画属性，他的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。他也类似于flash的补间动画，但是他可以设置多个关键帧（用@keyframe定义）完成动画。

display哪些取值

inline：默认值
none：此元素不会被显示，并且不占据页面空间
block
inline-block
flex
table
list-item：列表元素
。。。。

相邻的两个inline-block节点出现间隔的原因以及解决方法

回车换行被转换成一个空白符，空白符占据一定宽度
解决办法：
方法1：给父级元素设置font-size： 0；子元素设置相应的font-size
方法2：改变书写方式
方法3：margin负值

与img下方3px空白一样，改成diplay：block就好了

移动设备忽略将页面中的数字识别为电话号码的方法

meta标签更常见的是这种name + content的形式：

<meta name="format-detection" content="telephone=no" />

name属性的值告诉浏览器，这个meta标签设置的是format-detection（格式检测），其具体值是content中的telephone=no，即忽略将数字识别成电话号码。

meta viewport移动端适配

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

1像素边框问题

移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。
解决办法就写一种吧，其他的记不住也优缺点，这种比较灵活
transform: scale(0.5) 方案

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

rem布局优缺点

rem(font size of the root element)是指相对于根元素的字体大小的单位
这里不太好说，有繁琐的问题，也有显示的问题，但是可以根据根元素设置的字体大小，进行调整，也挺好的。。。

画三角形

.box{
width: 0px;
height: 0px;
margin: 100px auto;
border-style: solid;
border-width: 100px;
border-color:#000000 transparent transparent transparent ;
}

主要是设置盒子宽高为0，然后通过border来实现