-
移動端開發(fā)時(shí)，如果是固定單位可用rem替換
查看全部 -
rem彈性布局
查看全部 -
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<style>
????????????#div0 {
????????????????? ? width:100%;
????????????????}
????????????#div0 div {
????????????????float:left;
????????????????height:200px;
????????????}
????????????/*1行三個(gè)div*/
????????????@media screen and (min-device-width: 700px)? {
????????????????#div div{
????????????????????width:33.3%;
?????????????????}
????????????????#div0 div:nth-child(1) {
????????????????????background-color:red;
????????????????}
?????????????????#div0 div:nth-child(2) {
????????????????????background-color:blue;
????????????????}
????????????????#div0 div:nth-child(3) {
????????????????????background-color:green;
????????????????}
????????????}
? ? ????????/*2行三個(gè)div*/
????????????@media screen and (min-device-width: 700px) and (max-device-width:500px) {
????????????????
? ? ????????????#div div{
????????????????????width:50%;
?????????????????}
????????????????#div0 div:nth-child(1) {
????????????????????background-color:red;
????????????????}
?????????????????#div0 div:nth-child(2) {
????????????????????background-color:blue;
????????????????}
????????????????#div0 div:nth-child(3) {
????????????????????background-color:green;
????????????????}
????????????}
? ? ????????/*3行三個(gè)div*/
????????????@media screen and (min-device-width: 200px) and (max-device-width:500px) {
? ? ????????????#div div{
????????????????????width:100%;
?????????????????}
????????????????#div0 div:nth-child(1) {
????????????????????background-color:red;
????????????????}
?????????????????#div0 div:nth-child(2) {
????????????????????background-color:blue;
????????????????}
????????????????#div0 div:nth-child(3) {
????????????????????background-color:green;
????????????????}
????????????}
? ? </style>
</head>
<body>
????<div id="div0">
????????<div></div>
????????<div></div>
????????<div></div>
????</div>
</body>
查看全部 -
flex-basis：設(shè)置子元素伸縮基準(zhǔn)值(子元素占據(jù)的主軸空間)
設(shè)置flex-basis屬性后 width屬性失效
flex-grow：設(shè)置子元素的擴(kuò)展比例(在剩余空間中子元素的擴(kuò)展比例)
默認(rèn)值為0 即有剩余空間也不擴(kuò)展
flex-grow屬性值相同時(shí) 子元素將等分剩余空間
flex-shrink：設(shè)置子元素的收縮比例(在空間不足時(shí)子元素的收縮比例)
flex-shrink屬性值相同時(shí) 子元素將等分縮小(前提是basis屬性值相同)
計(jì)算公式：空間差值 * shrink值 * basis值 / (各元素 basis值 * shrink值 之和)
flex：涉及子元素伸縮比例屬性(flex-grow/flex-shrink/flex-basis)的簡寫屬性
flex屬性簡寫順序：flex-grow/flex-shrink/flex-basis
查看全部 -
align-items：設(shè)置flex元素在交叉軸上的對齊方式
將多行的每一行分別當(dāng)作整體處理
align-content：設(shè)置flex元素在交叉軸上的對齊方式
將多行內(nèi)容當(dāng)作一個(gè)整體處理
查看全部 -
justify-content:將多余空間設(shè)置為間距
查看全部 -
display:flex：設(shè)置彈性盒子(元素內(nèi)內(nèi)容以彈性布局方式)
在flex彈性布局中 父元素寬度不夠顯示情況下 子元素會自動壓縮等分顯示
flex-direction：子元素在父元素盒子中的排列方式
flex-wrap：子元素在父元素盒子中是否換行/列
在父元素寬度不夠時(shí)會換行顯示 而不會自動壓縮等分顯示
flex-flow：flex-direction(設(shè)置排列方式)與flex-wrap(設(shè)置是否換行)屬性的簡寫形式
查看全部 -
什么是flex彈性布局：即彈性盒子用來進(jìn)行彈性布局
如盒子內(nèi)子元素水平排列則X軸為主軸(main axis)/y軸為交叉軸(cross axis) 如子元素為縱向排列則相反
在flex中子元素大小不再以寬高來理解 而以排列方式來確定占主軸空間或占交叉軸空間 如圖所示main size為元素占主軸的空間 cross siez為元素占交叉軸空間
查看全部 -
媒體查詢其他引入方式(2)：書寫在linK標(biāo)簽中
查看全部 -
媒體查詢其他引入方式(1)：書寫在style標(biāo)簽
screen通常不涉及打印所以一般可以不添加
查看全部 -
媒體查詢@media常用參數(shù)：
width\height 通常使用與PC端瀏覽器窗口改變
device-width\height 通常使用與移動端
查看全部 -
媒體查詢：為不同尺寸的屏幕設(shè)定不同的CSS樣式
用法：@media?screen?and?(min-device-width:xxpx)?and?(max-device-width:xxpx)?{ ??????不同屏幕尺寸下的樣式代碼 }
查看全部 -
媒體查詢在移動端中應(yīng)用
查看全部 -
彈性盒子css寫法
Display:flex;
Flex-flow:row wrap;
Justify-content:space-between/space-around;
查看全部 -
彈性盒子css寫法
Display:flex;
Flex-flow:row wrap;
查看全部
舉報(bào)