網頁的布局方式
1.什麼是網頁的布局方式?網頁的布局方式其實就是指瀏覽器是如何對網頁中的元素進行排版的
1.標準流(文件流/普通流)排版方式
1.1其實瀏覽器預設的排版方式就是標準流的排版方式
1.2在css中將元素分為三類, 分別是塊級元素/行內元素/行內塊級元素
1.3 在標準流中有兩種排版方式, 一種是垂直排版, 一種是水平排版
垂直排版, 如果元素是塊級元素, 那麼就會垂直排版
水平排版, 如果元素是行內元素/行內塊級元素, 那麼就會水平排版
2.浮動流排版方式
2.1浮動流是一種"半脫離標準流"的排版方式
2.2浮動流只有一種排版方式, 就是水平排版. 它只能設定某個元素左對齊或者右對齊
注意點:
1.浮動流中沒有居中對齊, 也就是沒有center這個取值
2.在浮動流中是不可以使用margin: 0 auto;
特點:1.在浮動流中是不區分塊級元素/行內元素/行內塊級元素的
無論是級元素/行內元素/行內塊級元素都可以水平排版
2.在浮動流中無論是塊級元素/行內元素/行內塊級元素都可以設定寬高
3.綜上所述, 浮動流中的元素和標準流中的行內塊級元素很像
3.定位流排版方式
浮動元素的脫標1.什麼是浮動元素的脫標?
脫標: 脫離標準流
當某乙個元素浮動之後, 那麼這個元素看上去就像被從標準流中刪除了一樣, 這個就是浮動元素的脫標
2.浮動元素脫標之後會有什麼影響?
如果前面乙個元素浮動了, 而後面乙個元素沒有浮動 , 那麼這個時候前面乙個元就會蓋住後面乙個元素
浮動元素的排序規則
1.浮動元素排序規則
1.1相同方向上的浮動元素, 先浮動的元素會顯示在前面, 後浮動的元素會顯示在後面
1.2不同方向上的浮動元素, 左浮動會找左浮動, 右浮動會找右浮動
1.3浮動元素浮動之後的位置, 由浮動元素浮動之前在標準流中的位置來確定
浮動元素貼靠現象
1.什麼是浮動元素貼靠現象?
1.如果父元素的寬度能夠顯示所有浮動元素, 那麼浮動的元素會併排顯示
2.如果父元素的寬度不能顯示所有浮動元素, 那麼會從最後乙個元開始往前貼靠
3.如果貼靠了前面所有浮動元素之後都不能顯示, 最終會貼靠到父元素的左邊或者右邊
浮動元素字圍現象
1.什麼是浮動元素字圍現象?
浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現象
1.企業開發中什麼時候使用標準流什麼時候使用浮動流?
垂直方向使用標準流, 水平方向使用浮動流
2.拿到乙個很複雜的介面如何入手?
2.1從上至下布局
2.2從外向內布局
2.3水平方向可以先劃分為一左一右再對左邊或者右邊進行進一步布局
浮動元素高度問題
1.在標準流中內容的高度可以撐起父元素的高度
2.在浮動流中浮動的元素是不可以撐起父元素的高度的
清除浮動
定義乙個類.clear:after
1.清除浮動的第一種方式給前面乙個父元素設定高度
注意點:
在企業開發中, 我們能不寫高度就不寫高度, 所以這種方式用得很少
1.清除浮動的第二種方式
給後面的盒子新增clear屬性
clear屬性取值:
none: 預設取值, 按照浮動元素的排序規則來排序(左浮動找左浮動, 右浮動找右浮動)
left: 不要找前面的左浮動元素
right: 不要找前面的右浮動元素
both: 不要找前面的左浮動元素和右浮動元素
注意點:
當我們給某個元素新增clear屬性之後, 那麼這個屬性的margin屬性就會失效
1.清除浮動的第三種方式
隔牆法2.外牆法
2.1在兩個盒子中間新增乙個額外的塊級元素
2.2給這個額外新增的塊級元素設定clear: both;屬性
注意點:
外牆法它可以讓第二個盒子使用margin-top屬性
外牆法不可以讓第乙個盒子使用margin-bottom屬性
3.內牆法
3.1在第乙個盒子中所有子元素最後新增乙個額外的塊級元素
3.2給這個額外新增的塊級元素設定clear: both;屬性
注意點:
內牆法它可以讓第二個盒子使用margin-top屬性
內牆法它可以讓第乙個盒子使用margin-bottom屬性
4.外牆法和內牆法區別?
外牆法不能撐起第乙個盒子的高度, 而內牆法可以撐起第乙個盒子的高度
5.在企業開發中不常用隔牆法來清除浮動
偽元素選擇器
1.什麼是偽元素選擇器?
偽元素選擇器作用就是給指定標籤的內容前面新增乙個子元素或者給指定標籤的內容後面新增乙個子元素
2.格式:
標籤名稱::before
給指定標籤的內容前面新增乙個子元素
標籤名稱::after
給指定標籤的內容後面新增乙個子元素
1.清除浮動的第四種方式
利用偽元素選擇器清除浮動
本質上就是內牆法, 只不過是直接通過css**新增了內牆, 其它特性和內牆法都一樣
注意點:
ie6中不支援這種方式, 為了相容ie6必須給前面的盒子新增*zoom:1;屬性
清除浮動方式五
1.overflow: hidden;作用
1.1可以將超出標籤範圍的內容裁剪掉
1.2清除浮動
1.3可以通過overflow: hidden;讓裡面的盒子設定margin-top之後, 外面的盒子不被頂下來
定位流
定位流1.定位流分類1.1相對定位
1.2絕對定位
1.3固定定位
1.4靜態定位
2.什麼是相對定位?
相對定位就是相對於自己以前在標準流中的位置來移動
3.相對定位注意點
3.1相對定位是不脫離標準流的, 會繼續在標準流中占用乙份空間
3.2在相對定位中同乙個方向上的定位屬性只能使用乙個
3.3由於相對定位是不脫離標準流的, 所以在相對定位中是區分塊級元素/行內元素/行內塊級元素
3.4由於相對定位是不脫離標準流的, 並且相對定位的元素會占用標準流中的位置, 所以當給相對定位的元素設定margin/padding等屬性的時會影響到標準流的布局
4.相對定位應用場景
4.1用於對元素進行微調
4.2配合後面學習的絕對定位來使用定位流-絕對定位1.什麼是絕對定位?
絕對定位就是相對於body來定位
2.絕對定位注意點
2.1絕對定位的元素是脫離標準流的
2.2絕對定位的元素是不區分塊級元素/行內元素/行內塊級元素絕對定位-參考點1.規律
1.預設情況下所有的絕對定位的元素, 無論有沒有祖先元素, 都會以body作為參考點
2.如果乙個絕對定位的元素有祖先元素, 並且祖先元素也是定位流, 那麼這個絕對定位的元素就會以定位流的那個祖先元素作為參考點
2.1只要是這個絕對定位元素的祖先元素都可以
2.2指的定位流是指絕對定位/相對定位/固定定位
2.3定位流中只有靜態定位不行
3.如果乙個絕對定位的元素有祖先元素, 並且祖先元素也是定位流, 而且祖先元素中有多個元素都是定位流, 那麼這個絕對定位的元素會以離它最近的那個定位流的祖先元素為參考點絕對定位-注意點1.如果乙個絕對定位的元素是以body作為參考點, 那麼其實是以網頁眉屏的寬度和高度作為參考點, 而不是以整個網頁的寬度和高度作為參考點
2.乙個絕對定位的元素會忽略祖先元素的padding絕對定位-子絕父相相對定位弊端:
相對定位不會脫離標準流, 會繼續在標準流中占用乙份空間, 所以不利於布局介面
絕對定位弊端:
預設情況下絕對定位的元素會以body作為參考點, 所以會隨著瀏覽器的寬度高度的變化而變化
子絕父相
子元素用絕對定位, 父元素用相對定位絕對定位-水平居中1.如何讓絕對定位的元素水平居中
只需要設定絕對定位元素的left:50%;
然後再設定絕對定位元素的 margin-left: -元素寬度的一半px;定位流-固定定位1.什麼是固定定位?
固定定位和前面學習的背景關聯方式很像, 背景定位可以讓背景不隨著滾動條的滾動而滾動, 而固定定位可以讓某個盒子不隨著滾動條的滾動而滾動
注意點:
1.固定定位的元素是脫離標準流的, 不會占用標準流中的空間
2.固定定位和絕對定位一樣不區分行內/塊級/行內塊級
3.ie6不支援固定定位定位流-z-index屬性1.什麼是z-index屬性?
預設情況下所有的元素都有乙個預設的z-index屬性, 取值是0.
z-index屬性的作用是專門用於控制定位流元素的覆蓋關係的
1.預設情況下定位流的元素會蓋住標準流的元素
2.預設情況下定位流的元素後面編寫的會蓋住前面編寫的
3.如果定位流的元素設定了z-index屬性, 那麼誰的z-index屬性比較大, 誰就會顯示在上面
注意點:
1.從父現象
1.1如果兩個元素的父元素都沒有設定z-index屬性, 那麼誰的z-index屬性比較大誰就顯示在上面
1.2如果兩個元素的父元素設定了z-index屬性, 那麼子元素的z-index屬性就會失效, 也就是說誰的父元素的z-index屬性比較大誰就會顯示在上面
html css筆記總結
完整的html結構 樣式的引用 一。內部編寫 哈,我是乙個帥哥 是不是哦，我暈你 我看看行不行。執行結果為 哈我是乙個帥哥 是不是哦，我暈你 我看看行不行。解釋 哈我是乙個帥哥 用的是absolute 絕對定位，它相對於第乙個div來定位，因為第乙個div是它的父級元素，將它包含在裡面。所以它出現在...
HTML CSS基礎總結
自學html和css，學習 為慕課網和w3school。html裡較為容易忘記的有以下 1，html的宣告如下 在xhtml中 宣告如下 html5中最簡便 2.html標籤 表示強調，斜體 表示更強烈的強調，粗體 短文本引用，長文字引用。輸入空格的方法 標籤引入文字 為橫線，預設灰色。一行 多行 ...
html css基礎總結
總結 常用的標籤 標題 段落粗體斜體 上標下標換行符 水平線加粗強調斜體引用 空格列表 有序列表 無序列表 定義列表 標籤 target blank 表示在新的視窗開啟預設 self 格式 jpg png gif h5中的語義標籤圖形和圖形說明 行 標題單元格 屬性 colspan跨列 rowspa...