前端html跟css快速複習-tft每日頭條

前端html跟css快速複習

生活更新时间:2025-08-16 11:57:16

　好程序員web前端培訓之CSS基礎知識之position

前端html跟css快速複習（好程序員web前端培訓之CSS基礎知識之position）1

好程序員

CSS定位機制

标準文檔流(Normal flow)

浮動定位(Floats)

絕對定位(Absolute positioning)

标準文檔流

從上到下，從左到右，輸出文檔内容

由塊級元素和行級元素組成

塊級元素

從左到右撐滿頁面，獨占一行

觸碰到頁面邊緣時，會自動換行

常見的标簽有：div、ul、li、di、dt、p

行級元素

能在同一行内顯示

不會改變HTML文檔結構

常見的标簽有：input、span、label、strong、img

盒子模型

邊框(border)

外邊距(margin)

内邊距(padding)

盒子中的内容(content)

盒子模型尺寸=邊框外邊距内邊距盒子中内容的尺寸

盒子3D模型

第一層：border

第二層：content padding

第三層：background-image

第四層：background-color

第五層：margin

浮動定位

三個屬性：left(左浮動)、right(右浮動)、none(不浮動)

元素會左移、或右移、直到碰到容器為止

仍處于标準文檔流中

清除浮動的常用方法

clear屬性，常用clear:both;(當父包含塊縮成一條時無效)

同時設置width:100%(或固定寬度) overflow:hidden;

相對定位

相對于自身原有位置進行偏移

仍處于标準文檔流中

随即擁有偏移屬性和z-index屬性

絕對定位

建立了以包含快為基準的定位

完全脫離了标準文檔流

随即擁有偏移屬性和z-index屬性

絕對定位-偏移參考基準

無已定位祖先元素，以為偏移參考基準

有已定位祖先元素，以距其最近的已定位祖先元素為偏移參考基準

絕對定位-未設置偏移量

無論是否存在已定位的祖先元素，都保持在元素初始位置

脫離了标準文檔流

絕對定位-常見問題

沒有設置寬度時，元素的寬度根據内容進行調節

左右布局時，柱子層的高度，一定要大于絕對定位元素的高度

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部

网友关注

