生命不息，學習不止
在今天這個日子，祝愿所有程式員們的世界，永遠沒有bug
接下來，打開電腦！
關于疑問：
一、彈性盒子flex：1的變化？
二、彈性盒子對子元素width的影響？
除錯代碼：
(純CSS實作手風琴效果)
<div class="box">
<ul>
<li>
<span>謹防三大減肥</span>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
*{
margin: 0;
padding: 0;
}
body{
background: url(bg.png);
}
li{
list-style: none;
}
.box{
width: 1200px;
height: 480px;
border: 1px solid #f00;
margin: 100px auto;
}
.box ul{
height: 100%;
display: flex;
}
ul>li{
white-space: nowrap;
position: relative;
width: 120px;
transition-duration: 1s;
border: 1px solid #f40;
}
ul>li>img{
height: 100%;
}
ul>li:nth-child(1){
background: url(img1.jpg) no-repeat left center;
background-size: cover;
}
ul>li:nth-child(2){
background: url(img2.jpg) no-repeat left center;
background-size: cover;
}
ul>li:nth-child(3){
background: url(img3.jpg) no-repeat left center;
background-size: cover;
}
ul>li:nth-child(4){
background: url(img4.jpg) no-repeat left center;
background-size: cover;
}
ul>li:nth-child(5){
background: url(box_img2.png) no-repeat left center;
background-size: cover;
}
ul>li>span{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
color: #fff;
font-size: 22px;
text-align: center;
background-color: rgba(0,0,0,0.5);
}
ul>li:hover{
/* width: 100%; */
flex: 1;
}
效果圖如下：
疑問決議：
一、彈性盒子flex：1的變化？
核心代碼如下：
給所有li 的寬度設為固定值：120px；當滑鼠懸浮li的時候，給當前懸浮的li設定為flex：1（鋪滿父元素剩下的寬度），
這樣設定會出現如下情況：
從綠色框的位置移入，會把li放大到上圖的效果（黃色框內），（沒有問題，肯定不推薦）
但是從綠色框以外移入就會出現閃爍的問題，如下圖效果，1和2發生重疊（有問題）
圖中看不出明顯效果，建議大家復制上方的代碼，進入瀏覽器除錯，
關鍵：
發生閃爍重疊的原因，我個人分析是因為flex：1，它會鋪滿父元素剩下的寬度，
但它在鋪滿前，大概會減掉自己90%的寬度，再進行鋪滿的設定，
這個時候后方的li就會往前方移動，滑鼠同時選中兩個li，就發生了重疊，并且出現閃爍，
為了解決重疊閃爍的問題，我把flex：1，修改成了width：100%；
就好了
也就是下面的疑問
二、彈性盒子對子元素width的影響？
平常對width的認識：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 400px;
background-color: pink;
}
.div1{
width: 100%;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">
</div>
</div>
</body>
</html>
效果如下：
可見對.div1設定的width：100%,是以父元素的width為基準的，（這是我們平常對width的理解）
但在flex（彈性盒子布局）中，子元素的width發生了變化，
在最上面的（純CSS實作手風琴）代碼中，我們把flex：1，修改成width：100%；
就解決了疑問一（重疊和閃爍）中所提到的問題，
flex（彈性盒子）里面子元素的寬度為100%，就代表父元素剩余寬度的100%；
總結：
-
彈性盒子flex：1的變化？
父元素為flex布局（手風琴案例），子元素寬度為固定值，滑鼠懸浮樣式修改為，flex：1，就會出現重疊閃爍的問題，
因為flex：1（會鋪滿父元素剩下的寬度）
但它在鋪滿前，大概會減掉自己90%的寬度，再進行鋪滿的設定，
后方的元素往前方移動，滑鼠選中兩個li，發生了重疊，并且出現閃爍，
-
彈性盒子對子元素width的影響？
父元素寬度為120px，給子元素設定寬度為100%，那么子元素寬度也為120px（子元素的%單位，是根據父元素的寬度而定），
但在彈性盒子下，子元素的寬度不再以父元素寬度為基準，而是以父元素剩下的寬度為基準，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/191822.html
標籤：其他
上一篇：制作一個簡單的chrome插件