這一節就是學布局了。
盒子模型是css布局的基礎,css假定每個元素都會生成乙個或多個矩形框,每個元素框中心都有內容框content,內邊距padding,邊框border和外邊距margin,這些預設為0.盒子模型根據瀏覽器具體實現可分為w3c標準盒子模型和ie盒子模型,這兩種盒子模型在寬度和高度的計算不一致,wxss完全遵守w3c盒子模型規範。
元素按照顯示方式分為塊級元素和行內元素。我們可以通過display設定屬性為block,將乙個元素強制設定為塊級元素,設定屬性inline,將乙個元素強制設定為行內元素。
塊級元素舉例
第乙個塊級元素
第二個塊級元素
第二個塊級元素其他資訊
塊級元素
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
結果圖
行內元素,,盒子模型中的高度,寬度,上下margin,上下padding設定均無效,只能設定左右margin和padding。
行內元素舉例
前面的文字元素元素元素元素元素元素元素元素元素後面的文字
行內塊元素
行內塊元素是行內元素和塊級元素的混合,當display設定為inline-block時,元素就被設定為了乙個行內塊元素,行內塊元素可以設定寬,高,內邊距和外邊距,可以簡單認為行內塊元素就是把塊級元素以行的形式展現,保留了塊級元素對寬,高,內邊距,外邊距的設定,就是一張圖放在文字行中。
前面的文字行內塊元素行內塊元素行內塊元素行內塊元素後面的文字
前面的文字行內塊元素後面的文字
浮動和定位以及flex布局三種布局方案
浮動
其他元素
浮動框其他元素
浮動框其他元素
浮動框.clearfix:after
定位
文字文字relative文字文字文字文字文字文字文字
文字文字absolute文字文字文字文字文字文字文字
文字文字absolute不設定包含塊文字文字文字文字文字文字文字
文字文字fixed文字文字文字文字文字文字文字
flex布局
flexible box的縮寫,即彈性盒子布局,wxss對其進行了實現,專案可以隨意使用。
小程式開發之 前端開發 學習第三節 二
flex布局 flex布局主要由容器和專案構成。採用flex布局的元素,稱為flex容器 flex container 它的所有直接子元素自動成為容器成員,稱為flex專案 flex item 可以通過設定display flex或display inline flex將任何乙個元素指定為flex布...
第三節 前端開發基礎 HTML
初級拓展 1 測驗 完成測驗 2 實踐 完成例項 中的 html例項 在執行實驗 時,需要了解其含義,並嘗試修改每乙個例項相關的元素 標籤 屬性 內容 3 了解html實體 1 了解html實體 2 掌握html預留字元 即 的實體編碼和實體名稱。高階拓展 1 熟悉html的常見的事件屬性 1 了解...
Python學習筆記 第三節
算術運算子 就是我們常用的 兩個物件相加 也可以用來字串的連線 兩個數相減 得到的數可以是負值 兩個數做乘法運算,或者將乙個字串重複幾次 兩個數做除法運算,需要注意 在python2版本裡邊,兩個相除,得到的也是整數,如果想要得到浮點數,只要把其中乙個數變為浮點數就好 例程環境 python 3 冪...