該文章主要討論兩欄布局和三欄布局,三欄布局包括很著名的聖杯布局和雙飛翼布局
原理:基本樣式布局為:兩個盒子相距20px,左側盒子寬度為120px,右側盒子寬度自適應
<}.left .rightdiv
class
id>
<
div
class
="left"
>
左邊固定寬度,高度不固定
br>
br>
br>
br>
高度有可能會很小,也可能很大。
div>
<
div
class
="right"
>
這裡的內容可能比左側高,也可能比左側低。寬度需要自適應。
br>
基本的樣式是,兩個div相距20px, 左側div寬 120px
div>
div>
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返回值 如果函式返回的型別是元組,小括號可以省略 當看到返回型別沒有小括號時,一定要知道返回的型別是元組 如果函式返回的型別是元組,同時希望單獨的處理元組中的元素,可以使用多個變數,一次接收函式的返回結果,變數與變數之間用逗號分隔...