乙個盒子模型分成幾部分:- 內容區(content)- 內邊距(padding)- 邊框(border)- 外邊距(margin)
標準盒子模型:padding、border所佔的空間不在width、height範圍內
ie盒子模型:width包括content尺寸+padding+border的總和
響應式布局:
響應式布局就是實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使**在手機和平板電腦上有更好的瀏覽閱讀體驗。換句話說就是乙個**能夠相容多個終端,而不是為了每乙個終端做乙個特定的版本。
自應式布局:
自適應布局就是指能使網頁自適應的顯示在不同大小終端裝置上的新網頁設計方式及技術,它需要開發多套介面來適應不同的終端。
原因:元素被當成行內元素排版的時候,元素之間的空白符(空格、回車換行等)都會被瀏覽器處理,根據white-space的處理方式(預設是normal,合併多餘空白),原來html**中的回車換行被轉成乙個空白符,在字型不為0的情況下,空白符佔據一定寬度,所以inline-block的元素之間就出現了空隙。這些元素之間的間距會隨著字型的大小而變化,當行內元素font-size:16px時,間距為8px。
解決方法:①為父元素中設定font-size: 0,在子元素上重置正確的font-size
②為inline-block元素新增樣式float:left
③設定子元素margin值為負數
④設定父元素,display:table和word-spacing
@media screen and (
min-width
: 400px或max-width:1400px) }
@media screen and (
min-width
: 800px或max-width:800px)
}@media screen and (
min-width
:1400px或max-width:400px)
}
rem 單位都是相對於根元素html的font-size來決定大小的
em 同百分比一樣,相對于父元素計算
vw:1vw 等於視口寬度的1%,vh:1vh 等於視口高度的1%
.box
width=device-width: 是自適應手機螢幕的尺寸寬度。
user-scalable=no是使用者的不可以縮放的操作
百分比布局。
**查詢布局。
rem響應式布局。
vw響應式布局。
flex彈性布局。
web前端基礎總結(三)
css 選擇符有類選擇符,屬性選擇符,id選擇符,優先順序演算法是基於特殊性值進行計算的。分別如下 id 屬性 0.1.0.0 類屬性選擇器,屬性選擇器,偽類 0.0.1.0 元素選擇符,偽元素選擇符 0.0.0.1 通配選擇器對特殊性沒有任何貢獻值。important 優先順序高 結構層 html...
前端學習 小總結
我要開始複習.net了,為自己的 自己明年的工作 做準備了 總結一下。前面學習的都是基礎,標籤的用法 樣式的樣子,js原生 雖然是第二次學習這些,應該是第三次吧。覺得這次學的很好,很紮實。js物件導向 閉包啊。相容性的封裝啊。還做了貪吃蛇 特別是對於移動端和響應是的原理進行了學習。知道了一些基本的概...
前端知識小總結5
1 css實現水平垂直居中 haaaaaaaas 2 3 ajax請求時get與post區別 1 get請求將引數跟在url後直接進行傳遞 而post請求則將引數作為http訊息的內容傳送給伺服器。2 get請求傳輸資料大小較小 而post請求傳輸資料大小相對較大。3 get請求資料會被瀏覽器快取起...