盒子模型 box-sizing
box-sizing有3個值，content-box(預設值) | border-box | inherit
content-box值代表的意思是：元素的內容的width和height決定了元素的寬高，padding和border無論多少都不影響元素的寬高，它是由內容的width和height值決定的。在這裡元素的寬高和元素內容的寬高一樣的
border-box值代表的意思是：元素的內容，元素的border，padding一起來決定元素的寬高。直白點說，就是他們是相互制約的，元素內容的寬高變化了，border和padding沒變，那元素的寬高也會變。如果padding變了，其他都沒變，那元素的寬高也會變。在這裡元素的寬高=元素內容寬高+padding+border彈性布局 flex
建立乙個flex容器
為此要給元素設定display:flex 為保相容性safari和chrome要帶上字首-webkit-
.flexcontainer
flex專案顯示
flex專案是flex容器的子元素，他們主要是沿著主軸定位，預設是沿著水平軸排列一行，如果要改變主軸的方向，flex容器可以使用flex-direction:column 設定為沿著豎軸排列 flex-direction預設值是row 水平軸排列
flex專案移動到頂部
要將flex專案移動到頂部，取決於主軸的方向，如果主軸是水平軸，flex容器使用justify-content設定，如果是豎軸使用align-items設定
移動到底部，左邊右邊，方法是一樣的
flex專案垂直居中
flex容器設定為justify-content：center 以及 align-items：center
flex專案自動伸縮
需要給每個flex專案設定自動伸縮的值，.bigitem .smallitem
CSS 3 盒子模型
盒子模型解釋 元素在頁面中顯示成乙個方塊，類似乙個盒子，css盒子模型就是使用現實中盒子來做比喻，幫助我們設定元素對應的樣式。盒子模型示意圖如下 把元素叫做盒子，設定對應的樣式分別為 盒子的寬度 width 盒子的高度 height 盒子的邊框 border 盒子內的內容和邊框之間的間距 paddi...
CSS3盒子模型
2.1.2 內容區 2.1.3 邊框 border color 邊框顏色 border style 邊框樣式，也可以指定不同方向的邊框的樣式 2.1.4 內邊距 2.1.5 外邊距 通常左外邊距和上外邊距會移動自身，右外邊距和下外邊距會移動其他元素 2.2.1 水平布局 乙個元素在父元素中，水平布局...
CSS （3）盒子模型
盒模型 盒子模型 框模型 box model css將網頁的所有元素都設定為乙個矩形的盒子 將元素設定為矩形的盒子後，對頁面的布局就變成將不同的盒子擺放到不同的位置 每乙個盒子都由以下幾個部分 內容區 content 內邊距 padding 邊框 border 外邊距 margin 內容區 cont...