1. 1px物理像素实现
在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。
设备像素比dpr = 设备像素 / CSS像素(某一方向上) 可以通过window.devicePixelRatio获取设备的dpr值。一般来说，在桌面的浏览器中，设备像素比（dpr）等于1，一个css像素就是代表的一个物理像素。而在移动端，大多数机型都不是为1，其中iphone的dpr普遍是2和3，那么一个css像素不再是对应一个物理像素，而是2个和3个物理像素。即我们通常在css中设置的width：1px，对应的便是物理像素中的2px。手机机型不同，dpr可能不同。
以iphone5为例，iphone5的CSS像素为320px568px，DPR是2，所以其设备像素为640px1136px
解决方案一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- initial-scale=1.0 缩放比 当为1的时候没用进行任何缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1px物理像素实现(方案一)</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
width: 0.5rem;
height: 0.5rem;
border-bottom: 1px solid #000;
}
</style>
<!-- 像素比 = 物理像素 / css像素 -->
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
window.onload = function () {
//像素比是什么？针对不同屏幕 dpr不一样
var dpr = window.devicePixelRatio;
console.log(dpr);
//缩放比例
var scale = 1 / dpr;
//可视区域的宽度
var width = document.documentElement.clientWidth;
//获取mate标签
var metaNode = document.querySelector('meta[name="viewport"]');
metaNode.setAttribute('content',"width=device-width, initial-scale='+scale+'");
//页面中元素的宽度，高度，比例得反向乘回来
var htmlNode = document.querySelector('html');
htmlNode.style.fontSize = width * dpr + 'px';
}
</script>
</html>
解决方案二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- initial-scale=1.0 缩放比 当为1的时候没用进行任何缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1px物理像素实现(方案二)</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
position: relative;
}
#box:before {
content:'';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #000;
}
@media screen and (-webkit-min-device-pixel-ratio:2) {
#box:before {
transform: scaleY(0.5);
}
}
@media screen and (-webkit-min-device-pixel-ratio:3) {
#box:before {
transform: scaleY(0.333333);
}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
window.onload = function () {
}
</script>
</html>
2. 元素水平居中的方法
方法一
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100px;
height: 100px;
background:grey;
position: relative;
}
#wrap .box {
width: 50px;
height: 50px;
background:pink;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
方法二
<style type="text/css">
#wrap {
width: 100px;
height: 100px;
background:grey;
position: relative;
}
#wrap .box {
width: 50px;
height: 50px;
background:pink;
position: absolute;
top:50%;
left: 50%;
margin-left:-25px;
margin-top:-25px;
}
</style>
方法三（css3）
<style type="text/css">
#wrap {
width: 100px;
height: 100px;
background:grey;
position: relative;
}
#wrap .box {
width: 50px;
height: 50px;
background:pink;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50% , -50%);
}
</style>
方法四（flex新版本）
<style type="text/css">
#wrap {
width: 100px;
height: 100px;
background:grey;
display: flex;
justify-content: center;
align-items: center;
}
#wrap .box {
width: 50px;
height: 50px;
background:pink;
}
</style>
方法五（flex老版本）
<style type="text/css">
#wrap {
width: 100px;
height: 100px;
background:grey;
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align: center;
}
#wrap .box {
width: 50px;
height: 50px;
background:pink;
}
</style>
总结
水平居中
- 行内元素：text-align: center;
- 块级元素：margin: 0 auto;
- position: absolute; left: 50%; transform: translateX(-50%);
- display: flex; justify-content: center;
垂直居中
- 设置line-height: height;
- position: absoulte; top: 50%; transform: translateY(-50%);
- display: flex; align-items: center;
- display: table; display: table-cell; vertical-align: middle;
3. 如何实现移动端rem适配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>rem适配</title>
<style type="text/css">
#wrap {
width: 0.5rem;
height: 0.5rem;
background:grey;
}
/* html 根元素字体大小设置屏幕区域的宽度 */
</style>
</head>
<body>
<div id="wrap">
<div class="box"></div>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
//获取屏幕区域的宽度
var width = document.documentElement.clientWidth;
//获取html
var htmlNode = document.querySelector('html');
//设置字体大小
htmlNode.style.fontSize = width + 'px';
}
</script>
</html>
4. css实现两栏布局，左侧固定宽，右侧自适应的7中方法
5.说说css的选择器以及这些选择器的优先级？
- ！important
- 内联选择器(1000)
- ID选择器(0100)
- 类选择器/属性选择器/伪类选择器(0010)
- 元素选择器/关系选择器/伪元素选择器(0001)
- 通配符选择器(0000)
6. 常见的css布局
7. 画一个三角型
html:
<div class="demo"></div>
css:
.demo {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099cc transparent transparent;
transform: rotate(90deg); //顺时针旋转90
}
8. 浮动的几种方式
1. 父级div定义height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
2. 父级div定义overflow: hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
3. 结尾处加空div标签 clear: both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
9. 实现一个宽高 2：1 的div
.div {
width: 100%;
padding-bottom: 50%;
}
