<!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;
? ? ? ? ? ? /* 父盒子設(shè)定邊框作為搜索框 ，讓里面兩個(gè)子盒子浮動(dòng)擺放*/
? ? ? ? ? ? border: 2px solid #d2a95e;
? ? ? ? ? ? /* 給父元素添加同邊框一樣的背景色填充，就可以消除縮放出現(xiàn)白邊的現(xiàn)象，設(shè)置不同顏色縮放可以看到區(qū)別 */
? ? ? ? ? ? /* background-color: #2207b6; */
? ? ? ? }
? ? ? ? .search1 input {
? ? ? ? ? ? /* top: 0; */
? ? ? ? ? ? /* left: 0; */
? ? ? ? ? ? /* 如果單純只用左（右）浮動(dòng)、定位擺放子盒子，縮放的時(shí)候，子盒子之間、子盒子和父盒子之間，只要元素之間有尺寸有銜接，在某個(gè)縮放比例都會(huì)出現(xiàn)縫隙 ，而且浮動(dòng)擺放有的縮放比例還會(huì)掉下來(lái)，定位因?yàn)榭梢詫盈B則不會(huì)掉下來(lái)*/
? ? ? ? ? ? /* 給父元素添加同邊框一樣的背景色填充，就可以消除縮放出現(xiàn)白邊的現(xiàn)象，設(shè)置不同顏色縮放可以看到區(qū)別 */
? ? ? ? ? ? /* 用translate絕對(duì)居中后，縮放也會(huì)出現(xiàn)縫隙，且縫隙被上下均分了 */
? ? ? ? ? ? /* top: 50%; */
? ? ? ? ? ? /* transform: translateY(-50%); */
? ? ? ? ? ? /* 父元素的邊框限制減少2px */
? ? ? ? ? ? width: 398px;
? ? ? ? ? ? height: 36px;
? ? ? ? ? ? /* 用父盒子設(shè)定搜索邊框，子盒子就不要邊框 */
? ? ? ? ? ? border: 0;
? ? ? ? ? ? /* 如果給input設(shè)定了邊框，那么縮放后input和button之間也會(huì)看到白線 */
? ? ? ? ? ? /* border: 2px solid #d2a95e; */
? ? ? ? ? ? padding-left: 10px;
? ? ? ? }
? ? ? ? .search1 button {
? ? ? ? ? ? /* 給父元素添加同邊框一樣的背景色填充，就可以消除縮放出現(xiàn)白邊的現(xiàn)象 */
? ? ? ? ? ? /* top: 0; */
? ? ? ? ? ? /* right: 0; */
? ? ? ? ? ? /* 用translate絕對(duì)居中后，縮放也會(huì)出現(xiàn)縫隙，且縫隙被上下均分了 */
? ? ? ? ? ? /* 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="父盒子設(shè)邊框，子盒子浮動(dòng)去邊框" class="fl">
? ? ? ? <!-- 用浮動(dòng)，如果縮放頁(yè)面，按鈕會(huì)和父盒子邊框產(chǎn)生縫隙 -->
? ? ? ? <button class="fl">要計(jì)算父盒子邊框內(nèi)容寬、高，子盒子總寬、高要?jiǎng)偤线m</button>
? ? </div>
? ? <style>
? ? ? ? .search2 {
? ? ? ? ? ? margin: 60px auto;
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? /* 父盒子設(shè)定邊框作為搜索框 ，讓里面兩個(gè)子盒子浮動(dòng)擺放*/
? ? ? ? ? ? /* border: 2px solid #d2a95e; */
? ? ? ? ? ? /* 給父元素添加同邊框一樣的背景色填充，就可以消除縮放出現(xiàn)白邊的現(xiàn)象，設(shè)置不同顏色縮放可以看到區(qū)別 */
? ? ? ? ? ? /* 給父元素不設(shè)置邊框，只設(shè)置背景色，利用背景色充當(dāng)邊框，讓子盒子上下絕對(duì)居中 */
? ? ? ? ? ? background-color: #2207b6;
? ? ? ? }
? ? ? ? .search2 input {
? ? ? ? ? ? /* top: 0; */
? ? ? ? ? ? /* left: 0; */
? ? ? ? ? ? /* 如果單純只用左（右）浮動(dòng)、定位擺放子盒子，縮放的時(shí)候，子盒子之間、子盒子和父盒子之間，只要元素之間有尺寸有銜接，在某個(gè)縮放比例都會(huì)出現(xiàn)縫隙 ，而且浮動(dòng)擺放有的縮放比例還會(huì)掉下來(lái)，定位因?yàn)榭梢詫盈B則不會(huì)掉下來(lái)*/
? ? ? ? ? ? /* 給父元素添加同邊框一樣的背景色填充，就可以消除縮放出現(xiàn)白邊的現(xiàn)象，設(shè)置不同顏色縮放可以看到區(qū)別 */
? ? ? ? ? ? /* 用translate絕對(duì)居中后，縮放也會(huì)出現(xiàn)縫隙，且縫隙被上下均分了 */
? ? ? ? ? ? /* 給父元素不設(shè)置邊框，只設(shè)置背景色，利用背景色充當(dāng)邊框，讓子盒子上下絕對(duì)居中 */
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? transform: translateY(-50%);
? ? ? ? ? ? /* 左邊要定位出邊框的距離 */
? ? ? ? ? ? left: 2px;
? ? ? ? ? ? width: 398px;
? ? ? ? ? ? height: 36px;
? ? ? ? ? ? /* 用父盒子設(shè)定搜索邊框，子盒子就不要邊框 */
? ? ? ? ? ? /* border: 0; */
? ? ? ? ? ? /* 如果給input設(shè)定了邊框，那么縮放后input和button之間也會(huì)看到白線 */
? ? ? ? ? ? /* border: 2px solid #d2a95e; */
? ? ? ? ? ? padding-left: 10px;
? ? ? ? }
? ? ? ? .search2 button {
? ? ? ? ? ? /* 給父元素添加同邊框一樣的背景色填充，就可以消除縮放出現(xiàn)白邊的現(xiàn)象 */
? ? ? ? ? ? /* top: 0; */
? ? ? ? ? ? right: 0;
? ? ? ? ? ? /* 用translate絕對(duì)居中后，縮放也會(huì)出現(xiàn)縫隙，且縫隙被上下均分了 */
? ? ? ? ? ? /* 給父元素不設(shè)置邊框，只設(shè)置背景色，利用背景色充當(dāng)邊框，讓子盒子上下絕對(duì)居中 */
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? transform: translateY(-50%);
? ? ? ? ? ? /* 沒(méi)了父元素的邊框限制，子盒子把邊框的寬度加在自己身上 */
? ? ? ? ? ? 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="父盒子設(shè)背景當(dāng)邊框，子盒子定位去邊框" class="poa">
? ? ? ? <button class="poa">要計(jì)算父盒子邊框空余寬、高，子盒子總寬度能多不能少，子盒子高度能少不能多</button>
? ? </div>
? ? <style>
? ? ? ? .search3 {
? ? ? ? ? ? margin: 60px auto;
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? /* 父盒子設(shè)定邊框作為搜索框 ，讓里面兩個(gè)子盒子浮動(dòng)擺放*/
? ? ? ? ? ? /* border: 2px solid #d2a95e; */
? ? ? ? ? ? /* 給父元素添加同邊框一樣的背景色填充，就可以消除縮放出現(xiàn)白邊的現(xiàn)象，設(shè)置不同顏色縮放可以看到區(qū)別 */
? ? ? ? ? ? /* 給父元素不設(shè)置邊框，只設(shè)置背景色，利用背景色充當(dāng)邊框，讓子盒子上下絕對(duì)居中 */
? ? ? ? ? ? /* background-color: #2207b6; */
? ? ? ? }
? ? ? ? .search3 input {
? ? ? ? ? ? /* top: 0; */
? ? ? ? ? ? /* left: 0; */
? ? ? ? ? ? /* 如果單純只用左（右）浮動(dòng)、定位擺放子盒子，縮放的時(shí)候，子盒子之間、子盒子和父盒子之間，只要元素之間有尺寸有銜接，在某個(gè)縮放比例都會(huì)出現(xiàn)縫隙 ，而且浮動(dòng)擺放有的縮放比例還會(huì)掉下來(lái)，定位因?yàn)榭梢詫盈B則不會(huì)掉下來(lái) */
? ? ? ? ? ? /* 給父元素添加同邊框一樣的背景色填充，就可以消除縮放出現(xiàn)白邊的現(xiàn)象，設(shè)置不同顏色縮放可以看到區(qū)別 */
? ? ? ? ? ? /* 用translate絕對(duì)居中后，縮放也會(huì)出現(xiàn)縫隙，且縫隙被上下均分了 */
? ? ? ? ? ? /* 給父元素不設(shè)置邊框，只設(shè)置背景色，利用背景色充當(dāng)邊框，讓子盒子上下絕對(duì)居中 */
? ? ? ? ? ? /* top: 50%; */
? ? ? ? ? ? /* transform: translateY(-50%); */
? ? ? ? ? ? /* 左邊要定位出邊框的距離 */
? ? ? ? ? ? /* left: 2px; */
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? /* 用父盒子設(shè)定搜索邊框，子盒子就不要邊框 */
? ? ? ? ? ? /* border: 0; */
? ? ? ? ? ? /* 如果給input設(shè)定了邊框，那么縮放后input和button之間也會(huì)看到白線 */
? ? ? ? ? ? /* 不要父元素背景，直接給子盒子設(shè)定邊框、浮動(dòng) */
? ? ? ? ? ? border: 2px solid #d2a95e;
? ? ? ? ? ? padding-left: 10px;
? ? ? ? }
? ? ? ? .search3 button {
? ? ? ? ? ? /* 給父元素添加同邊框一樣的背景色填充，就可以消除縮放出現(xiàn)白邊的現(xiàn)象 */
? ? ? ? ? ? /* top: 0; */
? ? ? ? ? ? /* right: 0; */
? ? ? ? ? ? /* 用translate絕對(duì)居中后，縮放也會(huì)出現(xiàn)縫隙，且縫隙被上下均分了 */
? ? ? ? ? ? /* 給父元素不設(shè)置邊框，只設(shè)置背景色，利用背景色充當(dāng)邊框，讓子盒子上下絕對(duì)居中 */
? ? ? ? ? ? /* top: 50%; */
? ? ? ? ? ? /* transform: translateY(-50%); */
? ? ? ? ? ? /* 沒(méi)了父元素的邊框限制，子盒子把邊框的寬度加在自己身上 */
? ? ? ? ? ? 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="父盒子透明，子盒子浮動(dòng)設(shè)邊框" class="fl">
? ? ? ? <button class="fl">子盒子總寬度能少不能多，高度可以誤差</button>
? ? </div>
? ? <style>
? ? ? ? .search4 {
? ? ? ? ? ? margin: 60px auto;
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? /* 父盒子設(shè)定邊框作為搜索框 ，讓里面兩個(gè)子盒子浮動(dòng)擺放*/
? ? ? ? ? ? /* border: 2px solid #d2a95e; */
? ? ? ? ? ? /* 給父元素添加同邊框一樣的背景色填充，就可以消除縮放出現(xiàn)白邊的現(xiàn)象，設(shè)置不同顏色縮放可以看到區(qū)別 */
? ? ? ? ? ? /* 給父元素不設(shè)置邊框，只設(shè)置背景色，利用背景色充當(dāng)邊框，讓子盒子上下絕對(duì)居中 */
? ? ? ? ? ? /* background-color: #2207b6; */
? ? ? ? }
? ? ? ? .search4 input {
? ? ? ? ? ? top: 0;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? /* 如果單純只用左（右）浮動(dòng)、定位擺放子盒子，縮放的時(shí)候，子盒子之間、子盒子和父盒子之間，只要元素之間有尺寸有銜接，在某個(gè)縮放比例都會(huì)出現(xiàn)縫隙 ，而且浮動(dòng)擺放有的縮放比例還會(huì)掉下來(lái)，定位因?yàn)榭梢詫盈B則不會(huì)掉下來(lái) */
? ? ? ? ? ? /* 給父元素添加同邊框一樣的背景色填充，就可以消除縮放出現(xiàn)白邊的現(xiàn)象，設(shè)置不同顏色縮放可以看到區(qū)別 */
? ? ? ? ? ? /* 用translate絕對(duì)居中后，縮放也會(huì)出現(xiàn)縫隙，且縫隙被上下均分了 */
? ? ? ? ? ? /* 給父元素不設(shè)置邊框，只設(shè)置背景色，利用背景色充當(dāng)邊框，讓子盒子上下絕對(duì)居中 */
? ? ? ? ? ? /* top: 50%; */
? ? ? ? ? ? /* transform: translateY(-50%); */
? ? ? ? ? ? /* 左邊要定位出邊框的距離 */
? ? ? ? ? ? /* left: 2px; */
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? /* 用父盒子設(shè)定搜索邊框，子盒子就不要邊框 */
? ? ? ? ? ? /* border: 0; */
? ? ? ? ? ? /* 如果給input設(shè)定了邊框，那么縮放后input和button之間也會(huì)看到白線 */
? ? ? ? ? ? /* 不要父元素背景，直接給子盒子設(shè)定邊框、浮動(dòng) */
? ? ? ? ? ? border: 2px solid #d2a95e;
? ? ? ? ? ? padding-left: 10px;
? ? ? ? }
? ? ? ? .search4 button {
? ? ? ? ? ? /* 給父元素添加同邊框一樣的背景色填充，就可以消除縮放出現(xiàn)白邊的現(xiàn)象 */
? ? ? ? ? ? top: 0;
? ? ? ? ? ? right: 0;
? ? ? ? ? ? /* 用translate絕對(duì)居中后，縮放也會(huì)出現(xiàn)縫隙，且縫隙被上下均分了 */
? ? ? ? ? ? /* 給父元素不設(shè)置邊框，只設(shè)置背景色，利用背景色充當(dāng)邊框，讓子盒子上下絕對(duì)居中 */
? ? ? ? ? ? /* top: 50%; */
? ? ? ? ? ? /* transform: translateY(-50%); */
? ? ? ? ? ? /* 沒(méi)了父元素的邊框限制，子盒子把邊框的寬度加在自己身上 */
? ? ? ? ? ? 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="父盒子透明，子盒子定位設(shè)邊框" class="poa">
? ? ? ? <button class="poa">子盒子總寬度能多不能少，高度可以誤差</button>
? ? </div>
</body>
</html>