生活已固化環氧彩砂用什麼清洗
已固化環氧彩砂用什麼清洗?可用酒精、白醋等清洗因為其屬于有機物，而白醋和酒精可以溶解大部分的有機物，溶解之後再用其他工具擦洗幹淨就可以了如果覺得溶解時間比較慢，可以先用打磨紙把已固化的先磨掉一些，再用鏟刀慢慢刮掉即可，我來為大家科普一下關于... 2022-06-20
生活菜窩窩頭的家常做法
菜窩窩頭的家常做法?先将菠菜清洗幹淨焯水菠菜剁碎，胡蘿蔔刨成細絲将菠菜碎和胡蘿蔔絲一起放在幹淨的盆中，接下來我們就來聊聊關于菜窩窩頭的家常做法?以下内容大家不妨參考一二希望能幫到您!菜窩窩頭的家常做法先将菠菜清洗幹淨焯水。菠菜剁碎，胡蘿蔔刨... 2022-06-13
生活準提咒晚上不能念
準提咒晚上不能念?準提咒随時随地可以念的，晚上也能念佛菩薩是善護衆生的不會因為你晚上念經咒就如何的，可以放心隻要恭敬真誠，在潔淨地，正襟危坐,誰都可以念佛經，念咒語，但不能躺着，歪坐着讀隻要不打擾别人，就沒有時間限制佛法是一分誠敬得一分利益... 2022-06-08
生活韓甜甜蒙面唱将哪一期
韓甜甜蒙面唱将哪一期?《蒙面唱将》韓甜甜出場是第三期和第四期節目，具體播出時間是2019年10月27日和11月3日韓甜甜當時以“一口吃不成個胖子”的身份來到舞台，舞台上她合作二二二師兄（關喆）帶來了歌曲《孤獨患者》，合作肥貓偵探（溫岚）帶來... 2022-06-05
生活馬自達昂克賽拉2022款中配
這一代馬自達昂克賽拉性情大變，取消四輪獨懸，将後懸架換成扭力梁非獨立懸架，雖然弱化了乘坐舒适性，但是後扭力梁非獨立懸架，卻讓它在家族車型中自成一派，成為一款為運動而生的日系車。新款昂克賽拉價格優惠力度較大，入門車型跌到10.79萬元，是一款... 2023-02-14
生活怎樣辨别牛欄山是真的還是假的
加局長好友（V:haojiujz），拉你進酒友群上期局長給大家介紹如何鑒别真假茅台，引起了衆酒友熱議，光是轉發量就高達1萬，也有酒友私信局長，能不能給大夥鑒别平民酒、口糧酒？比如牛欄山，牛欄山是非常受歡迎的一款白酒，價格便宜，銷量之高，自然... 2023-03-28
生活網購什麼花卉比較好
現在無論年輕的還是年老的，都喜歡從網上購買東西。包括我們現在的花卉也是從網上購買。并不是說網上買東西不好，其實網上購買花卉一定要擦亮眼睛，因為我們見不到實物，隻能通過圖片去購買，往往看着圖片好看，買回來的東西是不對版的。最後你買到假貨你又不... 2023-02-15
生活中方回應斯裡蘭卡債務減免
斯裡蘭卡财政部4月12日發布消息稱，斯裡蘭卡政府決定在完成債務重組前，暫時中止償還所有外債。聲明表示，斯裡蘭卡一直保持着良好的償債記錄，但受新冠疫情及俄烏沖突的影響，斯政府目前已無力正常地償還外債，因此不得不進行債務重組。根據斯裡蘭卡中央銀... 2023-03-04
生活怎麼買到合适的牛仔褲
立秋了，快要穿牛仔褲了！牛仔褲這種東西真的太抗打，從我有記憶力起就有男女老少在穿，現在依舊是男女老少的必備。這兩年，複古的媽媽仔褲時髦到不行，牛仔褲一下從基本款成了時髦尖兒貨。說到牛仔褲品牌，知名的有很多，JBrand、7forallman... 2023-02-17
生活每天一局dota
不到四天，一千萬美金。這是Dotaer創造的奇迹。這同樣也是Ti賽事史上最快突破千萬獎金的一年。Ti賽事起源于2011年，至今已逾八屆。迄今為止，Ti賽事仍是國際上舉辦過的獎金最高的電競賽事。在這一賽事中，DOTA2通過成績證明了自己，簡簡... 2023-02-05
生活紮克伯格有多少身價
北京時間9月20日消息，臉書母公司MetaCEO馬克·紮克伯格(MarkZuckerberg)押注元宇宙的策略，已經讓他在現實世界中付出了高昂代價。盡管幾乎所有美國科技巨頭都經曆了艱難的一年，但是紮克伯格的财富大縮水依然引人注目。今年到目前... 2023-01-25
生活答司馬谏議書内容概要簡短
答司馬谏議書内容概要簡短?一、識記字音強聒(guō)鹵莽(lǔ)壬人(rén)，下面我們就來說一說關于答司馬谏議書内容概要簡短?我們一起去了解并探讨一下這個問題吧!答司馬谏議書内容概要簡短一、識記字音強聒(guō)鹵莽(lǔ)壬人(rén)... 2022-10-22
生活仙劍裡出現過女娲嗎
女娲在仙劍世界的地位可謂至關重要，雖然是一個死了很久的背景闆，但女娲後人的貫穿于仙劍一、二、三、三外、五，整整五代仙劍，甚至不少人眼裡，無女娲後人不仙劍。但是我們也要知道，仙劍的世界觀是大改過好幾次的，一、二是同一個世界觀，三四是同一個，五... 2023-03-17
生活廈貝壁挂爐爐底接口
相比空調、電暖器，燃氣壁挂爐采暖舒适、穩定又節能，還能同時供應生活熱水，如今已成為衆多家庭的采暖選擇。然而在購買壁挂爐時，功率的選擇成了很多新用戶糾結的問題。壁挂爐功率應該如何選？是否功率越大采暖效果就越好呢？要弄懂這個問題，首選需要明白功... 2023-03-05
生活 x趨向無窮sinx的極限是什麼
sinx/x的極限x趨近于0，結果等于1。這是第一個重要極限，你可能每天都在用，因為它在高等數學中的應用非常廣泛，用得特别多，但你對它的了解有多少？真正了解它了嗎？這個極限用極限的定義非常麻煩。所以一般都是用夾逼定理，又稱為極限的迫斂性來證... 2022-12-15
生活孕期經常吃甜食糖篩能過嗎
之前整理了兩篇關于孕期飲食禁忌的文章，主要是想提醒孕媽媽要注意飲食，因為的确有不注意飲食，而生完孩子後後悔的媽媽；再次重申一下，不是不讓大家吃，是要少吃，我在整理的時候也特别說明了什麼樣的孕媽媽要少吃，希望孕媽媽正視飲食問題；因為我深刻知道... 2023-02-19
生活過敏性紫癜第四次複發
作者：徐佳（血液内科）編輯：Suzy審核：丁丁, 2022-12-09
生活浴缸水垢去除最好方法
浴缸水垢去除最好方法?浴室淋浴房是大家日常生活中與水接觸的重要場所，浴缸的水與池壁經常接觸，水會析出一部分碳酸鈣、鎂，就會産生水垢不僅池壁上結起黃色水垢，壁邊泛起白色水漬，通水管道和出水口也會因為水垢造成堵塞澳漬麗知道大家都有這樣的困擾：浴... 2023-03-22
生活和平精英的解鎖戰令獎勵
微視現在正在進行迎春嘉年華，集令牌可以兌換大獎，和平精英和王者榮耀玩家參與收集精英令和英雄令可以獲得免費永久皮膚等獎勵，那麼自己一個人怎麼刷令牌？下面小編就為大家帶來解答：以和平精英收集精英令為例針對微視一系列改活動規則之後活動如何獲得稀有... 2023-01-17
生活特大型建設項目
作為“潮湧浦江”投資上海全球分享季的壓軸活動，“潮湧浦江”活動成果總結暨重特大項目發布活動今天（9月20日）上午在位于虹口北外灘的世界會客廳舉行。上海市委書記李強發布“潮湧浦江”投資上海全球分享季系列活動成果。市委副書記、市長龔正啟動8個重... 2022-12-09
生活康熙幾歲寫天下第一福的故事
相傳康熙皇帝得了一種怪病，宮中禦醫把所有的名貴藥材都用遍了，就是不見病情好轉，他一怒之下停止了用藥。這天，康熙獨自出宮微服夜遊，來到一條街上，發現有一個小藥鋪。此時，已是夜深人靜，小藥鋪裡卻燈火通明，還聽到那裡傳來讀書聲。康熙心想，宮中禦醫... 2023-02-14
生活蔣大為是個什麼樣的人
著名歌唱藝術家蔣大為含沙射影批評“大衣哥”朱之文作秀、“就是個農民”，引起廣泛的關注和讨論。蔣大為的言行引起大家反感，義正言辭的網友對他提出靈魂的拷問：你的老婆孩子都轉成了外國國籍，你在國内撈金國外消費？你有沒有為家鄉、為公益捐過錢，到底捐... 2023-03-19
生活網球肘能不能治得好
今天來談談網球肘的治療。還不知道“網球肘”？網球肘雖然不算什麼了不起的大病，但是對我們的日常生活影響還是挺大的，比如擰毛巾都會疼這一件事就夠讓人心煩的。更不用說嚴重的還會痛不能寐。我在門診也多次遇到過痛到必須抱着胳膊、精神焦慮的患者。網球肘... 2023-01-22
生活注冊資金填寫多少合适
随着現行商事制度的改革，一家公司跑10多個部門的登記早已消失，公司登記變得越來越簡單，但公司登記時需要填寫的内容很多。特别是一家公司的注冊資本吸引了很多朋友的關注。說到資本，很多朋友都會覺得很重要，所以公司的注冊資本應該填多少才合适？一、公... 2023-01-05
生活酸蘿蔔的簡單腌制非常的下飯好吃
愛吃酸蘿蔔要收藏，教你快速腌制方法，酸爽脆甜，兩個小時可吃到酸蘿蔔是我們生活中很常見的一種美食，它那種脆爽酸甜的味，可以直達心底，讓人胃口大開。酸蘿蔔老鴨，酸蘿蔔炒肉，酸蘿蔔蘸辣椒，都是非常好吃的。很多人喜歡酸蘿蔔，但是不知道怎麼腌制，或者... 2022-11-13
生活吳奇隆和劉詩詩的年齡有多大
很多未婚的年輕人每次一回家都要接受父母的逼婚，你什麼時候談戀愛，你看看人家二胎都有了。工作不指望你幹的多好，你起碼找個對象吧。對你的要求不高吧。這幾句話想必是很多父母的口頭禅。身為被逼婚的我們同樣也很無奈，生活節奏這麼快，談戀愛很容易麼。有... 2022-11-01
生活最新廣州新城消息
記者|吳容編輯|許悅12月23日，新鴻基地産在廣州南站核心區地塊舉行廣州環球貿易廣場（以下簡稱“環貿廣場”）項目動工儀式。8個月前，該地塊以70.82億元人民币的高價被新鴻基地産投得，項目将采用綜合TOD模式，總建築面積超150萬平方米，包... 2022-11-13
生活 buckboost電路的優點
基于Buck-Boost的非隔離型雙向半橋DCDC變換器結構上比起隔離型的雙向DCDC變換器結構簡單，沒有變壓器，功率開關器件數目相對較少，操控方式較容易，通過全控型開關器件的反并聯二極管最終實現能量雙向流動，進而可以節省構建變換器的材料，... 2023-03-19
生活明星從小愛喝哪種飲料
來源：齊魯晚報9月8日，曾出演過《人民的名義》趙瑞龍一角的演員馮雷，發布了一段視頻視頻裡他稱：買了一瓶飲料，發現配料表上竟标注有200多種配料，讓人吃驚。視頻顯示，配料表包含了各種水果、蔬菜甚至香蔥、花椒等。其配料表占據了大半個瓶身。關于飲... 2022-12-24
生活滿江紅嶽飛中最經典的詩句
滿江紅·寫懷南宋·嶽飛怒發沖冠，憑欄處、潇潇雨歇。擡望眼、仰天長嘯，壯懷激烈。三十功名塵與土，八千裡路雲和月。莫等閑、白了少年頭，空悲切。狼煙起江山北望嶽飛靖康恥，猶未雪。臣子恨，何時滅。駕長車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血... 2023-03-07

tft每日頭條

> 生活

> 前端html跟css快速複習

前端html跟css快速複習

相关生活资讯推荐

热门生活资讯推荐

网友关注