CSS基礎知識（常複習，常修正)
####Part1 CSS簡介css
CSS 層疊樣式表：主要用於定義html內容在瀏覽器內的顯示樣式，如文字、大小、字體加粗等html
css註釋 /註釋語句/ html註釋<!--註釋語句-->api
css樣式由選擇符和聲明組成，而聲明又由屬性和值組成。 當有多條聲明時，中間用英文;隔開. 最後一條生命通常沒有分號瀏覽器
代碼：p{ font-size:14px; color: blue} 說明: p 選擇符 /：聲明 /color 屬性 /blue 值ide
3種css樣式優先級從高到低：內聯式>嵌入式>外部式佈局
內聯式：<p style="color":red>文本</p>字體
嵌入式css: <head>標籤內添加 <style type="text/css">css樣式</style>url
外鏈式css:<head>/<body>標籤內添加 <link href="base.css" rel="stylesheet" type="text/css"/>spa
!!!!注意： 1.css樣式文件以有意義的英文字母命名； 2.rel="stylesheet" type="text/css"是固定寫法不可修改 3.<link>標籤位置通常寫在<head>標籤內設計
####Part2 CSS選擇器 #####2.1 選擇器簡介 基本選擇器： 元素（標籤)選擇器、id選擇器、class選擇器、子類選擇器、父類選擇器
標籤選擇器 { css樣式; }
類選擇器 .class { css樣式代碼; } 注意前綴.
id選擇器：#id{ css樣式; } 注意前綴#
類選擇器和ID選擇器的區別： 1.ID選擇器只能在文檔中使用一次; 2.能夠用類選擇器詞列表方法爲一個元素同時設置多個樣式，而ID選擇器不能夠
子選擇器： 語法：.food>li{ css樣式 ;} 子選擇器用>符號用於選擇制定標籤元素的第一代子元素
包含(後代)選擇器 語法：.first span{ css樣式; } 包含選擇器即加入空格，用於制定標籤元素下的全部後代元素
相鄰選擇器：選擇下一個兄弟元素 語法： p1+p2{ css樣式; } 用+鏈接
羣組選擇器： div,p,span{css樣式} 用,隔開
通用選擇器：* {css樣式} css清零 *{margin:0;padding:0}
#####2.2 選擇符 僞類選擇符： 僞類選擇符容許給html不存在的標籤（標籤的某種狀態）設置樣式: 代碼：a:hover{color:red;}這行代碼就是爲a標籤鼠標滑過的狀態設置字體顏色變紅
注意：僞類標籤並不兼容全部瀏覽器，不建議使用
分組選擇符： 當你想爲html中多個標籤元素設置同一個樣式時，可使用分組選擇符(,)
選擇符的特色： 繼承 繼承規則不只容許css樣式做用於某個html標籤，並且應用於其後代
特殊性 當咱們爲同一個元素設置了不一樣的css樣式代碼，瀏覽器會根據權值來判斷使用那種css樣式，標籤 權值=1， 類的權值=10 id權值=100 繼承的權值=0.1
層疊 一個元素有多個權值同樣的css樣式，瀏覽器會根據這些樣式的前後順序來決定，處於最後面的css樣式會被應用
重要性 咱們在作網頁代碼的時，有些特殊的狀況須要爲某些樣式設置具備最高權值，怎麼辦？這時候咱們可使用!important來解決。 代碼： p{color:red!important;} p{color:green;}
！！！注意：!important要寫在分號的前面
#####2.3 font文字樣式
font-family 字體類型（可同時設置多個值) font-size 字體大小 color 顏色 （rgb轉16進制:http://www.lvyestudy.com/tools/color_picker.aspx） font-weight 粗細 normal/lighter/bold/bolder font-style 斜體 normal italic oblique(有italic就用italic,無該屬性就用oblique) text-decoration: none/ underline/ line-through 刪除線
#####2.4 text段落樣式 text-align: center/left/right text-indent: 2em（縮進2個字符） line-height: nnpx（當與height值相等時，能夠控制文本垂直居中) text-transform: none/uppercase/lowercase/capitalize font-varient: none/small-caps(小型大寫，基本用不到) letter-spacing: 字母間距 nnpx; word-sapcing: 單詞間距 nnpx；
#####2.5 border邊框樣式
任何塊級元素和行級元素均可以設置邊框屬性 border屬性： border-width: npx; border-style: none/solid/dashed/dotted/dobule/hidden 3D邊框樣式：inset 內凹/ outset 外凸/ ridge 脊線/ groove槽線 border-color:顏色值
局部邊框設置：border-top/right/bottom/left
#####2.6 background背景樣式
背景色：background-color: 背景圖：background-image:url("img地址"); background-repeat: no-repeat repeat-x repeat-y repeat; background-position: top/bottom left/center/right 或者像素值 background-acttachment:scroll(默認)/fixed
#####2.7 a標籤 超連接樣式
a:link 未被訪問 a:visited 訪問後的樣式 a:hover 鼠標通過顯示 a:active 單擊激活時的樣式 給a標籤訂義樣式時，這4種僞類的順序不能變！！
鼠標樣式：cursor cursor屬性值：default/pointer/move/....
#####2.8 image圖片樣式 width/height/border text-align 水平對齊/vertical-align 垂直對齊 圖文環繞 float（浮動）屬性：left/right/margin
#####2.9 list 列表樣式 ol type=1 /a /A /i /I ul type=disc實心圓/circle空心圓/square 實心正方形 list-style-type:none list-style-image:url("地址")
#####2.10 table表格樣式 單元格之間的間距：border-collapse:separate(默）/collapse 表格邊框間距: npx (左右，上下) 表格標題:caption-side：top(默)/bottom
####Part3 盒子模型 #####3.1 元素分類 在css中，html標籤元素可分紅三大類：塊狀元素、內聯元素、內聯塊狀元素
塊狀元素(display:block) 特色： 一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）
二、元素的高度、寬度、行高以及頂和底邊距均可設置。
三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。
經常使用的block元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
內聯元素(display:inline) 特色： 一、和其餘元素都在一行上； 二、元素的高度、寬度及頂部和底部邊距不可設置； 三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。 經常使用的inline元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
內聯塊狀元素(display:inline-block) 特色： 一、和其餘元素都在一行上； 二、元素的高度、寬度、行高以及頂和底邊距均可設置。 經常使用的內聯塊狀元素有：<img>、<input>
#####3.2 盒子模型 在CSS理論中，全部頁面中的元素均可以看出是一個盒子，而且佔據必定的頁面空間
盒子內容到border距離：padding 盒子之間距離：margin 盒子上下左右：padding-top/riht/bottom/left 盒子的邊框: border
一個元素的實際寬度（盒子的寬度)=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。
注意：元素的width和height僅僅針對內容區而言
#####3.3 CSS佈局模型
3種基本佈局模型：Flow流動模型/ Float浮動模型/ Layer層模型
Flow模型(默認網頁佈局模型） 特徵： 1.塊狀元素都會在所處的包含元素內自上而下按照順序垂直延伸分佈，由於在默認狀態下，塊狀元素的寬度都是100%
2.在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示
Float模型：能夠設置塊元素的水平對齊方式 ！！設置浮動後，未設置寬度的話，容器的大小隨着內容而變化
特徵：任何元素在默認狀況下是不能浮動的，但能夠用 CSS 定義爲浮動，如 div、p、table、img等元素均可以被定義爲浮動
層模型：層模型佈局就像是ps中的圖層編輯功能，每一個圖層都可以精準定位操做。
#####3.4 定位機制：標準文檔、浮動、絕對定位
經過使用position屬性能夠選擇4種不一樣的定位
靜態定位static:默認狀況下，不指定元素的position值，元素時靜態定位
相對定位relative:相對原始位置偏移 相對定位完成的過程是首先按static(float)方式生成一個元素(而且元素像層同樣浮動了起來)，而後相對於之前的位置移動，移動的方向和幅度由left、right、top、bottom屬性肯定，偏移前的位置保留不動。
絕對定位absolute和fixed:一個元素變成了絕對定位元素，這個元素就徹底脫離正常文檔流了，絕對定位元素的前面或者後面的元素會認爲這個元素並不存在，即這個元素浮於其餘元素上面，它是獨立出來的。
absolute:相對文檔絕對定位 fixed：相對於網頁窗口固定定位，它不會隨瀏覽器窗口的滾動條滾動而變化。
####Part4 CSS代碼縮寫和居中樣式小技巧 #####4.1 代碼簡寫 盒子模型縮寫：margin:10px//margin:10px 20px//
顏色值縮寫：對於rgb的16進制格式，如果每兩位的值同樣，能夠縮寫一半
字體縮寫： body{ font:italic 12px/15px bold "宋體" ,sans-serif}
注意：1.字體縮寫至少要指定font-size和font-family屬性 2.font-size 與 line-height 中間要加入「/」斜扛
90像素=1英寸
#####4.1 CSS居中樣式設計小技巧 水平居中： 若是被設置元素爲文本、圖片等行內元素時，水平居中是經過給父元素設置 text-align:center 來實現的。
div 水平平居中 margin:0 auto;
不定寬度塊狀元素：
設置不定寬塊狀居中：
法一： 加入 table 標籤，給這個table設置 margin:0 auto; 法二： 設置 上一級父元素display: inline； 法三： 設置 上一級父元素position:relative 和 left:-50%;
垂直居中:
父元素高度肯定的單行文本:height=line-height
父元素高度肯定的多行文本 ：
法一： 使用插入 table (包括tbody、tr、td)標籤，同時設置table的vertical-align：middle（默認如此)
法二： 設置父元素display: table-cell,同時設置 vertical-aglin:middle
隱形改變display類型：
position:absolute 和float:left/right(只要出現任意一種狀況，元素的display會自動變爲 inline-block
- 1. HTML基礎知識（常複習，常修正）
- 2. CSS基礎知識複習
- 3. Java基礎複習筆記——異常基礎知識（一）
- 4. DTU常見基礎知識
- 5. Python基礎知識：異常
- 6. oracle常見基礎知識
- 7. MySQL常用基礎知識
- 8. java基礎知識複習
- 9. Android基礎知識複習
- 10. Android 基礎知識複習
- 更多相關文章...
- • Eclipse 快速修復 - Eclipse 教程
- • Redis的基礎事務和常用操作 - Redis教程
- • 常用的分佈式事務解決方案
- • Kotlin學習（二）基本類型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. HTML基礎知識（常複習，常修正）
- 2. CSS基礎知識複習
- 3. Java基礎複習筆記——異常基礎知識（一）
- 4. DTU常見基礎知識
- 5. Python基礎知識：異常
- 6. oracle常見基礎知識
- 7. MySQL常用基礎知識
- 8. java基礎知識複習
- 9. Android基礎知識複習
- 10. Android 基礎知識複習