css基礎系列

盒子模型

1. 盒子模型的概念
2. 高和寬的設置
3. 邊框的設置
4. 內邊距的設置
5. 外邊距的設置
6. 盒子的計算
7. 元素顯示的方式

盒子模型：

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 | fixed
複製代碼

scroll: 默認值，背景圖片隨滾動條滾動 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

結言

好了，歡迎在留言區留言，與你們分享你的經驗和心得。

感謝你學習今天的內容，若是你以爲這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。

做者簡介

達叔，理工男，簡書做者&全棧工程師，感性理性兼備的寫做者，我的獨立開發者，我相信你也能夠！閱讀他的文章，會上癮！，幫你成爲更好的本身。長按下方二維碼可關注，歡迎分享，置頂尤佳。

感謝！承蒙關照！您真誠的讚揚是我前進的最大動力！

這是一個有質量，有態度的公衆號

喜歡本文的朋友們

歡迎長按下圖關注訂閱號

收看更多精彩內容