1.13Web前端基础笔记

最新推荐文章于 2026-01-02 18:15:00 发布

原创最新推荐文章于 2026-01-02 18:15:00 发布 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #html #web

1.web前端——html、css基础专栏收录该内容

13 篇文章

订阅专栏

本文介绍了Less前端预处理器的基本概念，包括变量、父元素拓展和弹性盒模型。讲解了如何使用Less进行样式定义，如变量重名规则、混合函数，并展示了如何设置弹性容器和弹性元素。还探讨了像素、vw单位在前端布局中的应用以及媒体查询实现响应式设计。

文章目录

一、less简介
二、less中的变量
三、父元素和拓展
四、弹性盒（flex）
五、像素
六、vw单位
六、媒体查询

一、less简介

less是一门css的预处理语言

less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
在less中添加了许多的新特性：像对变量的支持、对mixin的支持
less的语法大体上和css一致，但less中增添了许多对css的拓展，所以浏览器无法直接执行less代码，必须先将less转换为css，再由浏览器执行

" // "是less中的注释，单行，不会被解析到css中
“ /* */ ”是css中的注释，多行，内容会被解析到css中

二、less中的变量

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

变量的语法： @变量名

@a: 200px;
@b: #bfa;
@c:box1;

使用变量时，如果是直接使用则以 @变量名的形式即可

.box1{
	width: @a;
	color: @b;
}

作为类名，或作为一部分值时，必须以 @{变量名} 的形式使用

@{c}{
	width: @a;
	backgroung-image: url("@{c}/1.png");
}

变量重名时，会优先使用距离更近的变量

可以用" $ "引用上面的元素

.widget{
    color: antiquewhite;
    background-color: $color;
}

三、父元素和拓展

& 就表示外层的父元素
：extend() 对当前选择器拓展指定选择器的样式（选择器分组）
.p1() 直接对指定的样式进行引用，相当于将元素的样式进行了复制，mixin混合
.p4(){} 使用类选择器可以在选择器后面添加一个括号，实际上就是创建了一个mixins
混合函数：可以直接设置变量，按顺序传递参数
在less中所有数值可以直接进行运算
@import “syntax2.less”;

①less：

.test(){
    width: 100px;
    height: 100px;
    background-color: #bfa;
}
div{
    .test;
}

①css：

div {
  width: 100px;
  height: 100px;
  background-color: #bfa;
}

②less：

.test(@w){
    width: @w;
    height: 100px;
    background-color: #bfa;
}
div{
    .test(100px);
}

②css：

div {
  width: 100px;
  height: 100px;
  background-color: #bfa;
}

③less：

