萌新學習一星期HTML和CSS的收獲

什么是HTML

HTML 是用來描述網(wǎng)頁的一種語言。
HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言,而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網(wǎng)頁
HTML 文檔包含了HTML 標簽及文本內(nèi)容
HTML文檔也叫做 web 頁面

以上基礎(chǔ)內(nèi)容簡單易懂,有手就行,其他相關(guān)內(nèi)容可以自行去 菜鳥教程學習
本人熱愛html和css技術(shù),經(jīng)過一周不斷的學習學會了各種技術(shù)和解決問題的思路和方法,學習了盒模型和浮動,可以自己構(gòu)建網(wǎng)頁的布局,接著遇到了高度塌陷的問題,并通過學習尋找到了解決方式。這里簡單介紹一下解決的方案。

高度塌陷的解決方案

1.將元素的overflow設(shè)置為一個非visible的值(推薦hidden和auto),此方法可以開啟元素的BFC屬性,解決高度塌陷的問題。(其中IE6瀏覽器不兼容此種方法,因此我們可以將元素的zoom設(shè)置為1,開啟IE6中元素屬性HasLayout從而解決問題)
2.再學習了浮動的知識后,可以發(fā)現(xiàn)更多解決高度塌陷的方法

  • 我們可以用clear清除浮動對當前元素的影響,所以在一個元素浮動脫離文檔流時我們可以在高度塌陷的最后添加一個空白的div由于這個div沒有浮動所以可以完全撐開父元素的高度,對其清除浮動可解決高度塌陷的問題(該方法基本無副作用,但卻在頁面中添加了一個無意義的空白div,我們知道html負責頁面結(jié)構(gòu)而css負責頁面樣式,這是不合理的,所以我們希望通過css用該思路來解決該高度塌陷的問題問題)
  • 我們考慮到css中有一個樣式為after,用這個樣式可以在元素后加入內(nèi)容且無法選中,因此我們可以用這個樣式完成高度塌陷問題的最優(yōu)解如下:
.box:after{content="";
           display:block;
           clear:both}          

所以通過after偽類向元素最后添加一個空白塊元素進行清除浮動可最終解決高度塌陷的問題(IE6不支持這種方法,所以老老實實使用zoom:1;即可)

這是本人第一次用markdown編寫博客,希望和大家一起探討和解決一些關(guān)于前端的常見問題和解決方案,希望大家多多支持,在大學生活里不斷學習,不斷進步!!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.BFC是什么? 塊級格式化上下文,指頁面中的一個渲染區(qū)域,并且擁有一套渲染原則。 如何觸發(fā)BFC (1)設(shè)置f...
    有只Bug閱讀 231評論 0 0
  • <a name='html'>HTML</a> Doctype作用?標準模式與兼容模式各有什么區(qū)別? (1)、<...
    clark124閱讀 3,808評論 1 19
  • 前端開發(fā)面試題 <a name='preface'>前言</a> 只看問題點這里 看全部問題和答案點這里 本文由我...
    自you是敏感詞閱讀 899評論 0 3
  • 目錄 Day01標簽行元素 Day02表單元素css選擇器偽類選擇符行內(nèi)元素塊元素表格 Day03文本相關(guān)屬性列表...
    Moquyun閱讀 587評論 0 0
  • 前端開發(fā)面試題 面試題目: 根據(jù)你的等級和職位的變化,入門級到專家級,廣度和深度都會有所增加。 題目類型: 理論知...
    怡寶丶閱讀 2,670評論 0 7

友情鏈接更多精彩內(nèi)容