display(block,inline,inline-block,none,inherit,flex)
display屬性每個元素都有，比如div預設屬性值block,span的預設屬性值inline
注意：inline-block可以將塊級元素變為行級元素，單需要消除magin。
對行級元素設定寬高不起作用，magin,padding都只對左右起作用。
position
在布局中很重要的因素就是定位，position 屬性就是用來定義元素的定位機制。position 的常用屬性值有：
• relative：相對定位，相對於元素本身自己的正常位置進行定位（新增left,top等以後進行偏移量定位）；
• absolute：絕對定位，相對於除 static 定位以外(有position)的父級元素進行定位如果沒有就是window視窗進行定位；
• fixed：固定定位，相對於瀏覽器視窗進行定位，**中的固定 header 和 footer 就是用固定定位來實現的；
• static：預設值，沒有定位屬性，元素正常出現在文件流中；
• inherit：繼承父元素的 position 屬性值。
上文出現了文件流（normal flow）的概念，按理來說應該翻譯成普通流，文件流是大多數人的叫法。「流」可以想象成流動的水，當我們開啟螢幕，瀏覽網頁，滾動滑鼠，網頁的內容就像是水流一樣滑過。文件流便是指從上到下，從左往右的文件布局。當我們給元素的 positon 屬性設定 absolute、fixed 時便會脫離文件流，不再遵循從上到下，從左到右的規律了。
float:浮動元素，常用的屬性有left,rigth,當沒有定義父級元素高度的時候，可能出現高度塌陷，我們清除浮動特性就用 clear:left,rigth,both都可以。
flex彈性布局
上圖便是乙個 flex 布局的大致架構了，圖中的囊括概念有幾點：
• flex 布局是一整個模組，其中父元素稱為 flex container，意為容器；子元素稱為 flex item，意為專案；
• flex 布局中有兩條看不見的軸線：主軸（main axis）和交叉軸（cross axis）。預設的主軸是平行的，交叉軸是垂直於主軸的；
• 主軸的開始位置叫 main start，結束位置叫 main end；交叉軸的開始位置叫 cross start，結束位置叫 cross end；
• 子元素在主軸方向上的大小稱為 main size，在交叉軸方向上的大小稱為 cross size。
父容器屬性：
display 屬性用來將父元素定義為 flex 布局的容器，設定 display 值為 display: flex; 容器對外表現為塊級元素；display: inline-flex; 容器對外表現為行內元素，對內兩者表現是一樣的。
• flex-direction 定義了主軸的方向，即專案的排列方向 row | row-reverse | column | column-reverse; item排列起點從左開 始，從右，從垂直上面，從垂直下面
• flex-wrap 用來定義當一行放不下時，專案如何換行。nowrap | wrap | wrap-reverse; 不換行，第一行在上，在下
• flex-flow 是 flex-direction 和 flex-wrap 的簡寫，預設值是 row no-wrap。
• justify-content 定義了專案在主軸上的對齊方式。flex-start | flex-end | center | space-between | space-around;
• align-items 定義了專案在交叉軸上對齊方式 flex-start | flex-end | center | baseline | stretch;
• align-content 定義了大批專案內容在交叉軸上對齊方式flex-start | flex-end | center | space-between | space-around | stretch;
子專案的屬性：
• order 該屬性的數字越小，那麼專案就越靠前
• flex-grow 定義了專案的放大比例，預設為 0，也就是即使存在剩餘空間，也不會放大。
如果所有專案的 flex-grow 都為 1，則所有專案平分剩餘空間；如果其中某個專案的 flex-grow 為 2，其餘專案的 flex-grow 為 1，則前者佔據的剩餘空間比其他專案多一倍。
• flex-shrink flex-shrink 定義了專案的縮小比例，預設為 1，即當空間不足時，專案會自動縮小。
• flex-basis
• flex
• align-self
前端成神之路 CSS文字文字樣式
目標 p 注意 pp常用技巧 1.各種字型之間必須使用英文狀態下的逗號隔開。2.中文字型需要加英文狀態下的引號，英文本型一般不需要加引號。當需要設定英文本型時，英文本型名必須位於中文字型名之前。3.如果字型名中包含空格 等符號，則該字型必須加英文狀態下的單引號或雙引號，例如font family t...
前端成神之路 HTML5CSS3 02
一 rotate 2d旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉 使用步驟 給元素新增轉換屬性transform屬性值為rotate 角度 如transform rotate 30deg 順時針方向旋轉30度 div 二 三角 二 設定元素旋轉中心點 transform origin tr...
css 樣式布局的問題
今天測試頁面，發現乙個奇怪的現象 乙個頁面在除了5s的所有手機上都顯示正常。而且chrome瀏覽器的適配機型裡面，也沒有5s之歌選項。導致我們現在才發現問題。具體問題表現為 頁面整體不能適配手機，雖然設定了寬度為100 整體頁面偏左，右邊留出15 左右的空白。但是乙個url破出頁面，佔據了整個螢幕。...