1、高度已知，三栏布局，左右宽度 200，中间自适应，如何实现？
html"> <body><div class="box"><div class="box1">高度已知</div><div class="box2">左右宽度 200，中间自适应</div><div class="box3">三栏布局</div></div></body><style>.box {display: flex;background-color: #ccc;height: 200px;}.box2 {flex: auto;}.box1,.box3 {width: 200px;}</style>2、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？
html"> <body> <div class="box"><div class="box1"></div><div class="box2"></div></div></body><style>* {margin: 0;}.box {background-color: #ccc;}.box1,.box2 {height: 200px;width: 200px;margin: 20px;}.box1 {background-color: red;}.box2 {background-color: blue;}</style>外边距合并的场景
1、相邻兄弟元素：两个相邻的兄弟元素之间的上下外边距会合并。
2、父元素与第一个/最后一个子元素：父元素的上外边距与第一个子元素的上外边距，或父元素的下外边距与最后一个子元素的下外边距会合并。
3、空块级元素：如果一个块级元素没有内容、内边距、边框，其上下外边距会合并。
外边距合并的规则
1、取较大值：合并后的外边距取两个外边距中的较大值。
2、一正一负：如果一个外边距为正，另一个为负，合并后的外边距为两者之和。
3、同为负值：如果两个外边距都为负，合并后的外边距取绝对值较大的那个。
不让相邻元素外边距合并
1、添加边框或内边距：为父元素添加边框或内边距可以阻止外边距合并。
.parent {
padding: 1px; /* 或 border: 1px solid transparent; */
}
2、使用浮动或定位：浮动元素或绝对定位元素的外边距不会合并。
.child {
float: left; /* 或 position: absolute; */
}
3、使用overflow属性：将父元素的overflow设置为auto、hidden或scroll。
.parent {
overflow: hidden;
}
4、使用display: flex或display: grid：将父元素的display设置为flex或grid。
.parent {
display: flex;
}
5、使用::before或::after伪元素：在父元素中添加伪元素。
.parent::before {
content: '';
display: table;
}
3、移动端 1px 实现方案
在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素。
1、使用 transform: scale() 缩放
把原先元素的 border去掉，利用伪元素实现 border ，并将 transform 的 scale
缩小一半，原先的元素相对定位，新的 border 绝对定位。
优点：兼容性好，适用于单边或多边边框。
缺点：需要额外使用伪元素，代码稍复杂。html"><body><div class="border-1px">1</div><div class="border-2px">2</div><div class="border-3px">3</div><div class="border-4px">4</div><div class="scale-1px">5</div></body><style>.border-1px {position: relative;}.border-1px::after {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background-color: #000;transform: scaleY(0.5); /* 缩放为原来的一半 */transform-origin: 0 0;}.border-2px {padding-top: 10px;border-bottom: 0.5px solid #000;}.border-3px {padding-top: 10px;border-bottom: 1px solid #000;}.border-4px {margin-top: 10px;height: 1px;background-color: #000;transform: scaleY(0.5); /* 会将盒子整体都缩放 */}.scale-1px {position: relative;margin-bottom: 20px;border: none;}.scale-1px:after {content: "";position: absolute;top: 0;left: 0;border: 1px solid #000; -webkit-box-sizing: border-box;box-sizing: border-box;width: 200%;height: 200%;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: left top;transform-origin: left top;}</style>
