標準文件流:
元素從上到下,從左到右
浮動:float
目的:想讓元素盒子橫排顯示
方法:float:left/right;
浮動的定義:使元素脫離文件流,按照那我們指定的方向發生移動,遇到父級邊界或者相鄰的浮動元素會停下來。
無論你是行內,塊級還是行內塊,只要浮動就具備以下特點:
1.display:block;
2.支援寬高,margin,padding。
3.不支援margin:auto;
4.不會有空隙問題,也不會有基線對齊問題
發現:1.子元素浮動–父級不設定高度–父級高度塌陷
2.子元素浮動–父級寬度不夠–子元素掉下來
導致:頁面布局混亂
解決方案:
問題1:高度塌陷
方案:1.直接設定高度—(不靈活—一般由內容撐開高度)
2.父級也可以是乙個浮動元素—不建議使用父級,父級高度塌陷影響布局
3.清除浮動的方法:
利用偽元素:
選擇器::after
啟用偽元素
問題2:元素掉下來
方案:1.檢視子元素是不是全部設定了浮動
2.父級的寬度是固定的,還是掉下來了,子元素的寬度太大了(padding,border)
3.父級的寬度不夠----設定寬度
問題3:卡住問題(子元素的高度,位置問題)
其他的浮動元素的高度是不是一樣,掉下來會卡住
解決問題:子元素設定高度
bfc格局
block formatting content
塊級格式化上下文
怎麼理解:
結界—形成乙個封閉空間—東西進不去出不來
表現原則:
1.乙個元素具備bfc,裡邊的元素再怎麼折騰不會影響外邊的元素(保護)
2.bfc 可以用來清除浮動
什麼時候觸發bfc格局:
1.html
2.overflow:hidden;
3.float:left/right;
4.display:inline-block;
5.position:absolute;
文件流
瀏覽器在預設情況下規定乙個塊級元素在父級元素內排列規則是:
1.從上到下
2.從左到右
3.乙個元素獨佔一行
定位:指定位置
網頁:指定乙個元素到網頁的任何乙個位置,通過定位精確的控制元素位置,定位是由偏移量的。
定位的分類:
position:relative;(相對的)
absolute;(絕對的)
fixed;(固定的)
偏移量:top bottom
left right
相對定位
relative
特點:1.有層級
2.參照沒有定位前的自己
3.佔據自己原來的位置,在原來的文件流中存在自己的位置
4.元素是兄弟關係,都是定位元素,層級後來居上(後邊的層級高)
5.不會改變元素的特性
絕對定位
absolute
特點:1.根據實際情況,選擇參照物
2.提公升層級,後來者居上,不佔據位置
3.預設參照body,參照以及定位的父級元素(參照定位了距離自己最近的父級定位)
4.不支援margin:auto;
5.支援寬高,改變元素特性
搭配使用:
和相對定位一起合作(因為相對定位不會擾亂布局)父級都是相對定位,兒子是絕對定位
固定定位
fixed
特點:1.脫離文件流
2.層級
3.不支援margin:auto;
4.改變元素特性,比如行內元素支援寬高
層級關係:只有定位才擁有z-index
z-index:數值–沒有單位
可以是正值,也可以是負值
值越大,越在上方同級元素
HTML CSS學習筆記二
在html中,標籤是乙個文本級標籤,裡面只能放文字,和表單元素。在html中,可以使用 同時,這個標籤是乙個自封閉標籤,也可以叫做單標籤。在img標籤中可以加入alt屬性,如 例如 當網頁上的無法正常顯示時,會出現 在html中,為了實現網頁之間或者網頁內錨點之間的跳轉,就必須要確定檔案之間的相對路...
html css學習筆記二
css的定義方法是 選擇器 選擇器是將樣式和頁面元素關聯起來的名稱,屬性是希望設定的樣式屬於每個屬性有乙個或者多個值。2.嵌入式 通過style標籤,在網頁上建立嵌入的樣式表。3.內聯式 通過標籤的style屬性,在標籤上直接寫樣式。常用的應用文字的css樣式 css顏色主要有三種表示方法 顏色名表...
HTML CSS基礎語法
html是web頁面的描述性語言,html也提供樣式標籤,但是使用css更好 css為html制定樣式的機制,css和js,php都可以嵌入html應用中 html hyper text markup language 字尾名,html或者.htm 瀏覽器可以解析標記 是一種程式語言 語法 1.元素...