媒体查询

在不改变页面内容的情况下，为不同的设备特性（屏幕尺寸、横竖屏等）定制显示效果

语法：

样式表内引入（内、外部样式表）

@media 媒体类型 and (媒体特性表达式){
	//样式
}

常用媒体类型

all 所有
screen 屏幕设备

常用媒体特性

width/height 宽高
device-width/height 设备宽高
- min- / max
  - min-width/height
横竖屏 orientation：
- landscape
- portrait 竖屏

关键词

and 和，并且，与

通过link标签的media属性实现

<link rel="stylesheet" href="lt900.css" media="screen and (max-width:900px)">
<link rel="stylesheet" href="gt900.css"  media="screen and (min-width:901px) and (max-width:1200px)">
<link rel="stylesheet" href="gt1200.css" media="screen and (min-width:1201px)">

横竖屏

<!-- 2列 竖屏-->
<link rel="stylesheet" href="lt900.css" media="screen and (orientation:portrait)">
<!-- 4列 横屏-->
<link rel="stylesheet" href="gt1200.css" media="screen and (orientation:landscape)">

calc计算

calc() 函数用于动态计算长度值。
calc 是英文单词 calculate( 计算 ) 的缩写，是 CSS3 的一个新增的功能

语法：

width: calc(100% - 10px)；

注意：

运算符前后都需要保留一个空格
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h0fTNqp4-1605793655377)(1.jpg)]

弹性盒

容器属性

设置为弹性盒

display

flex 块级弹性盒（独占一行）
inline-flex 行级弹性盒（可以在一行排列）

主轴方向

flex-direction 主轴方向

改变弹性盒项目在容器内的排列方向

row：水平排列（起始点在左）
row-reverse：水平排列（起始点在右）。
column：垂直方向排列（起始点在上）
column-reverse：垂直方向排列（起始点在下）

justify-content:主轴方向上对齐方式

flex-start：默认值(起始点对齐)
flex-end：末端位置对齐
center：居中对齐
space-between：空白项目在之间（两端对齐）——弹性项目平均分布在该行上,相邻项目的间隔相等
space-around：空白在项目周围（分散对齐）——弹性项目平均分布在该行上，两边留有一半的间隔空间

align-items 侧轴方向上对齐方式

flex-start：侧轴起始位置对齐
flex-end：侧轴末端位置对齐
center：项目沿侧轴居中紧挨着填充。
baseline：基线对齐。
stretch：（默认值）拉伸占满
- 注：如果指定侧轴大小的属性值为’auto’，时有效

flex-wrap 指定弹性盒子的子元素换行方式

nowrap - 默认，不换行
wrap - 换行(默认起始点上)
wrap-reverse -反转 wrap（起始点下）

align-content 属性

弹性盒项目为多行时的对齐方式

stretch - 默认。各行将会伸展以占用剩余的空间。（拉伸占满）
flex-start - 各行向弹性盒容器的起始位置堆叠。（起始位置对齐）
flex-end - 各行向弹性盒容器的结束位置堆叠。（末端位置对齐）
center -各行向弹性盒容器的中间位置堆叠。（居中对齐）
space-between -各行在弹性盒容器中平均分布。（两端对齐）
space-around （分散对齐）

各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

项目属性

order项目的排列次序

默认值 0
值越大显示越靠后
值相同，由结构先后顺序决定，结构越靠前，显示越靠前

align-self 项目在侧轴上的对齐方式

auto：为元素的父元素的’align-items’值，（默认）
flex-start：子元素侧轴起始边对齐。
flex-end：子元素侧轴结束对齐
center：子元素在该行的侧轴上居中放置。
baseline：该值将参与基线对齐。
stretch：位伸占满

指定侧轴大小的属性值为’auto’时有效

flex-grow增长比率

取值：数值（整数）

只有在容器有剩余空间时有效
数值相当于份数—容器的剩余空间如何分配给项目

默认值：0 表示即使容器有剩余空间也不增长

flex-basis 基准值

取值：长度值

参与计算的最终值（剩余空间的计算，增长，收缩的基准参考值）
和默认宽高指定的大小同时存在时，flex-basis优先
默认值 auto

flex-shrink 收缩比率

取值：数值（整数）

只有在容器空间不足时有效
默认值1，表示空间不足时,项目自动收缩
0表示，项目不收缩

flex简写

flex:增长比率收缩比率基准值 ;

默认值 flex: 0 1 auto ; （新版浏览器0 1 0%）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qx2YfsE8-1605793655381)(…/AppData/Roaming/Typora/typora-user-images/image-20201119165234852.png)]

