css(7)less和flex的基本知识

花京院嚯

已于 2022-02-27 17:43:55 修改

阅读量371

点赞数

分类专栏：笔记文章标签： less

于 2022-02-27 17:43:38 首次发布

本文链接：https://blog.csdn.net/m0_62520946/article/details/123165868

版权

笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

less

简介

less是一门css的预处理，是一个css的增强版，通过less可以写更少的代码实现更强大的样式

在less中添加了许多的新特性，eg对变量的支持，对mixin的支持

less的语法大体上和css语法一致，但less中增添了许多对css的扩展

所以浏览器无法直接执行less代码，要执行必须将less转换为css，然后再由浏览器执行

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html{
				--color:#ff0 ;
				--length:200px;
				
			}
				
			.box1{
				width: calc(200px/2);
				height: var(--length);
				background-color: var(--color);
				
			}
			.box2{
				width: 200px;
				height: 200px;
				color: var(--color);
				
			}
			.box3{
				width: var(--length);
				height: var(--length);
				border: 10px solid var(--color);
			}
		</style>
	</head>
	<body>
		<div class="box1">aaaa</div>
		<div class="box2">aaaa</div>
		<div class="box3">aaaa</div>
	</body>
</html>

效果：

变量

在变量中可以存储一个任意的值，并且在我们可以在需要是，可以任意修改变量的值

语法：@变量名

示例：

syntax.less

@a:100px;
@b:red;
@c:box6;

.box5{
	width: @a;
	height: @a;
	color: @b;
	
}
.@{c}{
	width: 6.25rem;
	background-image: url(../../06_font&background/fa/webfonts/fa-brands-400.svg);
}
div{
	width: 100px;
	height: 100px;
	
}

效果：

syntax.css

/*
多行注释
内容会被解析到css文件中
*/
.box1 {
  background-color: #BBFFAA;
}
.box1 .box2 {
  background-color: #ff0;
}
.box1 .box2 .box4 {
  color: red;
}
.box1 .box2 .box3 {
  background-color: orange;
}
.box5 {
  width: 100px;
  height: 100px;
  color: red;
}
.box6 {
  width: 6.25rem;
  background-image: url(../../06_font&background/fa/webfonts/fa-brands-400.svg);
}
div {
  width: 100px;
  height: 100px;
}

父元素

&表示外层的父元素

示例：

style3.less

.box1{
	.box2{
		color: red;
		
	}
	>.box3{
		color: green;
			
		&:hover{
			color: blue;
		}
		
	}
	&:hover{
		color: orange;
	}
	
}

效果：

style3.css

.box1 .box2 {
  color: red;
}
.box1 > .box3 {
  color: green;
}
.box1 > .box3:hover {
  color: blue;
}
.box1:hover {
  color: orange;
}

扩展

:extend() 对当前选择器扩展指定选择器的样式（选择器分组）

示例：

.p1{
	width: 100px;
	height: 100px;
	
}

//:extend() 对当前选择器扩展指定选择器的样式（选择器分组）

.p2:extend(.p1){
	color: red;
}

效果：

css

.p1,
.p2 {
  width: 100px;
  height: 100px;
}
.p2 {
  color: red;
}

直接对指定样式进行引用，这里就相当于将p1的样式在此进行了复制

mixin 混合

示例：

p3{
	
	.p1();
}

效果：

.p3 {
  width: 100px;
  height: 100px;
}

类选择器

使用类选择器时可以在选择器后边添加一个括号，此时就需要用一个mixins

示例：

.p4(){
	width: 100px;
	height: 100px;
	background-color: #BBFFAA;

}
.p5{
	.p4();
}

效果：

.p5 {
  width: 100px;
  height: 100px;
  background-color: #BBFFAA;
}

注意：在less中所有的数值可以直接运算

示例：

@import"syntax2.less"

.box1{
	width: 100px;
	height: 100px/2;
	background-color: #BBFFAA;
}

效果：

css

@import "syntax2.less".box1 {
  width: 100px;
  height: 50px;
  background-color: #BBFFAA;
}

flex（弹性盒、压缩盒)

主要用来代替浮动来完成页面的布局，通过使元素具有弹性，让元素跟随页面的大小的改变而改变

弹性容器

通过dislay来设置弹性容器

可选值：

display:flex 块级弹性容器
display:inline-flex 行内的弹性容器

弹性元素

弹性容器的子元素是弹性元素（弹性项）

flex-direction

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

可选值：

row	默认值，弹性元素在容器中水平排列（左向右）主轴，自左向右
row-reverse	弹性元素在容器中反向排列（右向左）
column	弹性元素纵向排列（自上向下）
column-reverse	弹性元素纵向排列（自下向上）

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

侧轴：与主轴垂直的方向

弹性元素的属性

flex-grow

指定弹性元素的伸展的系数，当父元素有多余空间时，子元素如何伸展

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

flex-shrink

指定弹性元素的收缩系数

当父元素中的空间不足以容纳所有子元素时，会对子元素进行收缩

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				
			}
			ul{
				width: 500px;
				border: 10px red solid;
				display: flex;
				flex-direction: row;
				display: flex;
			}
			li{
				width: 200px;
				height: 100px;
				background-color: #BBFFAA;
				font-size: 50px;
				text-align: center;
				line-height: 100px;
			}
			li:nth-child(1){
				flex-grow: 1;
			}
			li:nth-child(2){
				background-color: pink;
				flex-grow: 2;
				
			}
			li:nth-child(3){
				background-color: orange;
				flex-grow: 3;
				
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			
		</ul>
	</body>
</html>

效果：

花京院嚯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css(7)less和flex的基本知识

less简介less是一门css的预处理，是一个css的增强版，通过less可以写更少的代码实现更强大的样式在less中添加了许多的新特性，eg对变量的支持，对mixin的支持less的语法大体上和css语法一致，但less中增添了许多对css的扩展所以浏览器无法直接执行less代码，要执行必须将less转换为css，然后再由浏览器执行示例：<!DOCTYPE html><html> <head> <meta charset="
复制链接

扫一扫

专栏目录