CSS场景题
实现一个三角形： transparent（透明的）
div{
width:0;
height:0;
border-bottom:50px solid red;
border-right: 50px solid transparent;
border-left:50px solid transparent;
}
实现一个扇形：
div{
border:100px solid transparent;
width:0;
height:0;
border-radius:100px;
border-top-color:red;
}
画一条0.5px的线：
transform： scale(0.5,0.5);
移动端1px的问题：
在一些Retina屏幕的机型上，移动端页面的1px会变得很粗，呈现出不止1px的效果。
解决方法：
对meta标签里面的几个关键属性下手
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
这里针对像素比为2的页面，把整个页面缩放为了原来的二分之一，这样，本来占用两个物理像素的1px样式，现在占用的就是一个物理像素
js代码如下：
const scale = 1 / window.devicePixelRatio;
// 这里 metaEl 指的是 meta 标签对应的 Dom
metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${
scale},maximum-scale=${
scale},minimum-scale=${
scale}`);
这样解决了，但这样做的副作用也很大，整个页面被缩放了。这时 1px 已经被处理成物理像素大小，这样的大小在手机上显示边框很合适。但是，一些原本不需要被缩小的内容，比如文字、图片等，也被无差别缩小掉了。
常见布局：
两栏布局：
两栏布局一般指的高度固定，右边宽度自适应
1.利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动。将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）
2.利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置 overflow: hidden; 这样右边就触发了 BFC，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠
3.利用 flex 布局，将左边元素设置为固定宽度 200px，将右边的元素设置为 flex:1。
九宫格布局：
<body>
<div 
最低0.47元/天 解锁文章
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
