Day7前端學習之路 多欄布局

2022-05-04 11:45:10 字數 1593 閱讀 8321

該文章主要討論兩欄布局和三欄布局,三欄布局包括很著名的聖杯布局和雙飛翼布局

原理:基本樣式布局為:兩個盒子相距20px,左側盒子寬度為120px,右側盒子寬度自適應

<

div

class

id>

<

div

class

="left"

>

左邊固定寬度,高度不固定

br>

br>

br>

br>

高度有可能會很小,也可能很大。

div>

<

div

class

="right"

>

這裡的內容可能比左側高,也可能比左側低。寬度需要自適應。

br>

基本的樣式是,兩個div相距20px, 左側div寬 120px

div>

div>

}.left .right

1.1 雙inline-block方案

font-size:14px;box-sizing:border-box;

}補充知識:

簡而言之,設定box-sizing為content-box,那麼盒子的可繪製區域(即為設定的寬度和高度)僅包括內容,不包括他的邊框和內邊距,如果繪製內邊距和邊框,均會在設定的寬度和高度之外繪製;

設定box-sizing為border-box,那麼盒子的可繪製區域(即設定的寬度和高度)包括內邊距+邊框+內容。

1.2 雙float方案

動態計算寬度實現自適應,由於浮動的block元素在有空間的情況下會依次緊貼,排列在一排

box-sizing:content-box;

}1.3 float+margin-left方案

}1.4 absolute+margin-left方法}}

1.5 float+bfc方法

}1.6 flex方案

}flex容器的乙個預設屬性值:align-items: stretch;。這個屬性導致了列等高的效果。

為了讓兩個盒子高度自動,需要設定:align-items: flex-start;

1.7 grid方案

}聖杯布局和雙飛翼布局:

2.1 絕對定位法

2.2 margin負值法

2.3 自身浮動法

前端學習Day7

一.padding的用法 1 padding是長在內容和盒子之間的,在盒子內部。2 padding是為了調整 子元素 在 父元素裡面位置關係。3 padding的特點 padding值會把盒子撐大。4 如果想讓盒子保持原有大小,需要在寬高的基礎上減掉padding值。5 給單一方向設定padding...

機器學習基礎DAY7

第七章 決策樹與隨機森林 決策樹思想的 非常樸素,程式設計中的條件分支結構就是if then結構,最早的決策樹就是利用這類結構分割資料的一種分類學習方法 1.資訊增益 特徵a對訓練資料集d的資訊增益g d,a 定義為集合d的資訊熵h d 與特徵a給定條件下d的資訊條件熵h d a 之差,即公式為 注...

python學習總結day7

01變數的引用 02可變和不可變型別 03區域性變數和全域性變數 01返回值 如果函式返回的型別是元組,小括號可以省略 當看到返回型別沒有小括號時,一定要知道返回的型別是元組 如果函式返回的型別是元組,同時希望單獨的處理元組中的元素,可以使用多個變數,一次接收函式的返回結果,變數與變數之間用逗號分隔...