less
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/testless.css">
</head>
<body>
<!--
less是CSS的预处理语言，CSS的增强版，通过less可以编写更少的代码实现更强大的样式
less中添加了许多的新特性，像对变量的支持、对mixin的支持..
less的语法大体上和css语法一致，但是less中添加了许多对css的扩展，
所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行
Vscode安装插件(Easy LESS)
-->
<div class="box1">
<div class="box2">
<div class="box4">
</div>
</div>
<div class="box3">
</div>
<div class="box5">
</div>
<div class="box6">
</div>
<div class="box7">
</div>
<div class="box8">
</div>
<div class="box9">
</div>
<div class="box10">
</div>
<div class="box11">
</div>
</div>
</body>
</html>less文件
body {
background-color: antiquewhite;
}
// less中的单行注释，注释的内容不会被解析到CSS中
/*
CSS注释，会被解析到CSS中
*/
.box1 {
width: 300px;
height: 300px;
background-color: aqua;
.box2 {
width: 200px;
height: 200px;
background-color: red;
// 选择box2的子元素
// 使用 >
> .box4 {
width: 20px;
height: 20px;
background-color: red;
}
// & 表示外层的父元素
// 等价于 .box1 .box2:hover
&:hover {
background-color: black;
}
}
// & 表示外层的父元素
// 等价于 .box1:hover
&:hover {
background-color: black;
}
}
// less变量
// 在变量中可以存储一个任意的值，在需要时可以任意修改
// 语法： @变量名
// 使用变量时，如果是直接使用则以 @变量名 的形式
// 如果作为类名使用则以 @{变量名} 形式使用
// 可以在声明变量前就使用变量
@testName: 100px;
@boxName:box3;
.@{boxName} {
width: @testName;
height: @testName;
background-color: black;
}
.box6 {
width: 200px;
height: 200px;
}
// :extend() 对当前选择器扩展指定选择器的yangs
// :extend(选择器)
// 对嵌套的写法不生效
.box5:extend(.box6) {
background-color: green;
}
.box7 {
// 直接对指定的样式进行引用，相当于复制了指定的样式
// mixin 混合
.box6();
}
// 使用类选择器时可以在选择器后边添加一个括号，就是创建了一个mixin
// 样式对自己本身不生效，给别人引用
.box8() {
width: 200px;
height: 200px;
}
.box9 {
.box8();
}
// mixin 混合函数
// 在混合函数中可以直接设置变量
.test(@a,@b,@c) {
width: @a;
height: @b;
background-color: @c;
}
.box10 {
// 调用混合函数，参数顺序需要一致
// 如果参数顺序不一致，则需要在前面加上变量名
.test(@c:black,@a:200px,@b:100px);
}
.box11 {
// 在less中所有的数值都可以直接进行运算(+ - * /)
width: 100px + 100px;
height: 300px - 100px;
}
// 将其他的less文件引入到当前less文件中
// @import '';
// 在Easy LESS 插件中配置(settings.json)
// 这样在浏览器中可以看到CSS位置对应的less文件位置
// 是否压缩 对应关系 显示编译后的文件
// "less.compile": {
// "compress": true, // true => remove surplus whitespace
// "sourceMap": true, // true => generate source maps (.css.map files)
// "out": true // false => DON'T output .css files (overridable per-file, see below)
// }less编译后对应的css文件
body {
background-color: antiquewhite;
}
/*
CSS注释，会被解析到CSS中
*/
.box1 {
width: 300px;
height: 300px;
background-color: aqua;
}
.box1 .box2 {
width: 200px;
height: 200px;
background-color: red;
}
.box1 .box2 > .box4 {
width: 20px;
height: 20px;
background-color: red;
}
.box1 .box2:hover {
background-color: black;
}
.box1:hover {
background-color: black;
}
.box3 {
width: 100px;
height: 100px;
background-color: black;
}
.box6,
.box5 {
width: 200px;
height: 200px;
}
.box5 {
background-color: green;
}
.box7 {
width: 200px;
height: 200px;
}
.box9 {
width: 200px;
height: 200px;
}
.box10 {
width: 200px;
height: 100px;
background-color: black;
}
.box11 {
width: 200px;
height: 200px;
}
/*# sourceMappingURL=./testless.css.map */flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
/* 弹性容器 */
ul {
width: 200px;
border: 1px solid red;
/* 设置为弹性容器 */
display: flex;
/*
主轴：
弹性元素的排列方向称为主轴
侧轴：
与主轴垂直方向的称为侧轴
*/
/*
flex-direction 指定容器中弹性元素的排列方向
row 默认值 弹性元素在容器中水平排列(自左向右)
主轴 自左向右
row-reverse 弹性元素在容器中反向水平排列(自右向左)
主轴 自右向左
column 弹性元素在容器中纵向排列(自上向下)
主轴 自上向下
column-reverse 弹性元素在容器中纵向排列(自下向上)
主轴 自下向上
*/
flex-direction: row;
/*
flex-wrap 设置弹性元素在弹性容器中自动换行
nowrap 默认值 元素不会自动换行
wrap 元素会沿着侧轴自动换行
wrap-reverse 元素沿着侧轴反方向换行
*/
/* flex-wrap: nowrap; */
/*
flex-flow wrap 和 direction 的简写属性
*/
/* flex-flow: row wrap; */
/*
justify-content 如何分配主轴上的空白空间(主轴上的元素如何排列)
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素在主轴中间排列
space-around 空白分布到元素的两侧
space-evenly 空白分布到元素的但侧
space-between 空白分布到元素的中间
*/
/* justify-content: flex-start; */
/*
align-items 元素在侧轴上如何对齐
指的是元素间的关系
stretch 默认值 将元素之间的长度设置为相同的值
flex-start 元素不会拉伸，沿着侧轴起边对齐
flex-end 元素不会拉伸，沿着侧轴终边对齐
center 居中对齐
baseline 基线对齐
*/
/* align-items: flex-start; */
/*
align-content 辅轴空白空间的分布
flex-start 沿着辅轴起边排列
flex-end 沿着辅轴终边排列
center 辅轴中间排列
space-around 空白分布到元素的两侧
space-evenly 空白分布到元素的但侧
space-between 空白分布到元素的中间
*/
/* align-content: center; */
/*
align-self 用来覆盖当前弹性元素上的align-items
*/
/* align-self: flex-start; */
}
/* 弹性元素 */
li {
width: 100px;
height: 100px;
font-size: 50px;
text-align: center;
}
li:nth-child(1) {
background-color: aquamarine;
/*
弹性元素的属性：
flex-grow 指定弹性元素的伸展系数
默认值是0
当父元素有多余空间时，子元素如何伸展
父元素多余的空间子元素会按照比例进行分配
flex-shrink 指定弹性元素的收缩系数
当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩
缩减多少是根据缩减系数和元素大小来计算
flex-basis 指定元素在主轴上的基础长度
如果主轴是横向，则指定的就是元素的宽度
如果主轴是纵向，则指定的就是元素的高度
auto 默认值 参考元素自身的高度或宽度
可以设置具体值 100px
flex 可以设置弹性元素所有的样式
flex: 增长 缩减 基础长度;
inherit 0 1 auto
auto 1 1 auto
none 0 0 auto
order 决定弹性元素的排列顺序
*/
/* flex-grow: 1; */
flex-shrink: 1;
/* flex-basis: fill; */
/* flex: inherit; */
}
li:nth-child(2) {
background-color: pink;
/* flex-grow: 2; */
flex-shrink: 2;
}
li:nth-child(3) {
background-color: black;
/* flex-grow: 3; */
flex-shrink: 3;
}
</style>
</head>
<body>
<!--
flex(弹性盒、伸缩盒)：
是CSS中的一种布局方式，它主要用来代替浮动来完成页面的布局
flex可以使元素具有弹性，让元素随着页面大小的改变而改变
弹性容器：
要使用弹性盒，必须先将一个元素设置为弹性容器
通过display来设置弹性容器
display:flex; 设置为块级弹性容器
display:inline-flex; 设置为行内弹性容器
弹性元素：
弹性容器的子元素是弹性元素(弹性项)
弹性元素可以同时是弹性容器
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 将网页的视口设置为完美视口(编写移动端页面时需带上) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
font-size: 20px;
}
.box1 {
width: 48px;
height: 35px;
background-color: rebeccapurple;
}
.box2 {
/* 48px × 35px */
width: 6.4vw;
height: 4.667vw;
background-color: gray;
}
.box3 {
/* 20px * 5 = 100px */
width: 5rem;
}
</style>
</head>
<body>
<!--
像素:
屏幕是由一个一个发光的小点构成,这一个个的小点就是像素
分辨率: 1920 x 1080 说的就是屏幕中小点的数量
在前端开发中像素要分成两种情况讨论: css像素 和 物理像素
物理像素，上述所说的小点点就属于物理像素
CSS像素,编写网页时，我们所用像素都是css像素
浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现
一个css像素最终由几个物理像素显示,由浏览器决定:
默认情况下在pc端: 一个css像素 = 一个物理像素
视口(viewport):
视口就是屏幕中用来显示网页的区域
可以通过查看视口的大小，来观察css像素和物理像素的比值
在编写移动端页面时，不能再使用px来进行布局
vw 表示视口的宽度(view width)
100vw = 一个视口的宽度
1vw = 1%视口宽度
0.1333333333333333vw = 1px
em
rem
1 rem = 1 html的字体大小
-->
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</body>
</html>
