目錄:
1 移動端特點
2 百分比布局
3 Flex布局
一 移動端特點
? 移動端和PC端網頁不同點
? 谷歌模擬器
? 分辨率
? 視口
? 二倍圖
1 移動端和PC端網頁不同點
PC端網頁和移動端網頁的有什么不同疗韵？
1 PC屏幕大，網頁固定版心
2 手機屏幕小， 網頁寬度多數(shù)為100%
如何在電腦里面邊寫代碼邊調試移動端網頁效果呈宇？
谷歌模擬器
2 谷歌模擬器
設置調試工具位置
3 分辨率
4 視口
5 二倍圖
二: 百分比布局
三: Flex布局
float布局:子盒子脫標,沒有辦法撐開父盒子
float布局
<head>
<title>傳統(tǒng)float布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
border: 1px solid #000;
/*處理:子盒子設置浮動,從而脫標,導致沒有辦法撐開父盒子*/
overflow: hidden;
}
.box div {
float: left;
margin: 10px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
flex布局
flex布局 高度200px
<head>
<title>體驗flex布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
justify-content: space-between;
/* height: 200px; */
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
查詢技術支持的瀏覽器版本
網址: http://caniuse.com
// 例如flex支持的瀏覽器版本, 紅色標識不支持,綠色標識支持
主軸對齊六種方式 justify-content:
justify-content: start (默認狀態(tài),左對齊)
justify-content: end (右對齊)
justify-content: center
justify-content: space-around
justify-content: space-between
justify-content: space-evenly
<head>
<title>體驗flex布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
justify-content: center;
height: 200px;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
align-items四種方式
align-items: flex-start (默認狀態(tài))
align-items: flex-end
align-items: center
align-items: stretch (拉伸, 默認狀態(tài))
- align-items: stretch (拉伸):該屬性為默認設置狀態(tài), 如果子控件設置高度,則顯示設置的高度.
align-items: stretch (拉伸)
- align-items: stretch (拉伸):該屬性為默認設置狀態(tài), 如果子控件沒有設置高度,則子控件自動拉伸為父控件高度
align-self： 控制某個彈性盒子在側軸的對齊方式（添加到彈性盒子）
align-self: center
<head>
<title>側軸對齊方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
/* 居中 */
align-items: center;
/* 拉伸,默認值(現(xiàn)有狀態(tài),測試的時候去掉子級的高度) */
/* align-items: stretch; */
height: 300px;
/* margin: auto; */
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
/* 單獨設置某個彈性盒子的側軸對齊方式 */
/* .box div:nth-child(2) {
align-self: center;
} */
</style>
</head>
<body>
<div class="box">
<div>one</div>
<div>two</div>
<div>three</div>
</div>
</body>
- 伸縮比, 子控件2占用3/4,子控件3占用1/4
<head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
height: 300px;
border: 1px solid #000;
}
.box div {
height: 200px;
margin: 0 20px;
background-color: pink;
}
.box div:nth-child(1) {
width: 50px;
}
.box div:nth-child(2) {
/* 占用父級剩余尺寸的份數(shù) */
flex: 3;
}
.box div:nth-child(3) {
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
主軸和側軸
1.在flex布局中，是分為主軸和側軸兩個方向的
默認主軸就是x軸方向瞒御，水平向右
默認側軸方向就是y軸方向，垂直向下
2.屬性值
flex-direction屬性決定主軸的方向(即項目的排列方向)
當然，主軸和側軸是會變化的弊攘，就看flex-direction設置誰為主軸，剩下的就是側軸了蜈漓。但是子元素是跟著主軸來進行排列的
display: flex
---------------
flex-direction: row (默認從左到右)
flex-direction: row-reverse (從右到左)
flex-direction: column (從上到下)
flex-direction: column-reverse (從下到上)
flex-direction: row (默認從左到右)
flex-direction: row-reverse (從右到左)
flex-direction: column (從上到下)
flex-direction: column-reverse (從下到上)
<title>初體驗</title>
<style>
div {
/*給父級添加flex蛹锰，里面的行內元素就轉換成了塊級元素 */
display: flex;
width: 300px;
height: 150px;
background-color: skyblue;
margin: 0 auto;
/* 默認是沿著x軸排列的 */
/* flex-direction: row; */
/* 翻轉，倒著排列 */
/* flex-direction: row-reverse; */
/* 設置y軸為主軸,x軸就成了側軸 */
/* flex-direction: column; */
/* 沿y軸翻轉 */
flex-direction: column-reverse;
}
div span {
width: 90px;
height: 45px;
background-color: plum;
margin: 5px;
/* flex: 1; */
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
