一、盒子模型
1.什麼是css盒子模型?
css盒子模型僅僅是乙個形象的比喻, html中所有的標籤都是盒子
結論1.在html中所有的標籤都可以設定
寬度/高度 == 指定可以存放內容的區域
內邊距 == 填充物
邊框 == 手機盒子自己
外邊距 == 盒子和盒子之間的間隙
我是span
我是超連結我是加粗我是強調
1.內容的寬度和高度
就是通過width/height屬性設定的寬度和高度
2.元素的寬度和高度
寬度 = 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框
高度 同理可證
3.元素空間的寬度和高度
寬度 = 左外邊距 + 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框 + 右外邊距
高度 同理可證
三、盒子的box-sizing屬性
1.css3中新增了乙個box-sizing屬性, 這個屬性可以保證我們給盒子新增padding和border之後, 盒子元素的寬度和高度不變
2.box-sizing屬性是如何保證增加padding和border之後, 盒子元素的寬度和高度不變
和我們前面學習的原理一樣, 增加padding和border之後要想保證盒子元素的寬高不變, 那麼就必須減去一部分內容的寬度和高度
3.box-sizing取值
3.1content-box
元素的寬高 = 邊框 + 內邊距 + 內容寬高【新增和不新增之前的效果是一樣的】
3.2border-box
元素的寬高 = width/height的寬高【可以保證盒子的規格不發生變化】
1.text-align:center;和margin:0 auto;區別
text-align: center;作用
設定盒子中儲存的文字/水平居中
margin:0 auto;作用
讓盒子自己水平居中
我是文字
1.為什麼要清空缺省邊距(外邊距和內邊距)
在企業開發中為了更好的控制盒子的寬高和計算盒子的寬高等等, 所以在企業開發中, 編寫**之前第一件事情就是清空缺省的邊距
2.如何清空缺省的邊距格式*
3.注意點
萬用字元選擇器會找到(遍歷)當前介面中所有的標籤, 所以效能不好
企業開發中可以從這個**中拷貝，做開發時預設就是用這種方法清空缺省邊距
葬愛:非主流文化的常用詞，是當今網路流行術語.且流行於非主流殺馬特之中。葬，即埋葬，愛，即愛情，翻譯成外語就bury love
1.什麼是行高?
在css中所有的行都有自己的行高
注意點:
行高和盒子高不是同乙個概念
行高指的是每行內容的高度
盒子高指的是元素的高度
我是文字我是文字我是文字
2.在企業開發中我們經常將盒子的高度和行高設定為一樣, 那麼這樣就可以保證一行文字在盒子的高度中是垂直居中的
簡而言之就是: 要想一行文字在盒子中垂直居中, 那麼只需要設定這行文字的"行高等於盒子的高"即可
3.在企業開發中如果乙個盒子中有多行文字, 那麼我們就不能使用設定行高等於盒子高來實現讓文字垂直居中, 只能通過設定padding來讓文字居中
六、還原字型和字型大小
注意點:
1.在企業開發中, 如果乙個盒子中儲存的是文字, 那麼一般情況下我們會以盒子左邊的內邊距為基準, 不會以右邊的內邊距為基準, 因為這個右邊的內邊距有誤差
2.右邊內邊距的誤差從何而來? 因為右邊如果放不下乙個文字, 那麼文字就會換行顯示, 所以文字和內邊距之間的距離就有了誤差
3.頂部的內邊距並不是邊框到文字頂部的距離, 而是邊框到行高頂部的距離
葬愛:非主流文化的常用詞，是當今網路流行術語.且流行於非主流殺馬特之中。葬，即埋葬，愛，即愛情，翻譯成外語就bury love
盒子模型相關知識點
垂直盒子css樣式 div one two 垂直盒子html 水平盒子 css div one 1 two 1 水平盒子 html one 1 box1 div two 1 box2 div 重疊盒子 1 margin不同於border和padding只能取正數，margin的值可以取負數。marg...
盒子模型基本介紹及知識點
盒子模型 就是把html頁面中的布局元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。盒子模型有元素的內容 邊框 border 內邊距 padding 和外邊距 margin 組 成。盒子裡面的文字和等元素是 內容區域 盒子的厚度 我們成為 盒子的邊框 盒子內容與邊框的距離是內邊距 盒子與盒子之間...
盒子模型相關知識
盒子模型 box model 組成 邊框 border 外邊距 margin 內邊距 padding 和實際內容 content border可以設定元素的邊框，邊框有三部分組成邊框寬度 粗細 邊框樣式 邊框顏色。語法 border border width border style border ...