LESS 基础

LESS是一种动态语言，属于【CSS预处理语言】的一种

在 CSS 语法的基础上，为 CSS 加入【程序式语言的特性】

使CSS更加简洁、适应性更强、可读性更佳，更易于web的开发、维护。

扩展名

.less

设置输出路径

.less文件右键—设置输出路径—找到对应的css文件

1.变量

LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单

变量以@开头,变量名与变量值之间用【冒号】分隔

定义变量：

@skin:red;

使用变量

.box{
	color:@skin;
}

注：如果变量需要镶嵌在字符串之中，就必须需要写在@{}之中。

背景图中的路径中的字符串

@url:"../static/base/images/";
.price{
    color: @skin;
    background:url("@{url}1.jpg");
}

属性名称中的字符串

@side : left;
.rounded {
	border-@{side}-radius: 5px;
}

2、嵌套

.navbox{
    height:40px;
    background-color:@skin;
    ul{
        margin:0 auto;
       
    }
    li{
        float:left;
        a{
            color:#fff;
        }
    }
}

.navbox ul {
  margin: 0 auto;
}
.navbox li {
  float: left;
}
.navbox li a {
  color: #fff;
}

&可以用于指代父级

a{
    color:#fff;
    &:hover{
   		 color:red;
    }
}

a:hover {
  color: red;
}

3.混入

是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样

不带变量的混入

//定义了一个混入
.whitebg{
    background-color: #fff;
}
.tuijianbox{
	//调用混入
    .whitebg;
}
.remenbox{
    .whitebg;
}

加小括号避免编译
.whitebg(){
    background-color: #fff;
}

带参数的混入

//定义混入
.bg(@bgc){
    width:100px;
    height:100px;
    background-color:@bgc;
}

.degnlu{
	//调用混入时传入参数
    .bg(#ff0000);
}

.footer{
    .bg(#cccccc);
}

.degnlu {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}
.footer {
  width: 100px;
  height: 100px;
  background-color: #cccccc;
}

1）带参数但不带默认值的混入，调用时必须传参，否则报错

2）带参数并且带有默认值的混入，调用时可以不传参，不传参时使用默认值，传参使用传入的参数

.bg(@bgc:#ffffff){
    width:100px;
    height:100px;
    background-color:@bgc;
}

.degnlu{
    .bg;
}

.footer{
    .bg(#cccccc);
}

.degnlu {
  width: 100px;
  height: 100px;
  background-color: #ffffff;
}
.footer {
  width: 100px;
  height: 100px;
  background-color: #cccccc;
}

3）多个参数

定义混入时，参数逗号隔开

.box(@w:100px,@h:200px,@bgc:#ffffff){
    width:@w;
    height:@h;
    background-color:@bgc;
}

调用时，一一对应


.footer{
    .box(200px,400px,red);
}

调用时如果不一一对应，就要命名参数

   //调用时命名参数
    .box(@bgc:red,@h:400px);

4)@arguments变量

作为一组值，指代所有的参数

.shadow(@x:0,@y:0,@blur:10px,@color:#000){
  // box-shadow:@x @y @blur @color;
  box-shadow:@arguments;
}

4.继承、扩展

:extend(“混入名”)

编译之后，联合声明

.center{
    text-align: center;
}
.testbox1:extend(.center){
     width:200px;
     height:100px;
}
.testbox2{
    &:extend(.center);
    width:200px;
    height:100px;
}

.center,
.testbox1,
.testbox2 {
  text-align: center;
}
.testbox1 {
  width: 200px;
  height: 100px;
}
.testbox2 {
  width: 200px;
  height: 100px;
}

5.计算

LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)的操作

less会为你自动推断数值的单位，所以不必每一个值都加上单位

注意：涉及优先级时以()进行优先级运算

.wrapbox{
    width:(1000px - 20) / 2;
    padding:0 20px;
}

er){
width:200px;
height:100px;
}
.testbox2{
&:extend(.center);
width:200px;
height:100px;
}

.center,
.testbox1,
.testbox2 {
text-align: center;
}
.testbox1 {
width: 200px;
height: 100px;
}
.testbox2 {
width: 200px;
height: 100px;
}


## 5.计算

LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)的操作

 less会为你自动推断数值的单位，所以不必每一个值都加上单位 

注意：涉及优先级时以()进行优先级运算

.wrapbox{
width:(1000px - 20) / 2;
padding:0 20px;
}

媒体查询、LESS基础