.test(@w,@h,@bg-color){
    width: @w;
    height: @h;
    background-color: @bg-color;
}
div{
    .test(100px,200px,#fff);
}

③css：

div {
  width: 100px;
  height: 200px;
  background-color: #fff;
}

④less：

.test(@w,@h,@bg-color){
    width: @w;
    height: @h;
    background-color: @bg-color;
}
div{
    .test(@bg-color:red,@w:50px,@h:90px);
}

④css：

div {
  width: 50px;
  height: 90px;
  background-color: red;
}

⑤less：

.test(@w: 100px,@h: 500px,@bg-color){
    width: @w;
    height: @h;
    background-color: @bg-color;
}
div{
    .test(@bg-color:red,@h:90px);
}

css：

div {
  width: 100px;
  height: 90px;
  background-color: red;
}

四、弹性盒（flex）

flex（弹性盒、伸缩盒）

是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
flex可以使元素具有弹性，它让元素可以随着页面大小的改变而改变

1.弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器
display: flex; 将元素设为块级弹性容器
display: inline-flex; 将元素设为行内的弹性容器

1.弹性容器的属性：flex-direction:row; 指定容器中弹性元素的排列方式

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

主轴：弹性元素的排列方向成为主轴
侧轴：与主轴垂直方向的成为侧轴

2.弹性容器的样式：

flex-wrap: 设置弹性元素是否在弹性容器中自动换行
可选值：
nowrap 默认值，元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 元素沿着辅轴反方向换行

flex-flow ： wrap和direction的简写属性
flex-flow: row wrap;

justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列）
可选值：
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布到元素两侧
space-between 空白均匀分布到元素间
space-evenly空白分布到元素的单侧

align-items:
元素在辅轴上如何对齐
可选值：
stretch 默认值，将元素的长度设置为相同的值（每一行相同）
flex-start 元素不会拉伸，沿着辅轴起边对齐
flex-end 沿着辅轴的终边对齐
center 居中对齐
baseline 基线对齐

align-content 辅轴空白空间的分布
与justify-content相同

align-self 用来覆盖当前弹性元素上的align-items

2.弹性元素

弹性容器的子元素是弹性元素（弹性项）
弹性元素可以同时是弹性容器

1.弹性元素的属性：flex-grow 、 flex-shrink 指定弹性元素的伸展、收缩的系数

父元素的剩余空间，会按照比例进行分配
flex-grow: 0;
flex-shrink: 1;

2.弹性元素的样式

flex-grox: 1; 弹性的增长系数

flex-shrink: 1; 弹性元素的缩减系数
缩减系数的计算方式复杂
缩短多少根据缩减系数和元素大小来计算

flex-basis 指定了元素在主轴上的基础长度
如果主轴是横向的则该值指定的就是元素的宽度
如果主轴是纵向的则该值指定的就是元素的高度
默认值是auto，表示参考元素自身的高度或宽度
如果传递了一个具体的数值，则以该数值为主

flex 可以设置弹性元素所有的三个样式
flex 增长缩短基础；
initial = “ flex： 0 1 auto; ” 只能减
auto = “ flex: 1 1 auto; ” 可增可减
none = “ flex: 0 0 auto; ” 不能增也不能减

order：1; 决定弹性元素的排列顺序

3.弹性盒练习——导航条

<!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/reset.css">
    <style>
        .nav{
            width: 1210px;
            height: 48px;
            line-height: 48px;
            background-color: #e8e7e3;
            margin: 20px auto 0;
            display: flex;
            /* 设置为弹性容器 */
        }
        li{
            /* 设置增长系数 */
            flex-grow: 1;
        }
        a{
            display: block;
            color: #808080;
            text-decoration: none;
            font-size: 16px;
            text-align: center;
        }
        a:hover{
            background-color: #636363;
            color: #fff;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">HTML/CSS</a></li>
        <li><a href="#">Browser Side</a></li>
        <li><a href="#">Server Side</a></li>
        <li><a href="#">Programming</a></li>
        <li><a href="#">XML</a></li>
        <li><a href="#">Web Building</a></li>
        <li><a href="#">Reference</a></li>
    </ul>
</body>
</html>

结果：
在这里插入图片描述

五、像素

1.像素

屏幕是由很多个发光的小点构成的，这些小点就是像素
分辨率：1920 × 1080 说的就是屏幕中的点数量

在前端开发中像素分为两种：CSS像素、物理像素
物理像素：上述的小点点就是物理像素
CSS像素：编写网页时，用到的就是CSS像素

浏览器在显示网页时，要先将CSS像素转换成物理像素在呈现

2.视口

视口就是屏幕中用来显示网页的位置
可以通过查看视口的大小，开观察CSS像素和物理像素的比值

默认情况下：
视口宽度

1920（CSS像素）
1920px （物理像素）
此时，CSS像素和物理像素的比是1：1

放大两倍的情况下：
视口宽度

960（CSS像素）
1920px （物理像素）
此时，CSS像素和物理像素的比是1：2

所以可以通过改变视口的大小，来改变CSS像素和物理像素的比值

3.手机像素

不同屏幕单位像素的大小是不同的，像素越小屏幕月清晰
智能手机的像素点远远小于计算机的像素点

在默认条件下，移动端的网页都会将视口设置为980像素（CSS像素），以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页进行缩放以完整显示网页
所以大部分的pc端网站都可以在移动端正常浏览，但是往往都没有一个好的体验，为了解决这个问题，大部分网站会专门为移动端设计网页

4.完美视口

移动端默认的视口大小是980px（css像素）
默认情况下，移动端的像素比是 980/移动端宽度
若果直接在网页中编写移动端代码，这样在980视口下，像素比非常不好，会导致网页中的内容非常小

可以通过meta标签来设置视口大小

每一款移动设备都有一个最佳的像素比，只需将像素比设置为该值就可得到一个最佳效果
将像素比设置为最佳像素比的视口大小就称为完美视口

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

六、vw单位

由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备中意义不一样：在iphone6中 375是全屏，在plus中375会缺一块
所以在移动端开发时，不能用px来进行布局，使用vw

1.vw表示的是视口的宽度（viewport width）

100vw = 一个视口的宽度
1vw = 1%视口宽度

vw这个单位相当于视口宽度进行计算(成比例)：

100vw = 750px(设计图的像素)
6.4vw = 48px(设计图像素)
所以1px = 0.133333333vw

2.rem

1 rem = 1 html 的字体大小
5.333 vw = 40 px
font-size：5.333vw;
∴ 1 rem = 40 px

六、媒体查询

1.响应式布局

网页可以根据不同的设备或窗口大小呈现出不同的效果
使用响应式布局，可以使一个网页适用于所有设备
相应布局的关键就是 媒体查询
通过媒体查询，可以为不同的设备，或设备的不同状态来分别设置样式

2.使用媒体查询

语法：@media 查询规则{ }
媒体类型：
all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
可以使用“，”连接多个媒体设备，这样他们之间就是或的关系

3.可以在媒体类型前加一个 “only” 表示只有

only 的使用主要是兼容一些老版本的浏览器

4.媒体样式

width 视口的宽度
height 视口的高度
min-width 视口的最小宽度（视口大于指定宽度时生效）
max-width 视口的最大宽度（视口小于指定宽度时生效）

@media only screen and (min-width: 500px) and (max-width: 700px){
	body{
		background-color: #bfa;
	}
}

样式切换的分界点，称为断点，也就是网页的样式会在这个点发生变化，一般比较常用的断点：
小于768 超小屏幕 max-width: 768px;
大于768 小屏幕 min-width: 768px;
大于992 中型屏幕 min-width: 992px;
大于1200 大屏幕 min-width: 1200px;