1.實現三欄佈局(左右兩邊固定寬度,中間自適應)
1)浮動佈局
左右兩邊固定寬度,並分別設置float:left
和float:right
。(但這會帶來高度塌陷的問題,所以要清除浮動。清除浮動的方式有:
a. 給父級盒子設置height
;
b.給父級盒子設置overflow:hidden
;
c.在父級盒子結束前的盒子添加clear:both
;
d.父級盒子也設置浮動;
e.父級div
定義僞類:after
和zoom
,
.clear::after{display:block;clear:both;content:"";visibility:hidden;height:0;}
.clear{zoom:1;}
2)絕對定位佈局
左中右三個盒子都設置position:absolute
;然後分別設置定位
3)flex
佈局
父盒子設置display:flex
;位於中間的子盒子設置flex:1
4)表格佈局
父盒子設置display:table
;左中右三個盒子設置display:table-cell
;左右兩個盒子分別設置寬度;
5)網格佈局
父盒子設置display:grid
; grid-template-columns:300px auto 300px
;
2.== 和 === 的區別
===
爲恆等符:當等號兩邊的值爲相同類型的時候,直接比較等號兩邊的值,值相同則返回true
,若等號兩邊的值類型不同時直接返回false
。
==
爲等值符: 當等號兩邊的值爲相同類型時比較值是否相同,類型不同時會發生類型的自動轉換,轉換爲相同的類型後再作比較。
a、如果一個是null
、一個是undefined
,那麼相等。
b、如果一個是字符串,一個是數值,把字符串轉換成數值再進行比較。
c、如果任一值是 true
,把它轉換成 1
再比較;如果任一值是 false
,把它轉換成 0
再比較。
d、如果一個是對象,另一個是數值或字符串,把對象轉換成基礎類型的值再比較。對象轉換成基礎類型,利用它的toString
或者valueOf
方法。 js
核心內置類,會嘗試valueOf
先於toString
;例外的是Date
,Date
利用的是toString
轉換。那些不是JavaScript
語言核心中的對象則通過各自的實現中定義的方法轉換爲原始值。
e、任何其他組合,都不相等。
3.transition和animation
transition
1)語法transition
是一個複合屬性,可設置四個過渡屬性,簡寫方式如下:transition{ transition-property transition-duration transition-timing-function transition-delay}
transition-property
:是用來指定當元素其中一個屬性改變時執行transition
效果,值有none
(沒有屬性改變)、all
(默認值,所有屬性改變),indent
(某個屬性名,一條transition
規則,只能定義一個屬性的變化,不能涉及多個屬性,如果要設置多個屬性時,需分別設置,中間以逗號隔開)【當其值爲none
時,transition
馬上停止執行,當指定爲all
時,則元素產生任何屬性值變化時都將執行transition
效果】;transition-duration
:過度時間,是用來指定元素轉換過程的持續時間,單位爲s
(秒)或ms
(毫秒);transition-timing-function
:時間函數,根據時間的推進去改變屬性值的變換速率,值ease
(逐漸變慢)、linear
(勻速)、ease-in
(加速)、ease-out
(減速)、ease-in-out
(加速然後減速)、cubic-bezier
:(自定義一個時間曲線);transition-delay
:延遲,指定一個動畫開始執行的時間,也就是當改變元素屬性值後多長時間開始執行transition
效果,單位爲s
(秒)或ms
(毫秒);
2)觸發方式
僞類觸發::hover,:focus,:checked,:active
js
觸發:toggleClass
3)以下情況下,屬性值改變不能產生過渡效果
a.background-image
,如url(a.jpg)
到url(b.jpg)
(與瀏覽器支持相關,有的瀏覽器不支持)等
b.float
浮動元素
c.height
或width
使用auto
值
d.display
屬性在none
和其他值(block、inline-block、inline
)之間變換
e.position
在static
和absolute
之間變換transition
示例:
<style>
#box2{
height: 100px;
width: 100px;
background: blue;
}
#box2:hover{
transform: rotate(180deg) scale(.5, .5);
background: red;
transition: background 2s ease, transform 2s ease-in 1s;}
</style>
</head>
<body>
<div id="box1">BOX1</div>
<div id="box2">BOX2</div>
</body>
animation
1)語法animation{ animation-name animation-duration animatino-timing-function animation-delay animation-iteration-count animation-direction animtion-play-state animation-fill-mode}
animation-name
:用來調用@keyframes定義好的動畫,與@keyframes定義的動畫名稱一致;animation-duration
:指定元素播放動畫所持續的時間;animation-timing-function
:和transition
中的transition-timing-function
中的值一樣。根據上面的@keyframes
中分析的animation
中可能存在多個小動畫,因此這裏的值設置是針對每一個小動畫所在所在時間範圍內的屬性變換速率;animation-delay
:定義在瀏覽器開始執行動畫之前的等待的時間、這裏是指整個animation
執行之前的等待時間,而不是上面所說的多個小動畫;animation-iteration-count
:定義動畫的播放次數,通常是整數,默認是1
,若爲infinity
,動畫將無限多次的播放;animation-direction
:主要用來設置動畫播放次數,其主要有兩個值:normal
:默認值,動畫每次訓話都是按順序播放;alternate
:動畫播放在第偶數次向前播放,第奇數次想反方向播放(animation-iteration-count
取值大於1
時設置有效)animation-play-state
:屬性用來控制元素動畫的播放狀態。主要有兩個值:running
:可以通過該值將暫停的動畫重新播放,這裏的重新播放不是從元素動畫的開始播放,而是從暫停的那個位置開始播放;paused:
暫停播放。animation-fill-mod
: 默認情況下,動畫結束後,元素的樣式將回到起始狀態,animation-fill-mode
屬性可以控制動畫結束後元素的樣式。主要具有四個屬性值:none
(默認,回到動畫沒開始時的狀態。),forwards
(動畫結束後動畫停留在結束狀態),backwords
(動畫回到第一幀的狀態),both
(根據animation-direction
輪流應用forwards
和backwards
規則)。animation
示例:
<style>
.box{height:100px;width:100px;border:15px solid black;
animation: changebox 10s ease-in-out 3 alternate paused;
}
.box:hover{
animation-play-state: running;
}
@keyframes changebox {
10% { background:red; }
50% { width:80px; }
70% { border:15px solid yellow; }
100% { width:180px; height:180px; }
}
</style>
<body>
<div class="box"></div>
</body>
4.事件冒泡的事件捕獲
事件冒泡,事件會從最內層的元素開始發生,一直向上傳播,直到document
對象;
事件捕獲則跟事件冒泡相反,事件會從document
對象開始發生,直到最具體的元素;
5.GET和POST的區別
1.發送方式:GET
請求數據放在url
上,即HTTP
的協議頭中;而POST
把數據放在HTTP
的包體中。
2.大小的限制:GET
傳的參數有長度的限制,因爲瀏覽器對url
的長度有限制;而POST理論上是沒有限制的。
3.安全性:GET
請求可被緩存,請求保存在瀏覽器的歷史記錄中;POST
則不能被緩存。與POST
相比,GET
的安全性較差,因爲發送的數據是URL
的一部分。