1、float浮動
脫離文件流：沿著父容器靠左或者靠右進行排列
文件流文件流是文件可顯示物件在排列時所占用的位置
float特性
left、right、none
float注意點：
只會影響後面的元素,對於浮動元素之前的元素是不造成任何影響的
內容預設提公升半層，可實現**混排樣式
預設寬根據內容決定
換行排列，一行放不下浮動元素就會換行排列
主要給塊元素新增，但也可以給內聯元素新增
如何清除浮動？
上下排列：clear，表示清除浮動：left、right、both
巢狀排列：
固定寬高：不推薦，不能把高度固定死，不適合做自適應的效果
父元素浮動：不推薦，因為父容器浮動也會影響到後面的元素
overflow：hidden（bfc規範），如果有子元素想溢位，那麼會受到影響，而不能溢位
display：inline-block（bfc規範），不推薦，父元素會影響到後面的元素
設定空標籤：不推薦，會多新增乙個標籤
after偽類：推薦，是空標籤的加強版，目前各大公司的做法。
(clear屬性只會操作塊標籤，對內聯標籤不起作用)
寫法：.clear::after
2、position定位
position特性
css position屬性用於指定乙個元素在文件中的定位方式，top、right、bottom、left屬性則決定了該元素的最終位置
position取值：
static（預設）
relative：（相對定位）
absolute
fixed
sticky
relative：（相對定位）
如果沒有定位偏移量，對元素本身沒有任何影響：left: 100px;top: 100px;left正值表示向右移動
不使元素脫離文件流
不影響其他元素
left、right、top、bottom是相對於當前元素自身進行偏移的
absolute：（絕對定位）
使元素完全脫離文件流（類似於float）
使內聯元素支援寬高
使塊元素預設寬根據內容決定（讓塊具備內聯的特性）
如果有定位祖先元素，則相對於定位祖先元素發生偏移，沒有定位祖先元素則相對於整個文件發生偏移（如相對於html標籤，左上角當做原點進行偏移）
例：#box1
#box2
box2祖先元素box1有定位元素relative（絕對、相對、固定其中一種都行）所以，box2以box1的左上角為原點進行偏移
fixed：（固定定位）
使元素完全脫離文件流
使內聯元素支援寬高（讓內聯元素具備塊特性）
使塊元素預設寬根據內容決定（讓塊具備內聯特性）
相對於整個瀏覽器視窗進行操作，不受瀏覽器滾動條的影響(比如彈窗，回到頂部按鈕等)
sticky：（粘性定位）
在指定位置，進行粘性操作
(快速寫p標籤的方式p*6)
z-index：（定位層級）
預設層數為0
巢狀的時候層級問題：
先用父容器的層級來比較，如果父容器沒有層級才用子元素的層級來比較
3、css新增省略號
width
必須有乙個固定的寬
white-space：nowrap
不讓內容折行；
overflow：hidden
隱藏溢位的內容
text-overflow:ellipsis
新增省略號
4、css sprite
特性：
css雪碧也叫作css精靈，是一種網頁應用處理方式，它允許你將乙個頁面涉及到的所有零星大歐包含到一張大圖中去載入。
其實就是利用同一張背景圖把其中的圖示定位到不同的區域，即背景定位
好處：
可以減少的質量，網頁的載入速度快
減少的請求的次數，加快網頁的開啟
5、css圓角
border-radius:可寫四個值分別是，左上，右上，左下，右下
6、pc端的布局？
通欄、版心
7、html與xhtml的區別：
doctype文件及編碼
元素大小寫:html:大小寫標籤都可以； xhtml：只能小寫
屬性布林值:html:checked; xhtml:checked="checked"
屬性引號:xhtml中屬性值必須加引號：
的alt屬性:xhtml：img標籤必須寫alt屬性
單標籤的寫法：xhtml單標籤結尾必須加/:
雙標籤閉合：html雙標籤可以可以不寫完整（十分不推薦），當時xhtml不行
8、strong和b、em和i
9、引用標籤語義化標籤的好處：有利於計算機或者瀏覽器便於解析，讓搜尋引擎更方便地搜尋到想要的內容；規範編碼的規範程度，便於多人協作開發。其實完全可以使用div和span（相當於內聯的div）來替代，但是在合適的語境使用合適的標籤更加符合規範
10、iframe巢狀頁面標籤(釣魚**經常用)
iframe元素會建立包含另外乙個文件的內聯框架（即行內框架）。
即：可以引入其他的html到當前的html中顯示
主要是利用iframe屬性進行樣式的調節的
應用場景：資料傳輸、共享**、區域性重新整理、第三方介入等
11、br和wbr？
br：單標籤，就是換行，wbr就是軟換行:在長單詞裡面加，則會一部分一部分的換行，不會整個單詞一次行換行:httphtmlxhtmlcss html和http依次換行，該長單詞不會一次性換行
12、pre與code
針對網頁中的程式**的顯示效果(被包圍的**文字會自動生成span等標籤)
輸出尖括號是要先進性轉義<(<)；>(>)
pre標籤可定義預格式的文字。被包圍在pre元素中的文字通常會保留空格和換行符
code標籤：裡面包圍著**文字
pre作為外層元素，code作為內層元素可實現**的顯示效果。
*主要了解含義即：最後實現**顯示的是這兩個標籤，一般不會直接寫而是採用markdown語法來自動生成
13、map與area？14、embed與object？（用得少）
都表示能夠嵌入一些多**，如flash動畫、外掛程式等。基本沒多大區別，主要為了相容不同的瀏覽器
object元素需要配合param元素一起完成
15、audio與video為了提高相容性，要配合source標籤
16、文字註解？
ruby、rt這樣乙個組合
css實現文字反向排列，bdo標籤實現文字反向排列.
17、擴充套件link標籤
主要作用為引入外部檔案
新增**標題欄前的小圖示
引入dns預解析
18、meta擴充套件學習？
優化網頁
meta新增一些輔助資訊：
還可以新增一些功能：渲染模式、重新整理、快取
ctrl+f查詢文字
19、html5新語義化標籤datalist：選項列表
details/summary:文件細節/文件標題
progress/meter：定義進度條/度量度量範圍
time：定義日期或時間
mark：帶有記號的文字
(title屬性為滑鼠停留顯示提示資訊)
(建議盡量把div換成相應的語義化標籤)
20、**擴充套件
新增單線：border-collapse：collapse
隱藏空單元：empty-cells：hide
斜線分類：border/rotate
列分組：colgroup/col
21、表單擴充套件
美化表單控制項：1、用偽類,主要用label標籤：checked 2、position+opacity
label標籤可以增大checkbox的選中區域
method：資料傳輸方式
enctype：資料傳輸型別
name/value：資料的鍵值對
擴充套件標籤
fieldset：表單內元素分組
legend：為fieldset元素定義標題
optgroup：定義選項組
22、bfc規範
formatting context（格式化上下文）是w3c css2.1規範中的乙個概念，它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用
bfc即block formatting contexts（塊級格式化上下文），它屬於上述中的其中一種規範具有bfc特性的元素可以看做是隔離了的獨立容器，容器裡面的元素不會在布局上影響到外面的元素，並且bfc具有普通容器所沒有的一些特性。
觸發bfc規範的元素，可以形成乙個獨立的容器，不受到外界的影響，從而解決一些定位問題
觸發bfc
浮動元素：float除none以外的值
絕對定位元素：position（absolute、fixed）
display為inline-block、table-cells、flex
overflow除了visible以外的值（hidden、auto、scroll）
bfc特性及其應用
解決margin的疊加問題
解決margin傳遞問題
解決浮動問題
解決覆蓋問題
html與css學習筆記
定位之absolute和relative 一般設定了absolute或relative時，才設定right left left 50px 意思是左邊線距離定位盒子的左邊線50px 一般父盒子設定了position absolute display inline block float left ri...
HTML與CSS學習筆記
恢復內容開始 計蒜客 恢復內容結束 css部分 html head style p p p style head body h1 老王的愛情 h1 p id first 為什麼要那麼痛苦地忘記乙個人，時間自然會使你忘記。如果時間不可以讓你忘記不應該記住的人，我們失去的歲月又有甚麼意義?p p id ...
HTML與CSS學習筆記 7
1 響應式布局 利用 查詢，即media queries，可以針對不同的 型別定義不同的樣式，從而實現響應式布局。常見選項 型別 and not min width max width 例如 media all and min width 500px and max width 700px 當解析度...