1、高度已知，三栏布局，左右宽度 200，中间自适应，如何实现？
<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、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？
<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 绝对定位。
优点：兼容性好，适用于单边或多边边框。
缺点：需要额外使用伪元素，代码稍复杂。<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>
