媒体查询
在不改变页面内容的情况下,为不同的设备特性(屏幕尺寸、横竖屏等)定制显示效果
语法:
样式表内引入(内、外部样式表)
@media 媒体类型 and (媒体特性表达式){
//样式
}
常用媒体类型
- all 所有
- screen 屏幕设备
常用媒体特性
-
width/height 宽高
-
device-width/height 设备宽高
- min- / max
- min-width/height
- min- / max
-
横竖屏 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)]
弹性盒
相关概念
弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
- 容器——设置为弹性盒的元素
- 项目—— 容器的子元素(直接子元素)
- 主轴——默认水平方向,起始点在左
- 侧轴(交叉轴)—— 默认垂直方向,起始点在上
注:
- 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
- 设为弹性盒以后,子元素的float、clear和vertical-align属性将失效。
容器属性
设置为弹性盒
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;
}