1.顯示/隱藏問(wèn)題
當(dāng)鼠標(biāo)滑過(guò)a標(biāo)簽時(shí)，會(huì)浮現(xiàn)一個(gè)b模塊，實(shí)現(xiàn)方式大底都是display:none->display:block，需要注意的是：a和b需要是父子關(guān)系。
2.需要被撐開(kāi)的標(biāo)簽不要設(shè)置寬度，給孩子設(shè)置高度即可
3.在一行里有左浮和右浮的模塊，可以通過(guò)如圖所示方式解決
![]()
4.使用overflow:hidden涉及到的兩個(gè)標(biāo)簽也需要是父與子的關(guān)系
![]()
5.兩個(gè)div放在同一行時(shí)，需要給兩個(gè)div同時(shí)設(shè)置：display:inline-block或者display:inline
6.當(dāng)鼠標(biāo)滑過(guò)?符號(hào)時(shí)，出現(xiàn)二維碼，實(shí)現(xiàn)過(guò)程中發(fā)現(xiàn)即使二維碼是用定位實(shí)現(xiàn)的，還是會(huì)被別的東西遮擋（同是定位），可使用z-index：1;來(lái)解決
7.table問(wèn)題
![]()
實(shí)現(xiàn)如圖效果時(shí)
1.表里的線都是通過(guò)border來(lái)實(shí)現(xiàn)的
2.表格里名字過(guò)長(zhǎng)，顯示省略號(hào)的實(shí)現(xiàn)方式：
css
tr .tooLong{
width:357px;
white-space:nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
8.當(dāng)在一張完整的背景圖上取所需部分時(shí)涉及到的問(wèn)題：
background-attachment：fixed //設(shè)置固定的背景圖像，當(dāng)頁(yè)面的其余部分滾動(dòng)時(shí)，背景圖像不會(huì)移動(dòng)。
background-position具體參考https://www.cnblogs.com/zxx-foreve1130/p/3964243.html
letter-spacing屬性增加或減少字符間的空白（字符間距）
9.在for循環(huán)中對(duì)每一項(xiàng)都進(jìn)行處理時(shí)，要用let定義i,即let i = 0;
10.div左中右布局問(wèn)題
<DIV ID="MAIN">
<div id=left></div>
<div id=center></div>
<div id=right></div>
<div id=clear>回車(chē)符</div>
</div>
//把left的float設(shè)置為left，
//把right的float設(shè)置為right，
//把center的float也設(shè)置成left;
//把clear的屬性寫(xiě)成clear :"both";就可以了，
//要設(shè)置一個(gè)div框把main撐開(kāi)就行啦
11.Bootstrap柵格系統(tǒng)的本質(zhì)就是通過(guò)CSS3的媒體查詢(xún)實(shí)現(xiàn)的，如果您熟練使用max-width等媒體查詢(xún)屬性的話就可以拋開(kāi)Bootstrap，定制屬于自己的響應(yīng)式網(wǎng)站
12.修改bootstrap默認(rèn)樣式時(shí)，將自己的樣式文件放在引入的bootstrap文件后面即可
13.原生js給標(biāo)簽加類(lèi)名
document.getElementsByTagName('body')[0].className = 'snow-container'; //設(shè)置為新的
document.getElementsByTagName('body')[0].className += 'snow-container'; //在原來(lái)的后面加這個(gè)
document.getElementsByTagName('body')[0].classList.add("snow-container"); //與第一個(gè)等價(jià)
14.首先，大家一定要意識(shí)到這么一點(diǎn)：對(duì)于內(nèi)聯(lián)元素，vertical-align與line-height雖然看不見(jiàn)，但實(shí)際上「到處都是」！
對(duì)于內(nèi)聯(lián)元素各種想得通或者想不通的行為表現(xiàn)，基本上都可以用vertical-align和line-height來(lái)解釋?zhuān)约斑M(jìn)行行為矯正。
https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
要注意的地方。
1、只有元素屬于inline或是inline-block ，vertical-align屬性才會(huì)起作用。
2、vertical-align，取值是百分?jǐn)?shù)值時(shí)，是相對(duì)于此標(biāo)簽繼承的line-height值決定的。
3、line-height，取值是百分?jǐn)?shù)值時(shí)，是相對(duì)于當(dāng)前的font-size值決定的。
4、文中提到的圖片下方會(huì)有空隙，必須是HTML5文檔聲明才會(huì)有的，其他的文檔聲明沒(méi)有空白，就是必須要有<!DOCTYPE html>這句才可以。
15.Flex是Flexible Box的縮寫(xiě)，意為”彈性布局”，用來(lái)為盒狀模型提供最大的靈活性。
任何一個(gè)容器都可以指定為Flex布局。
注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
flex布局發(fā)生在父容器和子容器之間。父容器需要有flex的環(huán)境(display:flex;)，子容器才能根據(jù)自身的屬性來(lái)布局，簡(jiǎn)單的說(shuō)，就是瓜分父容器的空間。相反就是說(shuō)如果父容器沒(méi)有flex的環(huán)境，那么子容器就無(wú)法使用flex的規(guī)則來(lái)劃分父容器的空間
具體參考：
http://zhoon.github.io/css3/2014/08/23/flex.html
16.resize 屬性規(guī)定是否可由用戶(hù)調(diào)整元素的尺寸。
注釋?zhuān)喝绻Ｍ藢傩陨?，需要設(shè)置元素的 overflow 屬性，值可以是 auto、hidden 或 scroll。
17.寫(xiě)透明度時(shí)，兩種寫(xiě)法兼顧
opacity: 0.5;
filter:alpha(opacity = 50);
針對(duì)之前寫(xiě)的網(wǎng)頁(yè)存在的問(wèn)題總結(jié)和解決方法
1.什么情況下應(yīng)該用絕對(duì)定位？哪些情況下不需要？使用絕對(duì)定位會(huì)產(chǎn)生哪些問(wèn)題？
一個(gè)元素浮動(dòng)或絕對(duì)定位后，它將自動(dòng)轉(zhuǎn)換為塊級(jí)元素，而不論該元素本身是什么類(lèi)型。
網(wǎng)頁(yè)布局涉及到各種設(shè)備各種分辨率下的兼容，所以就注定絕對(duì)定位不能適用于大部分場(chǎng)景。。所以布局只能依賴(lài)于上級(jí)元素的位置，而不能依賴(lài)于設(shè)備的高度和寬度。
適合絕對(duì)定位的場(chǎng)景主要是一些頁(yè)面輔助功能：
彈窗：這個(gè)沒(méi)得說(shuō)，彈窗的位置肯定是要固定的。
css四種定位的理解：https://blog.csdn.net/mr_28/article/details/54846745
關(guān)于css定位：http://www.itdecent.cn/p/2f873a9dfe6a
2.浮動(dòng)的時(shí)候，父元素的高度為0，該如何解決？
因?yàn)楦?dòng)元素在正常的文檔流中是不占位置的，所以自然對(duì)于父元素來(lái)說(shuō)，子元素就像不存在它的容器內(nèi)，那自然就沒(méi)有高度拉！
這時(shí)候父元素的高度為0;這時(shí)可以通過(guò)在浮動(dòng)的子元素后清除浮動(dòng)來(lái)使父元素獲得正確的高度。
解決方法：https://blog.csdn.net/fishlao/article/details/77362884
我采用了最后一種方法：
ul:after{
display: block;
clear: both;
content: ' ';
visibility: hidden;
height: 0px;
}
3.布局為左右布局時(shí)，有哪些實(shí)現(xiàn)方式？如果左邊側(cè)寬度固定，右邊側(cè)寬度自適應(yīng)，該如何實(shí)現(xiàn)？
7種布局方式：https://www.cnblogs.com/ynchuan/p/4737901.html
左邊側(cè)寬度固定，右邊側(cè)寬度自適應(yīng)：
https://www.cnblogs.com/weixiao-he/p/4750844.html
https://blog.csdn.net/weixin_34364979/article/details/79476865
4.高度自適應(yīng)如何實(shí)現(xiàn)？
5.對(duì)于div等塊狀元素，本身占據(jù)一行，不需要再寫(xiě)寬度
6.補(bǔ)缺：css動(dòng)畫(huà)，如translate、ratate等
7.一個(gè)頁(yè)面中哪些元素是隨頁(yè)面改變而改變的？哪些元素是隨其他元素改變而改變的？哪些元素位置和樣式是始終不變的？是否需要分析清楚？分別如何實(shí)現(xiàn)？
對(duì)于不隨其他元素改變而改變自身的位置的元素，定位時(shí)用百分比
8.使用谷歌瀏覽器設(shè)置::-webkit-scrollbar后，無(wú)論設(shè)置什么屬性，滾動(dòng)條都變成透明了。
::-webkit-scrollbar{width:0px}
自定義滾動(dòng)條樣式：https://www.cnblogs.com/tzdy/p/5987549.html
9.flex布局
