css的三種布局方式:
1.標準流: 從上面往下面布局
2.浮動
3.定位
在標準流下,分為三種元素:
塊級元素
行內元素
行內塊元素
浮動的值:
float: left? right
浮動的特點:
1.可以使元素排成一行
2.脫標: 脫離標準流(半脫標),不占位置
3.后面浮動的盒子應該排列在前面浮動盒子的后面
4.做文字環繞效果： 文字會環繞著浮動的盒子顯示
5.使行內元素可以設置寬高
6.如果父盒子寬度不足以顯示子盒子的內容,子盒子會往下面顯示
總寬高:? 502 290
左邊盒子寬高: 302 290
右邊上盒子: 190 140
右邊下盒子: 190 140
--------------------------------------
清除浮動不是把浮動干掉,清除浮動帶來的影響
浮動的影響: 使父盒子沒有高度 (父盒子高度由子盒子高度撐起)
1.給父盒子設置高度? (一般不怎么使用)
2.給父盒子設置overflow: hidden;
(一般少用)
原理:? 設置了overflow: hidden,觸發bfc機制: block formatting context,塊級排版上下文,劃定一塊區域,讓該區域里面的所有的html元素按照一定的規則進行排列,不影響其他元素的布局(顯示)
overflow: hidden; 超出父元素部分隱藏
auto; 超出父元素內容,出現滾動條
overflow:hidden;清除浮動,在有定位的時候不適合使用
3.在父元素里面添加一個空的塊級子元素,并且設置clear:both;? (left,right)
程序員修改代碼結構? (一般不用)
4.本質上是第三種方法,不會修改結構
偽類選擇器:
選擇器名:hover {}
選擇器名:after: 在選擇器里面的最后面添加一項內容
IE低版本不支持:after
高級瀏覽器
.clear-fix:after {
content: "";
display: block;
clear: both;
}
低級瀏覽器
.clear-fix {
zoom: 1;
}
---------------------------------------
浮動元素不給寬度,默認寬度為內容的寬
浮動的三要素:
1.一般給寬度,不要給高度(一般由子元素撐起)
2.同級的元素,只要一個設置浮動,所有的都應該設置浮動
3.只要給子元素設置了浮動,那么父元素必須清除浮動
設置inline-block,空格,默認為與文字的基線對齊
vertival-align: top
1.標準流(文檔流) : 從上往下布局
2.浮動
3.定位 : 設置標簽元素的位置,結合四個方向屬性來設置位置
top: 距離上方的位置
bottom: 距離下方的位置
left: 距離左邊的位置
right: 距離右邊的位置
設置定位: position
1.靜態定位(static): 以前用的定位其實就是靜態定位,在靜態定位的時候,四個方向屬性值是不起作用的
2.絕對定位(absolute)
3.相對定位(relative)
4.固定定位(fixed): 把一個標簽元素固定在某一塊位置
后面三種定位,方向屬性值都是起作用的
絕對定位:
1.脫離標準流
2.可以使行內元素設置寬高
3.參考點:
a.祖宗盒子沒有定位的情況下,以body,瀏覽器窗口的左上角作為參考點
b.如果盒子間發生嵌套關系,并且子盒子設置絕對定位,參考點就是具有定位的祖宗盒子;如果所有的祖宗盒子都沒有定位,那么還是以body,瀏覽器的左上角作為參考點
相對定位:
1.不是脫離標準流
2.不可以使行內元素設置寬高
3.參考點,以元素的當前位置作為參考
作用:
a.元素位置的微調
b.父相子絕 (父盒子相對定位,子盒子絕對定位)
盒子的居中顯示:
margin: 0 auto;
如果盒子設置為絕對定位,auto不起作用
margin的負邊距布局
margin為正值的時候
margin-left: 盒子往右邊跑
margin-top: 盒子往下邊跑
margin為負值的時候
margin-left: 盒子往左邊跑
margin-top: 盒子往上邊跑
如果盒子有絕對定位,讓盒子居中,一般就是給該盒子設置以下樣式:
width: 200px;
heigth: 200px;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
注: margin-left的值和margin-top值,為盒子寬高的一半
固定定位: fixed,將元素固定在網頁的某個位置
1.脫離標準流
2.可以使行內元素設置寬高
3.參考點: 以body,瀏覽器左上角
z-index: 設置元素的堆疊順序,值是一個數值,誰的值大,那么就顯示在最上面
注意點:
1.如果要想使z-index值生效,必須設置定位(絕對,相對,固定定位)
2.z-index的比較,只在同級比較
A a,B b,如果A的z-index值大于B,那么無論b的z-index值是多少,都不可能顯示在最上面
顏色:
1.單詞,red,blue
2.十六進制
3.rgb()
4.rgba(r,g,b,a) : a透明度的意思? 0-1,1代表不透明,0代表透明
rgba僅僅是顏色的透明度變化
opacity: 0-1 ,0 代表完全透明,1代表不透明
opacity的透明指的是元素所有的內容,包括內容,背景顏色
