爱站程序员基地css3
一、弹性盒子
<head lang=\"en\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no\" ><meta charset=\"UTF-8\"><title></title><!-- 自动分配--><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.box{height: 100%;display: flex;flex-direction: column;}.box_1 {flex: 1;border: 1px solid #000;box-sizing: border-box;}.box1 {flex: 1;display: flex;/*justify-content: center; /!*水平居中*!/*//*align-items: center; /!*垂直居中*!/*/}.box1 > span {align-self: center; /*自身垂直居中*/}.box2 {flex: 10;}.box3 {flex: 1.5;display: flex;flex-direction: row;/*justify-content: space-around;*//*justify-content: flex-start;*/}.box3>div {width: 30%;box-sizing: border-box;border: 1px solid #000;}</style></head><body><div class=\"box\"><div class=\"box_1 box1\"><span>标题</span></div><div class=\"box_1 box2\">2</div><div class=\"box_1 box3\"><div>首页</div><div>订单</div><div>我的</div></div></div></body>
二、css3媒体查询
1.媒体查询：屏幕适配，pc，移动端
2. 媒体类型：
- all ：所有多媒体类型设备
- print：打印机
- not print 不包含打印设备
- screen：电脑屏幕，平板，智能手机等
- speech：屏幕阅读器
3.媒体查询语法
<!DOCTYPE html><html><head lang=\"en\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no\"/><meta charset=\"UTF-8\"><title></title></head><body></body></html>
| content属性 | 作用 |
|---|---|
| width | 可视区域的宽度，值可为数字或关键词device-width |
| initial-scale | 可视区域的初始缩放值，为一个数字，可以带小数 |
| maximum-scale | 可视区域的最大缩放值，为一个数字，可以带小数 |
| minimum-scale | 可视区域的最小缩放值，为一个数字，可以带小数 |
| user-scalable | 是否允许用户进行缩放, no 不允许，yes 允许 |
不加限制条件 所有的屏幕 共有的样式：
- 写min-width 注意：从小到大写
<head lang=\"en\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no\"/><meta charset=\"UTF-8\"><title></title><style>*{margin: 0;padding: 0;}.box {margin: 0 auto;width: 100%;height: 300px;border: 1px solid #000;box-sizing: border-box;}@media screen and (min-width: 320px) {.box {width: 310px;}}@media screen and (min-width: 768px) {.box{width: 758px;}}@media screen and (min-width: 1024px){.box {width: 1014px;}}@media screen and (min-width: 1380px){.box {width: 1180px;}}</style></head><body><div class=\"box\"></div></body>
- 写max-width 注意：从大到小写
<head lang=\"en\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no\"/><meta charset=\"UTF-8\"><title></title><style>*{margin: 0;padding: 0;}.box {margin: 0 auto;width: 100%;height: 300px;border: 1px solid #000;box-sizing: border-box;}@media screen and (max-width: 1680px){.box {width: 1380px;}}@media screen and (max-width: 1380px){.box {width: 1024px;}}@media screen and (max-width: 1024px){.box {width: 768px;}}@media screen and (max-width: 768px) {.box{width: 100%;}}</style></head><body><div class=\"box\"></div></body>
- 写min-width and max-width
<head lang=\"en\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no\"/><meta charset=\"UTF-8\"><title></title><style>*{margin: 0;padding: 0;}.box {margin: 0 auto;width: 100%;height: 300px;border: 1px solid #000;box-sizing: border-box;}@media screen and (min-width:320px) and (max-width: 1024px) {.box {width: 100%;}}@media screen and (min-width:1024px) and (max-width: 1380px) {.box {width: 1024px;}}@media screen and (min-width:1024px) and (max-width: 1680px) {.box {width: 1180px;}}</style></head><body><div class=\"box\"></div></body>
- 引用
<head lang=\"en\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no\"/><meta charset=\"UTF-8\"><title></title><style>*{margin: 0;padding: 0;}.box {margin: 0 auto;width: 100%;height: 300px;border: 1px solid #000;box-sizing: border-box;}</style><link rel=\"stylesheet\" href=\"./css/style.css\"/><link rel=\"stylesheet\" href=\"./css/sc1.css\" media=\"screen and (min-width:320px)\"/><link rel=\"stylesheet\" href=\"./css/sc2.css\" media=\"screen and (min-width:768px)\"/><link rel=\"stylesheet\" href=\"./css/sc3.css\" media=\"screen and (min-width:1024px)\"/><link rel=\"stylesheet\" href=\"./css/sc4.css\" media=\"screen and (min-width:1380px)\"/></head><body><div class=\"box\"></div></body>
三、多列布局
- 添加meta 响应移动端
1.viewport 视口
2.width=device-width 宽度等于屏幕的宽
3.initial-scale=1.0 伸缩比例1.0
4.minimum-scale=1.0 最小比例1.0
5.maximum-scale=3.0 最大比例3.0
6.user-scalable=no 禁止用户缩放
<head lang=\"en\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no\" ><meta charset=\"UTF-8\"><title></title><style>*{margin: 0;padding: 0;}html,body{font-size: 14px;}.box{column-count: 3;-webkit-column-count:3;-moz-column-count:3;column-gap: 1rem;-webkit-column-gap: 1rem;-moz-column-gap: 1rem;column-rule: 1px solid red;-webkit-column-rule: 1px solid red;-moz-column-rule: 1px solid red;}.box_1{height: 2rem;border: 1px solid #000;box-sizing: border-box;}.box4 {column-span: all;/*指的是元素里面列的宽度*/}</style></head><body><div class=\"box\"><div class=\"box_1\">1</div><div class=\"box_1\">2</div><div class=\"box_1\">3</div><div class=\"box4\">sssss</div></div></body>
