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