盒子模型 1. 盒子模型的概念 2. 高和寬的設置 3. 邊框的設置 4. 內邊距的設置 5. 外邊距的設置 6. 盒子的計算 7. 元素顯示的方式 盒子模型： border邊框，margin外邊距，padding內部距，content內容，width寬度。 高度： height: 長度值|百分比| ...
盒子模型
- 盒子模型的概念
- 高和寬的設置
- 邊框的設置
- 內邊距的設置
- 外邊距的設置
- 盒子的計算
- 元素顯示的方式
盒子模型：
border邊框，margin外邊距，padding內部距，content內容，width寬度。
高度：
height: 長度值|百分比|auto
最大高度:
max-height: 長度值|百分比|auto
最小高度:
min-height:長度值|百分比|auto
邊框的屬性：
邊框寬度：border-width
邊框顏色：border-color
邊框樣式：border-style
邊框屬性：
border- left | right | top | bottom -width
border ... -color
border ... -style
content+padding = ie
doctype html 聲明
display屬性
inline顯示內聯元素，元素前後沒有換行符
block顯示塊級元素，元素前後有換行符
內聯元素使用width和height屬性有效。
inline-block行內塊元素。
ie 盒子模型和標準 w3c 盒子模型
inline-block 行內塊元素，元素呈現為inline,具有block相依特性,none元素不會被顯示。
css文本樣式：
text-align設置元素內文本的水平對齊方式。
text-align:
left|right|center|justify
style="text-align:left;"
div{text-align:center;} <div><img src=""/></div>
文字基線：
line-height屬性
設置元素中文本行高
語法：
line-height:長度值|百分比
瀏覽器有預設的行高，不同瀏覽器預設行高不一樣。
word-spacing 設置元素內單詞之間的間距
letter-spacing 設置元素內字母之間的間距
文字樣式：字體，font-family和font-size。
文字粗細：
font-weight:normal|bold|bolder|lighter|100到900
文字樣式：
font-style:normal|italic|oblique
水平對齊：
text-align: left|right|center|justify
背景，列表
背景圖片重覆問題：
設置元素的背景圖片重覆方式：
background-repeat: repeat | no-repeat | repeat-x | repeat-y背景圖片顯示方式：
設置元素的背景圖片的顯示方式：
background-attachment: scroll | fixedscroll: 預設值，背景圖片隨滾動條滾動
fixed:當頁面的其餘部分滾動時，背景圖片不會移動
背景圖片定位：
設置元素的背景圖片的位置：
background-position:百分比|值|top|right|bottom|left|center
列表：
list-style-position: inside | outside
css中的float
float:left;
float:right;
float:none;
float:inherit;
浮動變塊狀元素，浮動能環繞效果。
定位css
標準流，定位，浮動
浮動的問題如何解決
手動給父元素添加高度
通過clear清除內部和外部浮動
給父元素添加overfloat屬性並結合zoom:1使用
給父元素添加浮動
css中的position
css背景與列表
css背景樣式
background-color:設置元素的背景顏色
background-image:把圖像設置為背景
background-position:設置背景圖像的起始位置
background-attachment:背景圖像是否固定或者隨著頁面的其餘部分滾動
background-repeat:設置背景圖像是否重覆以及如何重覆
background：背景屬性設置
css列表樣式
list-style-type:設置列表項標誌的類型
list-style-image:將圖像設置為列表項標誌
list-style-position:設置列表中列表項標誌的位置
list-style:簡寫
背景樣式
設置背景顏色和背景圖片
背景顏色，設置元素的背景顏色
background-color:顏色 | transparent
背景圖片
設置元素的背景圖片
background-image: url | none
背景圖片重覆
background-repeat: repeat | no-repeat | repeat-x | repeat-y
背景圖片顯示的方式
設置元素的背景圖片的顯示方式
background-attachment: scroll | fixed
scroll:隨著滾動條滾動，fixed:背景圖片不會移動
背景圖片定位
background-position: 百分比 | 值 | top | right | bottom | left | center
background: background-color background-image background-repeat background-attachment background-postion
列表項，list-style-type:關鍵字 | none
list-style-image: url | none
list-style-position : inside | outside
list-style: list-style-type list-style-position list-style-image
div, ul, li, dl, dt, dd, img
html,css,javascript關係
html是網頁內容的載體，css樣式是表現，javascript是行為。
css優先順序
行內樣式>內部>外部
css選擇器
標簽選擇器，全局選擇器，類選擇器，群組選擇器，id選擇器，後代選擇器
群組選擇器
鏈接偽類
:link 未訪問
:visited 已經訪問
:hover 滑鼠懸停
:active 激活
css繼承和層疊
從父元素那繼承部分css屬性
css層疊可以定義多個樣式
選擇器的權重
標簽選擇器1
類和偽類10
id選擇器100
通配符0
行內樣式1000
這種聲明高
id不要濫用，適當使用class
css導入式@import 外部css樣式
css字體和文本樣式
文字：字體，字體大小，顏色，加粗等
文本：行高，對齊方式，文本修飾等
字體：font-family
文字大小：font-size
文字顏色：font-color
文字粗細：font-weight
文字樣式：font-style: normal | italic | oblique
水平對齊：
text-align: left | right | center | justify
css中的浮動
float: left | right | none | inherit 繼承
css中的position
position: static | relative | absolute | fixed | inherit
使用z-index要有position: absolute
盒子模型：
盒子模型概念，內邊距設置，高和寬的設置，邊框的設置，外邊距設置，盒子的計算，元素顯示的方式。
border-width: thin | medium | thick
border-color: 顏色 | transparent
display: inline | block | inline-block | none
結言
好了，歡迎在留言區留言，與大家分享你的經驗和心得。
感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。
作者簡介
達叔，理工男，簡書作者&全棧工程師，感性理性兼備的寫作者，個人獨立開發者，我相信你也可以！閱讀他的文章，會上癮！，幫你成為更好的自己。長按下方二維碼可關註，歡迎分享，置頂尤佳。
感謝！承蒙關照！您真誠的贊賞是我前進的最大動力！
這是一個有質量，有態度的公眾號
喜歡本文的朋友們
歡迎長按下圖關註訂閱號
收看更多精彩內容
