盒子模型
在頁面中，我們將所有的元素全部看做是乙個盒子，頁面布局就是將大大小小不同的盒子堆砌在一起，而乙個盒子由以下幾部分組成：
padding：內邊距，內容到邊框的距離；
margin：外邊距，其他盒子到當前盒子的邊框的距離；
border： 邊框；
所以乙個元素在頁面中實際所佔的空間是：
內容+padding+border+margin（注意：padding/margin/border上下或者左右都有，所以計算時要算上設定的值得兩倍；）
怪異盒子模型：
怪異盒子模型所設定的寬高即為其在頁面中最終所佔的位置，邊框、內外邊距所佔的位置越大則內容區域越小。
開啟怪異盒子模型的方法：box-sizing:border-box;
其最先由ie瀏覽器提出並使用，後被廣泛使用。
margin塌陷：當使用margin來調整兩個元素之間的距離時，並不會以兩個元素之間的margin之和來表示，而是以兩個元素的margin最大值為準。
解決的方法：觸發bfc（會計格式化上下文）
頁面中實現多出內容省略號顯示的方法（css）：
首先為容器設定乙個寬度；
然後設定文字內容不換行：white-space:nowrap;
之後是設定溢位隱藏：overflow:hidden；
最後則是在內容最後顯示省略號：text-overflow:ellipsis;
tips：以上方式僅對單行文字溢位有效（不建議使用）
定位
相對定位：
position：relative；
設定了相對定位之後，元素並沒有進行位移，本質上也沒有任何變化。
相對定位形影分離，元素的位置不會改變，影子移動到使用者所設定的位置。
相對定位的參考點是元素本身，也就是相對於設定了相對定位的元素進行了多少移動，所以當元素進行移動的時候，其影子也會跟著移動。
絕對定位：
position：absolute；
絕對定位移動的是元素本身；
絕對定位的參考點是由其本身向上找，第乙個擁有定位屬性的祖先元素，當其所有的外層容器都沒有定位元素的時候，預設為根元素。
絕對定位以根元素為參考時定位的是首屏左上角，定位值預設為auto，bottom是首屏的下方。
子元素如果設定了絕對定位，最好為父元素設定乙個相對定位（父元素設定position:static並不能作為子元素絕對定位的參考）。
固定定位：
position：fixed；
固定定位是相對於瀏覽器視窗的定位，定位效果類似於平時網頁上彈出的小廣告的效果，頁面滾動而固定定位的元素完全不動。
粘性定位：
position：sticky；
因相容性太差，這裡不多做贅述。
tips：固定定位與絕對定位脫離標準文件流，相對定位並不會脫離標準文件流，當然，固定於絕對定位也是脫離文字流的，不會出現類似浮動所產生的字圍效果。
bfc渲染規則：
1、內部的box會在垂直方向乙個接乙個的放置；
2、box垂直方向距離由margin決定，同乙個bfc的兩個相鄰box會發生margin塌陷；
3、每個元素的marginbox的左邊與包含塊borderbox的左邊相接觸；
4、bfc區域不會與float box重疊；
5、bfc就是乙個隔離的獨立容器，裡面元素無法影響外面，反之亦然；
6、計算bfc高度時，浮動的元素也會被算上（所以觸發bfc可以消除浮動的影響）。
css 文字樣式是相對於內容進行的樣式修飾，下面來說下幾種常見的文字樣式。首行縮排是將段落的第一行縮排，這是常用的文字格式化效果。一般地，中文寫作時開頭空兩格，類似於此。
該屬性的值是允許為負值的。語法：
text-indent: | | inherit
應用於: 塊級元素(包括block和inline-block)
繼承性: 有
百分數: 相對於包含塊的寬度
案例：首字元下沉
div
div:first-letter
語法：
text-align: left | center | right | justify | inherit
應用於: 塊級元素(包括block和inline-block)
繼承性: 有
對於ie7-瀏覽器來說，使用text-align不僅會改變文字的水平對齊方式，也會改變後代塊級元素的水平對齊方式字間隔是指單詞間距，用來設定文字或單詞之間的間距。實際上，"字"表示的是任何非空白符字元組成的串，並由某種空白符包圍。
注意：單詞之間用空格分開，單詞之間的間距 = word-spacing + 空格大小語法：注意：字間隔可為負值
word-spacing: | normal | inherit
應用於: 所有元素
繼承性: 有
字母間隔是指字元間距
注意：字母間隔可為負值
letter-spacing： | normal | inherit
應用於: 所有元素
繼承性: 有
文字轉換用於處理英文的大小寫轉換。
語法：
text-transform:uppercase(全大寫) | lowercase(全小寫) | capitalize(首字母大寫) | none | inherit
應用於: 所有元素
繼承性: 有
文字修飾用於為文字提供修飾線。
注意：文字修飾線的顏色與文字顏色相同。
語法：
text-decoration:none | [underline(下劃線) || overline(上劃線) || line-through(中劃線)] | inherit
應用於: 所有元素
繼承性: 無
在首行縮排(text-index)、水平對齊(text-align)、字間隔(word-spacing)、字母間隔(letter-spacing)、文字轉換(text-transform)、文字修飾(text-decoration)這6種文字樣式中，首行縮排(text-index)和水平對齊(text-align)只能夠應用於塊級元素(包括block和inline-block)，這是最應該注意的地方。
web前端基礎怎麼學習
web前端基礎怎麼學習，html基礎語法 常用的標記及一些概念性的知識 概念性的知識 1 的機構構成及web標準 w3c制定的xhtml css標準及由ecma歐洲電腦廠商聯合會制定dom bom ecmascript標準。2 xhtml和html的區別等。常用標記及分類 1 標記分類 常規標記及空...
Web前端基礎學習 3
bfc block formatting context 塊級格式化上下文 生成bfc的方式 1 根元素 2 float屬性不為none 脫離文件流 3 position為absolute或者fixed的時候 4 display為inline block table cell table capti...
WEB 前端 Day2 css基礎
1.表單標籤 重點掌握 作用 可以提交不同的資料到指定的伺服器 標籤 表示表單的範圍 父標籤 作用 用於採集使用者輸入的資訊 標籤分為三大類 表單標籤 包含資料提交到的位置 伺服器 資料的提交方式 get和post 表單域 用於採集使用者資訊 表單按鈕 提交按鈕，重置吧 復原 按鈕，普通按鈕 屬性 ...