<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索框</title>
<link rel="stylesheet" href="../../base.css">
</head>
<body>
<style>
.search1 {
margin: 60px auto;
width: 500px;
height: 40px;
/* 父盒子设定边框作为搜索框 ，让里面两个子盒子浮动摆放*/
border: 2px solid #d2a95e;
/* 给父元素添加同边框一样的背景色填充，就可以消除缩放出现白边的现象，设置不同颜色缩放可以看到区别 */
/* background-color: #2207b6; */
}
.search1 input {
/* top: 0; */
/* left: 0; */
/* 如果单纯只用左（右）浮动、定位摆放子盒子，缩放的时候，子盒子之间、子盒子和父盒子之间，只要元素之间有尺寸有衔接，在某个缩放比例都会出现缝隙 ，而且浮动摆放有的缩放比例还会掉下来，定位因为可以层叠则不会掉下来*/
/* 给父元素添加同边框一样的背景色填充，就可以消除缩放出现白边的现象，设置不同颜色缩放可以看到区别 */
/* 用translate绝对居中后，缩放也会出现缝隙，且缝隙被上下均分了 */
/* top: 50%; */
/* transform: translateY(-50%); */
/* 父元素的边框限制减少2px */
width: 398px;
height: 36px;
/* 用父盒子设定搜索边框，子盒子就不要边框 */
border: 0;
/* 如果给input设定了边框，那么缩放后input和button之间也会看到白线 */
/* border: 2px solid #d2a95e; */
padding-left: 10px;
}
.search1 button {
/* 给父元素添加同边框一样的背景色填充，就可以消除缩放出现白边的现象 */
/* top: 0; */
/* right: 0; */
/* 用translate绝对居中后，缩放也会出现缝隙，且缝隙被上下均分了 */
/* top: 50%; */
/* transform: translateY(-50%); */
/* 父元素的边框限制减少2px */
width: 98px;
height: 36px;
color: rgb(219, 33, 33);
font-size: 12px;
background-color: #d2a95e;
border: 0;
}
</style>
<div class="search1 por">
<input type="search" name="" id="" placeholder="父盒子设边框，子盒子浮动去边框" class="fl">
<!-- 用浮动，如果缩放页面，按钮会和父盒子边框产生缝隙 -->
<button class="fl">要计算父盒子边框内容宽、高，子盒子总宽、高要刚合适</button>
</div>
<style>
.search2 {
margin: 60px auto;
width: 500px;
height: 40px;
/* 父盒子设定边框作为搜索框 ，让里面两个子盒子浮动摆放*/
/* border: 2px solid #d2a95e; */
/* 给父元素添加同边框一样的背景色填充，就可以消除缩放出现白边的现象，设置不同颜色缩放可以看到区别 */
/* 给父元素不设置边框，只设置背景色，利用背景色充当边框，让子盒子上下绝对居中 */
background-color: #2207b6;
}
.search2 input {
/* top: 0; */
/* left: 0; */
/* 如果单纯只用左（右）浮动、定位摆放子盒子，缩放的时候，子盒子之间、子盒子和父盒子之间，只要元素之间有尺寸有衔接，在某个缩放比例都会出现缝隙 ，而且浮动摆放有的缩放比例还会掉下来，定位因为可以层叠则不会掉下来*/
/* 给父元素添加同边框一样的背景色填充，就可以消除缩放出现白边的现象，设置不同颜色缩放可以看到区别 */
/* 用translate绝对居中后，缩放也会出现缝隙，且缝隙被上下均分了 */
/* 给父元素不设置边框，只设置背景色，利用背景色充当边框，让子盒子上下绝对居中 */
top: 50%;
transform: translateY(-50%);
/* 左边要定位出边框的距离 */
left: 2px;
width: 398px;
height: 36px;
/* 用父盒子设定搜索边框，子盒子就不要边框 */
/* border: 0; */
/* 如果给input设定了边框，那么缩放后input和button之间也会看到白线 */
/* border: 2px solid #d2a95e; */
padding-left: 10px;
}
.search2 button {
/* 给父元素添加同边框一样的背景色填充，就可以消除缩放出现白边的现象 */
/* top: 0; */
right: 0;
/* 用translate绝对居中后，缩放也会出现缝隙，且缝隙被上下均分了 */
/* 给父元素不设置边框，只设置背景色，利用背景色充当边框，让子盒子上下绝对居中 */
top: 50%;
transform: translateY(-50%);
/* 没了父元素的边框限制，子盒子把边框的宽度加在自己身上 */
width: 100px;
height: 40px;
color: rgb(192, 18, 18);
font-size: 12px;
background-color: #d2a95e;
border: 0;
}
</style>
<div class="search2 por">
<input type="search" name="" id="" placeholder="父盒子设背景当边框，子盒子定位去边框" class="poa">
<button class="poa">要计算父盒子边框空余宽、高，子盒子总宽度能多不能少，子盒子高度能少不能多</button>
</div>
<style>
.search3 {
margin: 60px auto;
width: 500px;
height: 40px;
/* 父盒子设定边框作为搜索框 ，让里面两个子盒子浮动摆放*/
/* border: 2px solid #d2a95e; */
/* 给父元素添加同边框一样的背景色填充，就可以消除缩放出现白边的现象，设置不同颜色缩放可以看到区别 */
/* 给父元素不设置边框，只设置背景色，利用背景色充当边框，让子盒子上下绝对居中 */
/* background-color: #2207b6; */
}
.search3 input {
/* top: 0; */
/* left: 0; */
/* 如果单纯只用左（右）浮动、定位摆放子盒子，缩放的时候，子盒子之间、子盒子和父盒子之间，只要元素之间有尺寸有衔接，在某个缩放比例都会出现缝隙 ，而且浮动摆放有的缩放比例还会掉下来，定位因为可以层叠则不会掉下来 */
/* 给父元素添加同边框一样的背景色填充，就可以消除缩放出现白边的现象，设置不同颜色缩放可以看到区别 */
/* 用translate绝对居中后，缩放也会出现缝隙，且缝隙被上下均分了 */
/* 给父元素不设置边框，只设置背景色，利用背景色充当边框，让子盒子上下绝对居中 */
/* top: 50%; */
/* transform: translateY(-50%); */
/* 左边要定位出边框的距离 */
/* left: 2px; */
width: 400px;
height: 40px;
/* 用父盒子设定搜索边框，子盒子就不要边框 */
/* border: 0; */
/* 如果给input设定了边框，那么缩放后input和button之间也会看到白线 */
/* 不要父元素背景，直接给子盒子设定边框、浮动 */
border: 2px solid #d2a95e;
padding-left: 10px;
}
.search3 button {
/* 给父元素添加同边框一样的背景色填充，就可以消除缩放出现白边的现象 */
/* top: 0; */
/* right: 0; */
/* 用translate绝对居中后，缩放也会出现缝隙，且缝隙被上下均分了 */
/* 给父元素不设置边框，只设置背景色，利用背景色充当边框，让子盒子上下绝对居中 */
/* top: 50%; */
/* transform: translateY(-50%); */
/* 没了父元素的边框限制，子盒子把边框的宽度加在自己身上 */
width: 100px;
height: 40px;
color: rgb(226, 21, 21);
font-size: 12px;
background-color: #d2a95e;
border: 0;
}
</style>
<div class="search3 por">
<input type="search" name="" id="" placeholder="父盒子透明，子盒子浮动设边框" class="fl">
<button class="fl">子盒子总宽度能少不能多，高度可以误差</button>
</div>
<style>
.search4 {
margin: 60px auto;
width: 500px;
height: 40px;
/* 父盒子设定边框作为搜索框 ，让里面两个子盒子浮动摆放*/
/* border: 2px solid #d2a95e; */
/* 给父元素添加同边框一样的背景色填充，就可以消除缩放出现白边的现象，设置不同颜色缩放可以看到区别 */
/* 给父元素不设置边框，只设置背景色，利用背景色充当边框，让子盒子上下绝对居中 */
/* background-color: #2207b6; */
}
.search4 input {
top: 0;
left: 0;
/* 如果单纯只用左（右）浮动、定位摆放子盒子，缩放的时候，子盒子之间、子盒子和父盒子之间，只要元素之间有尺寸有衔接，在某个缩放比例都会出现缝隙 ，而且浮动摆放有的缩放比例还会掉下来，定位因为可以层叠则不会掉下来 */
/* 给父元素添加同边框一样的背景色填充，就可以消除缩放出现白边的现象，设置不同颜色缩放可以看到区别 */
/* 用translate绝对居中后，缩放也会出现缝隙，且缝隙被上下均分了 */
/* 给父元素不设置边框，只设置背景色，利用背景色充当边框，让子盒子上下绝对居中 */
/* top: 50%; */
/* transform: translateY(-50%); */
/* 左边要定位出边框的距离 */
/* left: 2px; */
width: 400px;
height: 40px;
/* 用父盒子设定搜索边框，子盒子就不要边框 */
/* border: 0; */
/* 如果给input设定了边框，那么缩放后input和button之间也会看到白线 */
/* 不要父元素背景，直接给子盒子设定边框、浮动 */
border: 2px solid #d2a95e;
padding-left: 10px;
}
.search4 button {
/* 给父元素添加同边框一样的背景色填充，就可以消除缩放出现白边的现象 */
top: 0;
right: 0;
/* 用translate绝对居中后，缩放也会出现缝隙，且缝隙被上下均分了 */
/* 给父元素不设置边框，只设置背景色，利用背景色充当边框，让子盒子上下绝对居中 */
/* top: 50%; */
/* transform: translateY(-50%); */
/* 没了父元素的边框限制，子盒子把边框的宽度加在自己身上 */
width: 100px;
height: 40px;
color: rgb(11, 93, 216);
font-size: 12px;
background-color: #d2a95e;
border: 0;
}
</style>
<div class="search4 por">
<input type="search" name="" id="" placeholder="父盒子透明，子盒子定位设边框" class="poa">
<button class="poa">子盒子总宽度能多不能少，高度可以误差</button>
</div>
</body>
</html>
