一.浮動(float)
1.文件流:是指盒子按照 html 標籤編寫的順序依次從上到下,從左到右排列,塊元素佔一行,行內元素在一行之內從左到右排列，
先寫的先排列,後寫的排在後面,每個盒子都佔據自己的位置.
2.浮動的概念:所謂的浮動就是指元素脫離文件流,漂浮到文件流的上方,不會佔據位置。
3.浮動的特性:
(1).浮動元素有左浮動(float:left)和右浮動(float:right)兩種.
(2).浮動的元素會向左或向右浮動,碰到父元素邊界,浮動元素,未浮動的元素才停下來.
(3).相鄰浮動的塊元素可以並在一行,超出父級寬度就換行.
(4).浮動讓行內元素或塊元素自動轉化為行內塊元素.
(5).浮動元素後面沒有浮動的元素會佔據浮動元素的位置,沒有浮動的元素內的文字會避開浮動的元素,形成文字饒圖的效果.
(6).父元素內整體浮動的元素無法撐開父元素,需要清除浮動.
(7).浮動元素之間沒有垂直 margin 的合併.
4.清除浮動
(1).父級上增加屬性 overflow：hidden
(2).在最後乙個子元素的後面加乙個空的 div,給它樣式屬性 clear:both（不推薦）
(3).偽物件選擇器:
以下的屬性content必須和after以及before使用,
父元素::after,父元素before
二.定位(position)
1.定位: 設定元素在html文件流中的位置.
2.相對定位:relative 生成相對定位元素,元素所佔據的文件流的位置不變,元素本身相對文件流的位置進行偏移 .
3.絕對定位:absolute 生成絕對定位元素,元素脫離文件流,不佔據文件流的 位置,可以理解為漂浮在文件流的上方,
相對於上乙個設定了相對或者絕對或者固定定位的父級元素來進行定位,如果找不到,則相對於body元素進行定位.
4.固定定位:fixed 生成固定定位元素,元素脫離文件流,不佔據文件流的位置,可以理解為漂浮在文件流的上方,相對於瀏覽器視窗進行定位.
5.static預設值,沒有定位,元素出現在正常的文件流中,相當於取消定位屬性或者不設定定位屬性.
6. inherit從父元素繼承 position屬性的值.
7. 定位元素特性:絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素.
8. 定位元素層級:定位元素是浮動的正常的文件流之上的,可以用 z-index 屬性來設定元素的層級(absolute一起使用).
三.css中元素對齊的方式
1.乙個div在另外乙個div中的垂直居中
(1)
.wrap
.con
...........
.wrap1
.con1
...............
.wrap2
.con2
................
給新增 vertical-align: middle;同時給父元素新增text-align: center;和 line-height
.wrap3
img....................
CSS定位居中常用方法
1.使用 margin 0 auto 實現 margin 0 auto 常用於定寬的水平居中在，這裡加上一些屬性也可時間水平垂直居中 css box 注 這個辦法需要定高，在大部分場景不太適用 2.transform居中 內容塊定義transform translate 50 50 支援動態高度，適...
CSS筆記3 布局 居中 定位 浮動 展示
css筆記3 1.居中 可以使用 2.定位 position 表示定位 2.1絕對定位position absolute left 100px 該元素所在的塊的位置位於這個絕對定位顯示的左上方 top 50px 絕對定位的元素不會干擾到其他元素的位置 position absolute left 1...
css3 定位和浮動
1 css定位 改變元素在頁面上的位置 2 css定位機制 普通流 元素按照其在html中的位置順序決定排布的過程 浮動 絕對布局 3 css定位的屬性 position 把元素放在乙個靜態的，相對的，絕對的，或者固定的位置中 top left right botom 元素向上 左 右 下的偏移量 ...