CSS笔记（11）

1.混合函数

1）在混合函数中可以直接设置变量

2）调用混合函数，按顺序传递参数

less代码

 .test(@w,@h,@bg-color){
    width:@w;
    height:@h;
    background-color: 1px solid @bg-color;
  }
  div{
    .test(200px,300px,#bfa)
  }

css代码 

div {
  width: 200px;
  height: 300px;
  background-color: 1px solid #bfa;
}

3）顺序可以改变，但在设置值的时候需要在值前面加上变量名

4）average(颜色1,颜色2)可以取平均值颜色 

5）darken(颜色,比颜色深的百分比)

2.less的补充 

1）在less中所有的数值都可以进行直接运算

+   -    *    /

2）可以用import来将其他的less映入到当前的less中

3.弹性盒简介

1）flex(弹性盒、伸缩盒)

是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局

flex可以使得元素具有弹性，让元素可以跟随页面的大小的改变而改变

2）弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器

3）通过display来设置弹性容器

display:flex  设置为块级弹性容器

display：inline-flex  设置为行内的弹性容器

4）弹性元素

flex-direction 指定容器中弹性元素的排列方式

可选值：

row：默认值，弹性元素在容器中水平排列（左向右）

row-reverse：弹性元素在容器中反向水平排列（右向左）

column：弹性元素纵向排列（自上而下）

column-reverse：弹性元素方向纵向排列（自下而上）

5）主轴：弹性元素的排列方向

6）测轴：与主轴方向垂直

7）弹性元素的属性：

flex-grow  指定弹性元素的伸展的系数，默认值为0

当父元素有多余的空间时，子元素如何伸展

父元素的剩余空间，会按照比例进行分配

8）flex-shrink指定弹性元素的收缩系数

当父元素中的空间不足时，如何对子元素进行收缩

4.弹性容器上的样式

1）flex-wrap：设置弹性元素是否在弹性容器中自动换行

可选值：

nowrap 默认值，元素不会自动换行

wrap：元素沿着辅轴方向自动换行

wrap-reverse：元素沿着辅轴反方向自动换行

2）flex-flow：wrap和direction的简写属性

3）justify-content：

如何分配主轴上的空白空间（主轴上的元素如何排列）

可选值：
flex-start：元素沿着主轴起始边排列

flex-end：元素沿着主轴终边排列

center：元素居中排列

space-around：空白分布到每一个元素两侧

space-between：空白均匀分布到元素间，终边和始边处没有空白

space-evenly：空白分布到元素的单侧

4）align-items：

元素在辅轴上如何对齐

元素间的关系

可选值：

stretch：默认值，将元素的长度设置为相同的值

flex-start：元素不会拉升，沿着辅轴起始边对齐

flex-end：沿着辅轴的终边对齐

center：居中对齐

justify-content:center;
align-items:center;

最简单的设置元素居中的方式

5）辅轴空白空间的分布

align-content

6）align-self：用来覆盖当前弹性元素上的align-items

5.会弹的导航条 

.nav{
            width:1210px;
            height:48px;
            line-height: 48px;
            margin: 50px auto;
            background-color: #e8e7e3;
            display:flex;
        }
        .nav li{
            flex-grow: 1;
        }
        .nav a{
            display: block;
            color:#808080;
            text-decoration: none;
            font-size: 16px;
            text-align: center;
        }

6.弹性元素上的样式

1）弹性元素的缩减系数

缩减系数的计算方式比较复杂

缩减多少时根据缩减系数和元素大小来计算

2）flex-basis指定的是元素在主轴上的基础长度

如果主轴是横向的，则该值指定的就是元素的宽度

如果该值是纵向的，则该值指定的就是元素的高度

默认值是auto，表示参考元素自身的高度或宽度

如果传递了一个具体的数值，则以该值为准

3）order：决定弹性元素的排列顺序

7.像素

1）屏幕是由一个一个发光的小点构成，这一个个的小点就是像素

2）分辨率：1920x1080说的就是屏幕中小点的数量

3）在前端开发中，像素要分成两种情况讨论：css像素和物理像素

物理像素：上述所说的小点点就是物理像素

css像素：编写网页时，我们所用的像素都是css像素

浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现

一个css像素最终由几个物理像素显示，由浏览器决定

默认情况下在pc端，一个css像素=一个物理像素

4）视口

视口就是屏幕中用来显示网页的区域

可以通过查看视口的大小，来观察css像素和物理像素的比值

默认情况下：

视口宽度：1920px（css像素）

1920px（物理像素）

此时，css像素和物理像素的比值是1：1

放大两倍的情况，

视口宽度  960px（css像素）

1920px（物理像素）

此时，css像素和为物理像素的比值是1：2

我们可以通过改变视口的大小来css像素和物理像素的比值

 8.手机像素

1）在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰

24寸：1920x1080

i6 4.7寸 750x1334

2）智能手机的像素点，远远小于计算机的像素点

3）默认情况下，移动端的网页都会将视口设置为980像素（css像素）

4）以确保pc端网页可以在移动端正常访问，但是如果网页超过了980，移动端的浏览器会自动对网页缩放以显示完整网页

5）所以基本大部分的pc端网站都可以在移动端正常浏览，但是往往都不会有一个好的体验，伪类解决这个问题，大部分网站都会专门为移动端设计网页

9.完美视口

1）移动端默认的视口大小是980px（css像素）

2）默认情况下，移动端的像素比就是 980/移动端宽度（980/750）

如果直接在网页中编写移动端代码，这样在980的视口下，像素比非常不好，导致网页中的内容非常非常的小

3）编写移动端页面时，必须确保有一个合理的像素比

1css像素对应2个物理像素

1css像素对应3个物理像素

可以通过meta标签来设置视口大小

4）每一款移动设备设计时，都会有一个最佳像素比

一般只需要将像素比设置为该值既可以得到一个最佳效果

将像素比设置为最佳像素比的完美视口大小称之为完美视口

<meta name="viewpoint" content="width=375px";>

5)设置视口大小 device-width表示设备的宽度（完美视口）-->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

结论：以后再写移动端的页面，就先把这个写上

10.vw单位

1）不同设备的完美视口的大小是不一样的，由于不同设备的视口和像素比不同，所以同样的375个像素在不同设备下意义是不一样的

所以在移动端开发时，就不能再使用px来布局了

2）vw表示的是视口的宽度

100vw=一个视口的宽度

1vw=1%视口宽度

vw这个单位永远相当于视口宽度进行计算

11.vw适配

1）rem

1rem=1html的字体大小

2）网页中字体大小最小是12px，不能设置一个比12像素还小的字体，如果我们设置了一个小于12px的字体，则字体自动设置为12px