Day5 今天學會了CSS浮動呀!

2021-10-19 12:19:40 字數 1493 閱讀 5409

今日進度:205/528,學習了css04的浮動部分以及05開始做案例header部分

廢話不多說,開始上學習內容的截圖啦:

一、主要學習了浮動以及清除浮動的內容:

1、為什麼要有浮動?因為當兩個行內塊元素合併在一起時,中間是有縫隙的,

使用浮動屬性能夠讓它們之間沒有縫隙

2、浮動有三個特性,分別是脫標(就是能夠脫離原本的標準流);

浮動盒子一行顯示(一浮全浮,並且在寬度合適的情況下,能浮動在同一行);

浮動元素具有行內元素的特點(能一行放多個浮動)

3、浮動一般是搭配標準流父盒子一起使用的

因為標準流適合縱向布局,而浮動更適合橫向布局

4、浮動的布局練習,主要練習了三個盒子的兩種浮動的情況:

①當盒子二浮動,盒子

一、三不浮動時,

那麼盒子二會是在盒子一下方浮動,因為盒子一不浮動的話,仍然是獨佔一行的

而盒子三便會佔據盒子二原本的位置

②當盒子二不浮動,盒子

一、三浮動時,那麼盒子二是會佔據盒子一本來的位置,

而盒子三是不會與盒子一同一行的,因為盒子二因為佔據位置後,也有獨佔一行的特點

所以盒子三是會在盒子二的右下方浮動的

5、學習了現在常見的網頁布局,並且也通過案例製作出相應的網頁布局,鞏固了之前所學的知識點

6、有浮動,就會有清除浮動,為什麼?因為我們需要清除浮動的影響,有以下四種方法:

①額外標籤,就是在最後乙個浮動的盒子後面加乙個空的塊級元素,

目的是為了堵住後門,封住浮動帶來的影響,缺點是使得結構不清晰

②父元素清除法就是之前提及過知識,表示為:overfloat: hideen/srcoll/ auto

缺點無法顯示溢位的部分

③偽元素清除就是新增一道後門,是額外標籤的公升級版,

.clearfix:after 

.clearfix (為了相容ie6/7)

④雙偽元素就是既在前門加一道牆,也在後門加一道牆,雙重保險

.clearfix:before: ,.clearfix:after

.clearfix:after

.clearfix

偽元素以及雙偽元素的**是有一點點難記呀,

但是可以複製下來,有需要的時候直接copy就可以啦

這一部分主要學習了如何使用ps來進行網頁布局,非常方便的ps外掛程式小工具是cutterman。

把之前學習的知識通過真槍實戰的方式來加深記憶。

布局之前要學會分析結構,通常會結構和樣式相分離的形式,

那麼第一步就要在index中插入css樣式,

其次,不要急於求成,要一步一步地搭建好結構,隨時檢視效果,同時也要規範命名。

好了,感謝你們看到這裡,大家晚安呀!!

CSS你學會了嗎

css樣式 1 文字域內容解析換行,解析換行符 white space pre wrap 2 全域性黑白色 須在html上設定 html 3 水平垂直居中 center 水平垂直居中 span div 預設初始化樣式 body center 1 line height水平垂直居中 父節點固定px高度...

隨堂筆記day5

string判斷相不相等要使用 equals 不能使用 號 表示非,將true變成假,false變成真 username.equals kkkkkkkkk string不等於表示方式。位運算子 現將運算元據轉化為二進位制,再運算。2 1 4左位移運算子,相當於乘2操作,乘4位移2位,反之。速度快 4...

暑假測試 Day 5

時間限制 1 sec 記憶體限制 128 mb 提交 634 解決 96 提交 狀態 討論版 小可可是學校圖書館的管理員,現在他接手了乙個十分棘手的任務。由於學校需要一些材料,校長需要在文章中檢索一些資訊。校長一共給了小可可n篇文章,每篇文章為乙個字串。現在,校長需要他找到這樣的單詞,它至少在這n篇...