01.設定伸縮盒子(父盒子設定)
//設定伸縮盒子(父盒子設定)
display: flex;
//調整主軸方向(父盒子設定)
flex-direction: row; //預設值 從左向右
flex-direction: row-reverse; // 從右向左
flex-direction: column; //列 由行轉為列 從上向下
flex-direction: column-reverse; //列 由行轉為列 從下往上顯示
//子元素在主軸方向的對齊方式
justify-content: start; //預設值 位於主軸開始位置
justify-content: flex-end; // 位於主軸結束位置
justify-content: flex-center; // 位於主軸中間位置對齊
justify-content: space-around; // 自動調整間隔區域
justify-content: space-between; // 兩端對齊
//子元素在側軸方向的對齊方式
align-items: stretch; // 預設值 拉伸,與flex-star類似，但是如不設定高度會鋪滿側軸
align-items: center; // 側軸的中間位置對齊
align-items: flex-end; // 側軸的底部位置對齊
align-items: flex-start; // 側軸的開始位置對齊
//設定盒子換行(父盒子設定)
flex-wrap: nowrap; //預設值 不換行
flex-wrap: wrap; // 元素換行顯示
//設定盒子換行後的對齊方式
align-content: stretch; // 預設值 拉伸
align-content: flex-start; // 換行後開始位置對齊
align-content: center; // 換行後中間對齊
align-content: flex-end; // 換行後結束位置對齊
align-content: space-around; // 換行後環繞對齊
align-content: space-between; // 換行後兩端對齊
//注意: 該元素必須配合flex-wrap使用;該屬性設定的是元素換行後在側軸對齊方式
//設定當前子元素在側軸方向對齊方式
align-self: center; // 設定當前子元素在側軸方向居中對齊
align-self: flex-end; // 設定當前子元素在側軸方向結束位置對齊
align-self: flex-start; // 設定當前子元素在側軸方向開始位置對齊
align-self: stretch; // 設定當前子元素在側軸方向拉伸
//注意: 該屬性是給單獨的元素設定在側軸的對齊方式
//設定子元素的顯示順序
order: 5; //值越大排序越往後
//設定子元素在父元素中的縮放比例
flex: ;//設定子元素在父元素中的縮放比例
前端面試準備筆記之html和css 03
01.html頁面的載入順序 html文件是自上而下載入的。head完畢後，開始解析body中的 此時如果遇到script 同樣會將控制權交給js引擎。當body中的 全部執行完畢，並且整個頁面的css樣式載入完畢，css會重新渲染整個頁面的html元素。所以，script 標籤寫在標籤靠後的位置較...
前端面試準備
1.簡單介紹下ajax ajax是web2.0技術的核心由多種技術集合而成，使用ajax技術不必重新整理整個頁面，只需對頁面的區域性進行更新，可以節省網路頻寬，提高頁面的載入速度，從而縮短使用者等待時間，改善使用者體驗。2.tcp與udp的區別 1 tcp面向連線 如打 要先撥號建立連線 udp是無...
前端面試準備 2
1.一次完整的http事務是怎麼樣的過程?1 通過網域名稱尋找ip位址 瀏覽器會首先搜尋自己的瀏覽器快取裡面有沒有dns快取，如果找到則結束，裡面有網域名稱對應的ip位址。如果瀏覽器快取沒有找到，則會繼續往作業系統中查詢是否有dns快取，如果找到則結束，否則進行下一步。瀏覽器會向本地的dns服務提供...