这是我参与「第四届青训营 」笔记创作活动的第20天
一.弹性元素的样式
*{ margin: 0; padding: 0; list-style: none; }
ul{
width: 900px;
border: 10px red solid;
/* 设置弹性盒 */
display: flex;
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/*
弹性的增长系数
*/
/* flex-grow: 1; */
/*
弹性元素的缩减系数
- 缩减系数的计算方式比较复杂
- 缩减多少是根据 缩减系数 和 元素大小来计算
*/
/* flex-shrink: 1; */
/*
元素基础长度
flex-basis 指定的是元素在主轴上的基础长度
如果主轴是 横向的 则 该值指定的就是元素的宽度
如果主轴是 纵向的 则 该值指定的是就是元素的高度
- 默认值是 auto，表示参考元素自身的高度或宽度
- 如果传递了一个具体的数值，则以该值为准
*/
/* flex-basis: auto; */
/*
flex 可以设置弹性元素所有的三个样式
flex 增长 缩减 基础;
initial "flex: 0 1 auto".
auto "flex: 1 1 auto"
none "flex: 0 0 auto" 弹性元素没有弹性
*/
flex: initial;
}
li:nth-child(1){
/* order 决定弹性元素的排列顺序 */
order: 2;
}
li:nth-child(2){
background-color: pink;
/* flex-grow: 2; */
order: 3;
}
li:nth-child(3){
background-color: orange;
/* flex-grow: 3; */
order: 1;
}
二.像素
像素：
- 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
- 分辨率：1920 x 1080 说的就是屏幕中小点的数量
- 在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素
- 物理像素，上述所说的小点点就属于物理像素
- CSS像素，编写网页时，我们所用像素都是CSS像素
- 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
- 一个css像素最终由几个物理像素显示，由浏览器决定： 默认情况下在pc端，一个css像素 = 一个物理像素 视口（视口）
- 视口就是屏幕中用来显示网页的区域
- 可以通过查看视口的大小，来观察CSS像素和物理像素的比值
- 默认情况下： 视口宽度 1920px（CSS像素） 1920px（物理像素）
- 此时，css像素和物理像素的比是 1：1
- 放大两倍的情况： 视口宽度 960px（CSS像素） 1920px（物理像素）
- 此时，css像素和物理像素的比是1：2
- 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值
