html:標籤語言。
常用的標籤:標題標籤h1-h6/段落標籤p/div/ul>li/ol>li/a/表單標籤(form input) , 自定義標籤
彈性容器:設定了display:flex;這個為彈性容器,裡面的子元素會按照彈性布局的方式進行布局。
彈性子元素:設定了display:flex的彈性容器直接子元素即為彈性子元素
display: flex;
設定彈性布局
flex-direction: row;
設定主軸方向
row:從左到右
column:從上到下
row-reverse:從右到左
column-reverse:從下到上
justify-content: space-evenly
; 設定主軸的內容分布
flex-start:向主軸的開始位置靠攏(預設)
center:向主軸的中心位置靠攏
flex-end:向主軸的結束位置靠攏
space-around:平均分布,兩邊有間距,兩邊間距是中間的一半
space-between:平均分布,兩邊沒有間距
space-evenly:平均分布,兩邊有間距,兩邊間距是中間一樣
align-items: center;
設定側軸的方向分布
flex-start:向側軸的開始位置靠攏
center:向側軸的中心位置靠攏
flex-end:向側軸的結束位置靠攏
stretch:拉伸(預設),如果設定高度,此拉伸無效
flex-wrap: wrap;
彈性換行
設定換行 flew-wrap
nowrap:不換行(預設)
wrap:換行
align-content: space-around;
設定側軸多行的分布內容
flex-start:向主軸的開始位置靠攏(預設)
center:向主軸的中心位置靠攏
flex-end:向主軸的結束位置靠攏
space-around:平均分布,兩邊有間距,兩邊間距是中間的一半
space-between:平均分布,兩邊沒有間距
space-evenly:平均分布,兩邊有間距,兩邊間距是中間一樣
flex:1;/*剩餘空間佔據了乙份*/
剩餘空間分布
align-self: center;
單獨設定子元素的側軸排布
響應式視窗的設定viewport
1、設定移動端裝置他的解析度為它預設的系統解析度(最佳解析度)
name
="viewport"
content
="width=device-width,
initial-scale=1, minimum-scale=1,
maximum-scale=1, user-scalable= no"
/>
2、設定移動端裝置的解析度為固定設計稿的解析度(當物理解析度小於設計稿的解析度時會失真)
html css簡單布局
經過幾天的學習漸漸掌握了一部分html和css 下面是用最近幾天學習的html css簡單布局的乙個頁面 這個頁面可以分為 header,middle和foot。其中head分為三部分,需要三個div標籤來進行布局 首先第乙個div標籤布局橙色區域以及整個header區域設定背景顏色,寬,高,外邊距...
HTML CSS 簡單網頁布局
常用標籤列舉 元素選擇器 匹配元素基本選擇器 按標籤名選擇 tagname class類選擇器 classname id選擇器 id 直接子元素 ul li 所有後代元素 屬性選擇器 tagname class id tagname class id 樣式 定位position 偽類 visited...
HTML CSS 內容簡單回顧
html內容簡單回顧 什麼是html 超文字標記語言 p標籤 段落標籤 br標籤 簡單換行 h1 h6 標題標籤 hr標籤 水平分割線,華麗的分割線 font標籤 color屬性改變顏色,size預設3 b標籤 加粗 i標籤 斜體 strong標籤 帶語義的加粗 em標籤 斜體標籤,帶語義 img標...