背景設定
屬性作用
background-size
背景圖的大小，cover,contain
background-repeat
平鋪background-position
背景的位置
background-origin
對齊方式
object-fit
可以使適應背景的大小
box-sizing
在用padding和border時不會撐大盒子
3. 盒子模型
屬性作用
padding
盒子的內邊距，方向：上右下左
margin
盒子之間的距離
border
邊線border-radius
邊角的弧度，50%為圓形
opacity
透明度，0~1
box-shadow
陰影display
inline轉換為行內元素，block轉化為塊級元素
3. float 浮動，使塊級元素可以同行顯示
屬性作用
float
浮動，left、right浮動方向
clear
left清除左邊的附佛那個元素
overflow
hidden解決高度塌陷
4. position 定位
屬性作用
static
預設定位，既在文件流中的位置
relative
相對定位，可以用margin:auto實現居中，和絕對定位配合作為定位基準點
absulote
絕對定位，脫離文件流，float也會脫離文件流
fixed
固定定位，一般在瀏覽器的頭部，可以設定z-index來使其不被覆蓋
5. flex 響應式定位
屬性作用
display:flex
響應式定位，不會高度塌陷
flex-wrap
當寬度不足時是否換行，wrap表示換行
justify-content
水平對齊方式，center居中，space-around左右等距，space-between左右對齊，中間等距
align-items
垂直對齊，flex-end底部對齊,center居中對齊
flex-direction
設定主軸方向，預設為row橫向
flex
設定子元素的權重，例：flex:1;
CSS基礎布局
一 瀏覽器如何解析css 三種引用樣式表 1 嵌入式 2 style標籤 3 外部css檔案 二 盒模型 html中每乙個塊元素基本上都可以看成乙個盒子，這個盒子的寬和高，外加內邊距 邊框粗細和外邊距這些東西，決定了元素的尺寸。如果定義了乙個寬50畫素的盒模型，padding 2px，border ...
css基礎布局
實現乙個兩側寬度固定，中間寬度自適應的三欄布局。要點 頁面的dom結構 header this is main body this is left body this is right body footer 聖杯布局 浮動和絕對定位 雙飛翼布局 浮動 於 ued user experience d...
CSS布局基礎
初級 css布局 一 單列布局 1 基礎知識 塊級元素 div p ul li dl dt 行級元素 img span input strong同一行顯示 無換行 2 盒子模型 盒子模型 邊框border 外邊距margin 內邊距padding 內容content 盒子模型3維立體圖 自上往下 邊...