less
less是什么
less是一种提高工作小路的技术 CSS预处理器 （less，scss，stylues 技术名词）
工作流程
1.新建less文件 后缀名less
2.按照less的语法要求 在less文件中编写代码
3.通过easy less vscode 插件来 编译less文件
4.生成对应的css文件
5.在网页中直接引入翻译好的css文件即可
// 声明 一个变量
@color: black;
div {
width: 100px;
height: 100px;
color: @color;
}
遍写完less文件保存，自动生成css文件
div {
width: 100px;
height: 100px;
color: black;
}
less具体作用
通过在less中设置一个变量：会变化的属性
给要用的标签加上这个less变量，做到一改全改的功能
// 声明 一个变量 会变化的数据
// 作用 把css属性设置到一个地方 做到一改 全改的功能
// 固定语法 @+任意的名称 （有语义的英文）
@color: red;
@font-size:18px;
div {
width: 100px;
height: 100px;
color: @color;
}
a {
color: @color;
}
p {
font-size: @font-size;
color: @font-size;
}
// 当页面有一种主题色 当需要修改的时候，只需要改一个地方即可
// 使用less 变量技术 就可以做到
div {
width: 100px;
height: 100px;
color: red;
}
a {
color: red;
}
p {
font-size: 18px;
color: 18px;
}
less是支持直接运算的，相比css不能直接运算
// 默认css 不支持运算 得使用calc
// less 支持直接运算
@font-size: 12px;
div {
width: 100xp + 200px;
// 使用乘除 加括号
height: (300px / 3);
// 字体是变量的两倍
font-size: @font-size * 2;
}
mixin混合用法
// 有三个元素都要使用一张精灵图 位置都不同情况下
// 定义一个 mixin .x括号 大括号
// 类似变量，当改变mixin属性也可以一改全改
.a() {
background-image: url(1.png);
background-size: contain;
background-repeat: no-repeat;
}
div {
// 把mixin放进去 注意加 “;”
.a();
background-position: -30 10;
}
a {
.a();
background-position: 30 20;
}
p {
.a();
background-position: 70 50;
}需要
注意点：
mixin语法 : .x() {}
给标签加MIXIN后注意添加 “ ; ”
mixin混合变量用法
// 有三个元素都要使用一张精灵图 位置都不同情况下
.a(@x,@y) {
// 这三个因为是共同样式 所以用mixin
background-image: url(1.png);
background-size: contain;
background-repeat: no-repeat;
// 第二步给变量名设置样式,代表我的变量x y 指的是背景定位
background-position: @x @y;
}
div {
// 可以混合变量把BP写进mixin中，首先给minxin括号添加变量名
// 把mixin放进去 注意加 “;”
.a(-30px,10px);
// background-position: -30px 10px;
}
a {
// 第三步，把值写进去，变量一改，指背景图位置发生改变
.a(3.2vw,20px);
// background-position: 30px 20px;
}
公共样式用mixin，一个标签多个属性值 也就是出现变量用mixin混合变量
变量名卸载mixin里，然后给变量设置样式， 后面标签需要用就把带有变量的mixin带进去
less嵌套
// 变成子代选择器
div {
width: 300px;
height: 300px;
p {
width: 200px;
}
> a {
font-size: 12px;
}
}
// 添加伪元素 注意写伪元素前要添加&才可以，不然会导致CSS中语法错误，:: 前多了一个空格
div {
height: 75px;
&::after {
content: "我是伪元素";
}
}
margin 外挤
padding 内挤
字数不统一 不能用宽 给li用padding 内挤撑开宽高
要。。。上下padding'要慎用 有兼容性问题无法保证*
响应式
作用：
只写一套代码 可以在PC端运行 体验不错 还可以在移动端运行
原理：
通过媒体查询来实现 ，能做到根据屏幕宽不同加载不同的css
根据屏幕宽度不同，使用不同的css
假如屏幕比较宽 里面宽度设置50%
假如屏幕比较窄 里面宽度设置25%
媒体查询语法：
@media (width:400px) {
body {
background-color: red;
}
}
/* 指定区间 */
/* 小于100px 最大就是100 */
@media screen and (max-width:100px) {
body {
background-color: orange;
}
}
/* 大于200px 最小200px */
@media screen and (min-width:200px) {
body {
background-color: gray;
}
}
/* 大于400小于800 */
@media screen and (min-width:400px) and (max-width:800px) {
body {
background-color: aqua;
}
}
boostrap
本质：
媒体查询＋浮动
引入步骤：
<!-- 第一步引入boot的CSS文件 -->
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<!-- 第二步引入JQS -->
<script src="./lib/bootstrap/js/jquery.js"></script>
<!-- 第三步引入boot的js文件 -->
<script src="./lib/bootstrap/js/bootstrap.js"></script>
栅格系统：
栅格系统是boostrap的核心，也是实现响应式布局的核心
bootstrap将屏幕划分成四种宽度
1.大屏幕 >1200px lg
2.中屏幕 992-1200px md
3.小屏幕 768-992px sm
4.超小屏幕 <768 xs
栅格系统默认将一行 划分成 12份 也就是一行12列 如果需要不同屏幕下一行显示个数不同：
<div class="row">
<div class="col-xs-6 col-sm-3">1</div>
<div class="col-xs-6 col-sm-3">2</div>
<div class="col-xs-6 col-sm-3">3</div>
<div class="col-xs-6 col-sm-3">4</div>
<!-- lg指大屏下样式，所以要想好代码在每一种屏幕下的表现 -->
</div>
注意：
bootstrap 做了一个额外的设置 自动让较大屏幕沿用较小屏幕的设置。
根据需求 如在什么屏幕下 一行有几个元素 通过观察就可以直接写出来
固定写法：
在最外层写一个类 固定的：
container(居中) container-lfuid (全屏)
container 就是版心， 宽度会跟随屏幕宽度变化 而变化
两者的用法 ：
需要版心的时候就用 container
如果要全屏就 container-fluid
如果不加版心就会往外撑开 有负外边距 特点： 会有滚动条
版心里写一个类 固定的：row
如果删除row 表示里面就是正常的栅格 row的外边和里面就互不影响
案例不熟悉的点
1 对于滚动的使用 关于bilibili案例中
首先是水平方向的滚动条 给整体大盒子加宽度和overflow: auto; 里面子盒子宽度应该由字体撑开 加宽度是没用的
ul {
width: calc(100% - 10.667vw);
display: flex;
overflow: auto;
}
其次是内容 垂直方向的滚动 首先要给整体 body添加100vh 然后让 头部元素 和 内容元素 df 最后给内容部分大盒子加overflow: auto
body {
background-color: #f3f3f3;
height: 100vh;
display: flex;
flex-direction: column;
}
.vedio {
// flex: 1;
overflow: auto;
}
