css 盒子模型
1、所有標籤都屬於盒子,都可以設定 寬高 內外邊距 邊框
2、內容的寬度高度：width height
3、元素的寬度：左邊框+左內邊距+width+右內邊距+右邊框
高度：上邊框+上內邊距+height+下內邊距+下邊框
4、元素空間的高度寬度：左外邊距+左邊框+左內邊距+width+右內邊距+右邊框+右外邊距
5、增加padding後元素的寬高也會有變化，如果要保持元素寬高 就要減去內容的寬高。
6、增加border後元素的寬高也會有變化，如果要保持元素寬高 就要減去內容的寬高。
7、box-sizing這個屬性可以保證給盒子增加padding和border後 盒子寬度高度不變 原理：如果要保持元素寬高 就要減去內容的寬高。
8、box-sizing：lcontent-box 元素的寬高=邊框+內邊框+內容寬高
border-box 元素的寬高-width/height
9、兩個盒子是巢狀關係的話 設定裡面盒子的頂部外邊距(margin)後 外面的盒子也會被頂下來。可以給外邊的盒子新增乙個邊框屬性解決。
控制巢狀關係盒子之間的距離 先考慮padding屬性。
margin：0 auto; 可以讓裡面的盒子在大盒子中水平居中。水平有效 垂直方向需要用畫素控制。
text-align:center 和 margin:0 auto 的區別：text-align:center 設定盒子中儲存文字/的水平居中。margin:0 auto 讓盒子自己居中。
10、清空缺省內外邊距 更好的控制盒子的寬高，編寫**第一件事最好馬上清空缺省邊距。
萬用字元清空*
借鑑：body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
11、行高 line-height：所有的行都有行高。行高不同於盒子的高(height)
文字在行高中預設是垂直居中。
一行文字的行高設定跟盒子一樣的高就可以使文字垂直居中。多行文字需要用 padding和box-sizing:border-box。
12、盒子儲存的是文字 一般以盒子左邊的內邊距為基準，右邊內邊距有誤差，因為右邊放不下乙個文字 那麼文字就會換行顯示 所以距離會有誤差
網頁布局方式
常見排版方式：1.標準流（文件/普通流） --預設排版
垂直排版-塊級元素 水平排版-行內元素/行內塊級元素
2.浮動流
浮動流只能設定某個元素的左對齊或者右對齊 沒有居中對齊 center, 不可使用 margin:0px auto;
浮動流不區分 塊級元素/行內元素/行內塊級元素 都可以水平排版
在浮動流中 塊級元素/行內元素/行內塊級元素 都可以設定寬高
浮動元素的脫標：脫離標準流。元素1浮動 元素2沒有浮動 這時元素1會蓋住元素2
浮動元素規則：
同方向浮動元素，先浮動的元素會顯示在前面，後浮動的元素會顯示在後面。
不同方向浮動元素 左找左 右找右
浮動元素浮動之後的位置，由浮動之前的標準流中的位置來確定。
3. 定位流
HTML 從零開始的學習過程（5）
概念 css層疊樣式表 cascading style sheets 一種用來表現html或xml的語言。作用 結構與樣式分離的方式，便於後期的維護和修改 可以用多套樣式，使網頁有任意樣式切換的效果 使得頁面載入的更快，降低伺服器的成本。樣式分類 1.內部樣式 utf 8 document titl...
HTML從零開始
一 標籤 1.使用小寫 2.開始標籤常被稱為開放標籤 opening tag 結束標籤常稱為閉合標籤 closing tag 有效 示例 i reallystrong mean thatem 無效 示例 invalid i reallyem mean thatstrong 二 屬性 1.開始標籤包含...
從零開始學前端
靜態黃頁 伺服器組裝動態網頁資料 後端為主的mvc 前後端分離 純前端mv 為主 中間層輸出 前端virtual dom mnv 前後臺同構 後端為主的mvc 後端人員根據前台寫的html頁 套 模板渲染資料 前端為主的mv mvcmvc 執行過程 1.view傳送指令到 controller 2....