03-CSS

2023-07-24  本文已影响0人  二斤寂寞

Emmet和结构伪类

认识emmet语法

◼ Emmet (前身为 Zen Coding) 是一个能大幅度****提高前端开发效率****的一个工具.

◼ !和html:5可以快速生成完整结构的html5代码

image.png

>(子代)和+(兄弟)

image.png

*(多个)和^(上一级)

image.png

()(分组)

image.png

属性(id属性、class属性、普通属性) {}(内容)

div#header+div#main>.container>a[href ]

image.png

a[href="http://www.baidu.com"]{百度一下}

image.png

$(数字)

ul>li.item$*5

image.png

隐式标签

image.png

CSS Emmet

image.png

结构伪类 - :nth-child

◼ :nth-child(1)

◼ :nth-child(2n)

◼ :nth-child(2n + 1)

◼ nth-child(-n + 2)

结构伪类 - :nth-last-child( )

◼ :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数

◼ :nth-of-type()用法跟:nth-child()类似

◼ :nth-last-of-type()用法跟:nth-of-type()类似

结构伪类 - :nth-of-type( )、:nth-last-of-type( )

◼ 其他常见的伪类(了解):

◼ 下面的伪类偶尔会使用:

否定伪类(negationpseudo-class)

◼ :not()的格式是:not(x)

◼ :not(x)表示****除x以外的元素

额外知识补充

边框的形状

◼ border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状:

image.png

◼ 假如我们将border宽度设置成50会是什么效果呢?

◼ 所以利用border或者CSS的特性我们可以做出很多图形:

认识Web字体

◼ 在之前我们有设置过页面使用的字体: font-family

◼ 比如下面的字体样式, 系统的字体肯定是不能实现的

image.png

◼ 那么我们是否依然可以在网页中使用这些字体呢? 使用Web Fonts即可****.

Web fonts的工作原理

◼ 首先, 我们需要通过一些渠道****获取到希望使用的字体****(不是开发来做的事情):

◼ 其次, 在我们的CSS代码当中使用该字体(重要):

◼ 最后, 在部署静态资源时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器中;

◼ 用户的角度:

使用Web Fonts

◼ 演示，通过如下的方式获取到了字体文件:

◼ 第一步:在字体天下网站下载一个字体

◼ 第二步:使用字体;

◼ 使用过程如下:

image.png

◼ 注意: @font-face 用于加载一个自定义的字体;

web-fonts的兼容性

◼ 我们刚才使用的字体文件是 .ttf, 它是TrueType字体.

◼ TrueType字体:拓展名是 .ttf

◼ 这里我们提供一个网站来生产对应的字体文件:

image.png

web fonts兼容性写法

◼ 如果我们具备很强的兼容性, 那么可以如下格式编写:

image.png

◼ 这被称为"bulletproof @font-face syntax(刀枪不入的@font-face语法)“:

◼ src用于指定字体资源

认识字体图标

◼ 思考:字体可以设计成各式各样的形状，那么能不能把字体直接设计成图标的样子呢?

◼ 字体图标的好处:

◼ 字体图标的使用:

◼ 将字体文件和默认的css文件导入到项目中

字体图标的使用

◼ 字体图标的使用步骤:

◼ 使用字体图标常见的有两种方式:

image.png

认识精灵图CSSSprite

◼ 什么是CSSSprite

◼ 使用CSS Sprite的好处

◼ Sprite图片制作(雪碧图、精灵图)

精灵图的使用

◼ 精灵图如何使用呢?

✓ 1.设置对应元素的宽度和高度

✓ 2.设置精灵图作为背景图片

✓ 3.调整背景图片的位置来展示

◼ 如何获取精灵图的位置

image.png

Cusor

◼ cursor****可以设置鼠标指针(光标)在元素上面时的显示样式

◼ cursor****常见的设值有

CSS元素定位

标准流(Normal Flow)

◼ 默认情况下，元素都是按照normal flow(标准流、常规流、正常流、文档流【document flow】)进行排布

image.png 
<body> 
     <span>span1</span> 
     <img src="images/cube.jpg" alt="">
     <span style="display: inline-block">span2</span> 
     <div>div</div>
     <p>p</p>
     <span style="display: inline-block">span</span> 
     <strong>strong</strong>
     <h1>h1</h1>
     <span>span3</span>
     <span style="display: inline-block">span4</span> 
     <span>span5</span> 
</body>

margin-padding位置调整

◼ 在标准流中，可以使用margin、padding对元素进行定位

◼ 比较明显的缺点是

◼ 如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢?

认识元素的定位

◼ 定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为:

image.png

认识position属性

◼ 利用position可以对元素进行定位，常用取值有5个:

image.png

◼ 默认值:

◼ 使用下面的值, 可以让元素变成 定位元素(positioned element)

静态定位 - static

◼ position属性的默认值

相对定位 - relative

◼ 元素按照normal flow布局

◼ 可以通过left、right、top、bottom进行定位

◼ left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示

image.png

◼ 相对定位的应用场景

固定定位 - fixed

◼ 元素脱离normal flow(脱离标准流、脱标)

◼ 可以通过left、right、top、bottom进行定位

◼ 定位参照对象是视口(viewport)

◼ 当画布滚动时，固定不动

画布 和 视口

◼ 视口(Viewport)

◼ 画布(Canvas)

◼ 宽高对比

image.png

绝对定位 - absolute

◼ 元素脱离normal flow(脱离标准流、脱标)

◼ 可以通过left、right、top、bottom进行定位

◼ 定位元素(positioned element)

子绝父相

◼ 在绝大数情况下，子元素的****绝对定位都是相对于父元素进行定位

◼ 如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是:

将position设置为absolute/fixed元素的特点(一)

◼ 可以随意设置宽高

◼ 宽高默认由内容决定

◼ 不再受标准流的约束

◼ 不再给父元素汇报宽高数据 ◼ 脱标元素内部默认还是按照标准流布局

将position设置为absolute/fixed元素的特点(二)

◼ 绝对定位元素(absolutely positioned element)

◼ 对于绝对定位元素来说

◼ 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性

◼ 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性

auto到底是什么?

◼ 800 = 200 + ml0 + mr0 + 0 + 0

◼ auto -> 交给浏览器你来出来

◼ width: auto;

粘性定位 - sticky

◼ 另外还有一个定位的值是position: sticky，比起其他定位值要新一些.

◼ sticky是相对于最近的滚动祖先包含滚动视口的(the nearest ancestor scroll container’s scrollport )

image.png

position值对比

image.png

CSS属性 - z-index

◼ z-index属性用来设置定位元素的****层叠顺序****(仅对定位元素有效)

◼ 比较原则

CSS元素定位

认识浮动

◼ float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

◼ 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果

◼ 可以通过float属性让元素产生浮动效果，float的常用取值

浮动规则一

◼ 元素一旦浮动后, 脱离标准流

image.png

浮动规则二

◼ 如果元素是向左(右)浮动，浮动元素的左(右)边界不能超出包含块的左(右)边界

image.png

浮动规则三

◼ 规则五: 浮动元素之间不能层叠

image.png

浮动规则四

◼ 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

image.png

浮动规则五

◼ 规则五: 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

image.png

浮动的问题 – 高度塌陷

◼ 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度

◼ 解决父元素高度坍塌问题的过程，一般叫做清浮动(清理浮动、清除浮动)

◼ 清浮动的目的是

◼ 如何清除浮动呢? 使用clear属性

CSS属性 - clear

◼ clear属性是做什么的呢?

◼ clear的常用取值

◼ 那么我们可以利用这个特性来清除浮动.

清除浮动的方法

◼ 事实上我们有很多方法可以清除浮动

◼ 方法一: 给父元素设置固定高度  扩展性不好(不推荐)

◼ 方法二: 在父元素最后增加一个空的块级子元素，并且让它设置clear: both

◼ 方法三: 给父元素添加一个伪元素

方法三 – 伪元素清除浮动

◼ 给父元素增加::after伪元素

image.png

布局方案总结

image.png

CSS Flex布局

认识flexbox

◼ Flexbox翻译为弹性盒子:

◼ flex布局是目前web开发中使用最多的布局方案:

◼ 为什么需要flex布局呢?

原先的布局存在的痛点

◼ 原来的布局存在哪些痛点呢? 举例说明:

image.png

flex布局的出现

◼ 所以长久以来, 大家非常期待一种真正可以用于对元素布局的方案: 于是flex布局出现了****;

◼ flexbox在使用时, 我们最担心的是它的兼容性问题:

image.png

flex布局的重要概念

◼ 两个重要的概念:

◼ 当flex container中的子元素变成了flex item时, 具备一下特点:

◼ 设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

image.png

flex布局的模型

image.png

flex相关的属性

image.png

flex-direction

◼ flex items 默认都是沿着 main axis(主轴)从 main start 开始往 main end 方向排布

image.png

flex-wrap

◼ flex-wrap 决定了 flex container 是单行还是多行

image.png

flex-flow

◼ flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

image.png

justify-content

◼ justify-content 决定了 flex items 在 main axis 上的对齐方式

image.png

align-item

◼ align-items 决定了 flex items 在 cross axis 上的对齐方式

image.png

align-content

◼ align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似

✓ flex items 之间的距离相等

✓ 与 cross start、cross end两端对齐

✓ flex items 之间的距离相等

✓ flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半

✓ flex items 之间的距离相等
✓ flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离

image.png

flex-item属性 - order

◼ order 决定了 flex items 的排布顺序

image.png

flex-item属性 - flex items

◼ flex items 可以通过 align-self 覆盖 flex container 设置的 align-items

image.png

flex-item属性 - flex-grow

◼ flex-grow 决定了 flex items 如何扩展(拉伸/成长)

◼ 如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为

image.png

◼ flex items 扩展后的最终 size 不能超过 max-width\max-height

flex-item属性 - flex-shrink

◼ flex-shrink 决定了 flex items 如何收缩(缩小)

◼ 如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩****的 size为

◼ flex items 收缩****后的最终 size 不能小于 min-width\min-height

flex-item属性 - flex-basis

◼ flex-basis 用来设置 flex items 在 main axis 方向上的 base size

◼ 决定 flex items 最终 base size 的因素，从优先级高到低

flex-item属性 - flex属性

◼ flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。

image.png

◼ 单值语法: 值必须为以下其中之一:

◼ 双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。

✓ 一个无单位数:它会被当作 <flex-shrink> 的值。

✓ 一个有效的宽度值: 它会被当作 <flex-basis> 的值。

◼ 三值语法:

思考: 如下布局如何解决对其问题

image.png

CSS动画

CSS属性 - vertical-align

image.png

深入理解vertical-align – line boxes

◼ 官方文档的翻译:vertical-align会影响 行内块级元素 在一个 行盒 中垂直方向的位置

◼ 思考:一个div没有设置高度的时候，会不会有高度?

◼ 但是内容撑起来高度的本质是什么呢?

◼ 行高为什么可以撑起div的高度?

◼ 那么，进一步思考:

深入理解vertical-align – 不同情况分析

◼ 情况一:只有文字时，line boxes如何包裹内容?(注意:红色是包裹的div，下面也都一样)

image.png

◼ 情况二:有图片，有文字时，line-boxes如何包裹内容?

image.png

◼ 情况三:有图片，有文字，有inline-block(比图片要大)如何包裹内容?

image.png

深入理解vertical-align – 不同情况分析

◼ 情况四:有图片，有文字，有inline-block(比图片要大)而且设置了margin-bottom，如何包裹内容?

image.png

◼ 情况五:有图片、文字、inline-block(比图片要大)而且设置了margin-bottom并且有文字，如何包裹内容?

image.png

vertical-align的baseline

◼ 结论:line-boxes一定会想办法包裹住当前行中所有的内容。

◼ 但是，但是为什么对齐方式千奇百怪呢?

◼ 我们来看官方vertical-align的默认值:没错，就是baseline

image.png

◼ 但是baseline都是谁呢?

◼ 一切都解释通了

vertical-align的其他值

◼ 现在，对于不同的取值就非常容易理解了

◼ 解决图片下边缘的间隙方法:

CSS属性 - transform

◼ CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。

◼ Transform是形变的意思，transformer就是变形金刚

◼ 常见的函数transformfunction有:

◼ 通过上面的几个函数，我们可以改变某个元素的形变

位移 - translate

◼ 平移:translate(x, y)

◼ 值个数

◼ 值类型:

image.png

缩放 - scale

◼ 缩放:scale(x, y)

◼ 值个数

◼ 值类型:

✓ 1:保持不变

✓ 2:放大一倍

✓ 0.5:缩小一半

image.png

transform-origin

◼ transform-origin:变形的原点

◼ 一个值:

◼ 两个值:

◼ 必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个

image.png

缩放 - rotate

◼ 旋转:rotate(deg)

◼ 值个数

◼ 值类型:

◼ 注意:旋转的****原点****受transform-origin的影响

image.png

倾斜 - skew

◼ 旋转:skew(x, y)

◼ 值个数

◼ 值类型:

◼ 注意:旋转的****原点****受transform-origin的影响

image.png

过渡动画 - transition

◼ transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的 一个简写属性。

image.png

关键帧动画

◼ 之前我们学习了transition来进行过渡动画，但是过渡动画只能控制首尾两个值:

◼ 关键帧动画****使用@keyframes来定义多个变化状态，并且使用animation-name来声明匹配:

◼ 另外，也可以使用from和to关键字:

animation属性

◼ CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation- iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

项目实战

代码规范

◼ 参考凹凸实验室代码规范:

image.png

CSS 编写顺序

image.png

CSS 编写顺序的思路

◼ 1.先确定盒子本身是如何布局

◼ 2.盒子的特性和可见性

◼ 3.盒子模型

◼ 4.内部的文本文字

◼ 5.background

◼ 6.其他

组件化开发思路

◼ 事实上目前Vue、React、小程序都采用的是组件化开发思路

image.png

项目整体思路 – 各个击破

image.png

meta 元素

◼ meta元素用于定义 元数据 :

◼ meta 元素定义的 元数据 的类型包括以下几种:

meta 元素的http-equiv属性

◼ 我们会发现，无论是默认创建的html页面还是王者荣耀都有如下代码:

image.png

◼ 它的作用到底是什么呢?网上众说纷纭，我们直接看官方文档的解释:

image.png

meta 元素的name属性

◼ name属性的值非常多，具体的内容可以查看文档:

◼ 我们介绍几个常用的:

link 图标

◼ Favicon是 favorites icon 的缩写，亦被称为website icon(站点图标)、page icon(页面图标);

◼ 前面我们已经学习了它的用法:

image.png

◼ 事实上它还有很多兼容性的写法:

image.png

◼ 这里有一个疑惑?

image.png

◼ 下面的link使用方法表示有另一个可替换的网站供选择:

image.png

CSS 样式的字符 编码

◼ 之前我们有制定过HTML页面的****编码****，但是并没有制定****CSS****样式的编码。

◼ 在样式表中有多种方法去声明字符 编码 ，浏览器会按照以下顺序尝试下边的方法(一旦找到就停止并得出结果):

◼ 开发中推荐在CSS的开头编写@charset指定编码:

image.png

额外知识补充(一)

HTML5 语义化元素

◼ 在HMTL5之前，我们的网站分布层级通常包括哪些部分呢?

◼ 但是这样做有一个弊端:

◼ HTML5 新增了语义化的元素:

image.png

HTML5 其他新增元素

◼ Web端事实上一直希望可以更好的嵌入音频和视频, 特别是21世纪以来, 用户带宽的不断提高, 浏览器因为和视频变得非常容易.

◼ HTML5 增加了对媒体类型的支持:

◼ Video和Audio使用方式有两个:

HTML5 新增元素 - video

◼ HTML <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。

◼ video常见的属性:

image.png

video支持的视频格式

◼ 每个视频都会有自己的格式, 浏览器的video并非支持所有的视频格式

image.png

video的兼容性写法

◼ 在<video>元素中间的内容，是针对浏览器不支持此元素时候的****降级****处理。

image.png

HTML5 新增元素 - audio

◼ HTML <audio> 元素用于在文档中嵌入音频内容, 和video的用法非常类似

image.png

◼ 常见属性:

image.png

audio支持的音频格式

◼ 每个音频都会有自己的格式, 浏览器的audio并非支持所有的视频格式

◼ 具体的支持的格式可以通过下面的链接查看:

image.png

◼ 在<audio>元素中间的内容，是针对浏览器不支持此元素时候的****降级****处理。

image.png

input元素的扩展内容

◼ HTML5 对 input元素 也进行了扩展，在之前我们已经学习过的其中几个属性也是HTML5的特性:

◼ 另外对于input的type值也有很多扩展:

◼ 查看MDN文档:

新增全局属性 data-*

◼ 在 HTML5 中, 新增一种全局属性的格式 data-, 用于自定义数据属性:*

image.png

◼ 在小程序中, 就是通过data-来传递数据的, 所以该全局属性必须要掌握.

CSS 属性 - white-space

◼ white-space用于设置空白处理和换行规则

image.png

CSS 属性 - text-overflow

◼ text-overflow通常用来设置文字溢出时的行为

◼ text-overflow生效的前提是overflow不为visible ◼ 常见的是将white-space、text-overflow、overflow一起使用:

image.png

CSS 中的函数

◼ 在前面我们有使用过很多个 CSS 函数:

◼ 下面我们再学习几个非常好用的 CSS 函数:

CSS 函数 - var

◼ CSS 中可以自定义属性

image.png

◼ 我们可以通过var函数来使用:

image.png

◼ 规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效)

CSS 函数 -calc

◼ calc() 函数允许在声明 CSS 属性值时执行一些计算。

image.png

CSS 函数 - blur

◼ blur() 函数将 高斯模糊 应用于输出图片或者元素;

◼ 通常会和两个属性一起使用:

image.png

CSS 函数 – gradient

◼ <gradient> 是一种 <image> CSS 数据类型的子类型 ，用于表现 两种或多种颜色的过渡转变 。

◼ <gradient>常见的函数实现有下面几种:

linear-gradient的使用

◼ linear-gradient:创建一个表示两种或多种颜色线性渐变的图片;

image.png

◼ radial-gradient:创建了一个图像，该图像是由从 原点 发出的两种或者多种颜色之间的逐步过渡组成;

image.png

浏览器前缀

◼ 有时候可能会看到有些 CSS 属性名前面带有: -o-、-xv-、-ms-、mso-、-moz-、-webkit-

image.png

◼ 官方文档专业术语叫做:vendor-specific extensions(供应商特定扩展)

◼ 为什么需要浏览器前缀了?

◼ 上述前缀叫做浏览器私有前缀，只有对应的浏览器才能解析使用

◼ 注意:不需要手动添加，后面学习了模块化****打包****工具会自动添加浏览器前缀

FC – Formatting Context

◼ 什么是 FC 呢?

◼ FC 的全称是Formatting Context，元素在标准流里面都是属于一个 FC 的;

image.png

◼ 块级元素的布局属于Block Formatting Context(BFC)

◼ 行内级元素的布局属于Inline Formatting Context(IFC)

BFC – Block Formatting Context

◼ block level box都是在 BFC 中布局的，那么这个BFC在哪里呢?拿出来给我看看。

◼ MDN上有整理出在哪些具体的情况下会创建 BFC :

BFC 有什么作用呢?

◼ 我们来看一下官方文档对 BFC 作用的描述:

image.png

◼ 简单概况如下:

◼ 那么这个东西有什么用呢?

BFC 的作用一:解决折叠问题(权威)

◼ 在同一个 BFC 中，相邻两个box之间的margin会折叠( collapse )

image.png

BFC 的作用二:解决浮动高度塌陷(权威)

◼ 网上有很多说法， BFC 可以解决浮动高度塌陷，可以实现清除浮动的效果。

◼ 事实上， BFC 解决高度塌陷需要满足两个条件:

◼ BFC 的高度是auto的情况下，是如下方法计算高度的

image.png

媒体查询

◼ 媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。

◼ 你可以根据设备的类型(比如屏幕设备、打印机设备)或者特定的特性(比如屏幕的宽度)来修改你的页面。

◼ 媒体查询的使用方式主要有三种:

image.png image.png

◼ 比较常用的是通过@media来使用不同的CSS规则，目前掌握这个即可;

媒体查询 - 媒体类型(Media types)

◼ 在使用媒体查询时，你必须指定要使用的媒体类型。

◼ 常见的媒体类型值如下:

◼ 被废弃的媒体类型:

媒体查询 – 媒体特性(Media features)

◼ 媒体特性(Media features)描述了 浏览器、输出设备，或是预览环境的具体特征;

image.png

媒体查询 – 逻辑操作符(logical operators)

◼ 媒体查询的表达式最终会获得一个Boolean值，也就是真(true)或者假(false)。

◼ 如果有多个条件，我们可以通过逻辑操作符联合复杂的媒体查询:

◼ 比如下面的媒体查询，表示:屏幕宽度大于500，小于700的时候，body背景颜色为红色;

image.png

常见的移动端设备

◼ 这里我们以iPhone为例:

image.png

CSS 中的单位

◼ 前面编写的CSS中，我们经常会使用px来表示一个长度(大小)，比如font-size设置为18px，width设置为100px。 ◼ px是一个长度(length)单位，事实上CSS中还有非常多的长度单位。

◼ 整体可以分成两类:

CSS 中的绝对单位( Absolute length units )

◼ 绝对单位:

image.png

CSS 中的相对单位( Relative length units )

◼ 相对长度单位

image.png

◼ em:

image.png

◼ rem:

image.png

◼ vw/wh

image.png

当我们聊pixel时，到底在聊些什么?

◼ 前面我们已经一直在使用px单位了，px是pixel单词的缩写，翻译为像素。

◼ 那么像素到底是什么呢?

image.png

像素的不同分类(一)

◼ 但是这个100个pixel到底是多少呢?

image.png

◼ 这里我们要深入到不同的像素概念中，来理解 CSS 中的pixel到底代表什么含义。

◼ 像素单位常见的有三种像素名称:

物理像素和逻辑像素

◼ 设备像素，也叫物理像素。

◼ 设备独立像素，也叫逻辑像素。

◼ CSS 像素

◼ 我们可以通过JavaScript中的screen.width和screen.height获取到电脑的逻辑分辨率:

image.png

DPR、 PPI 、 DPI

◼ DPR:device pixel ratio

image.png

◼ PPI (了解):每英寸像素(英语:Pixels Per Inch，缩写:PPI)

CSS 编写的痛点

◼ CSS 作为一种 样式语言 , 本身用来 给HTML元素添加样式 是没有问题的.

◼ 但是目前前端项目已经越来越复杂, 不再是简简单单的几行****CSS****就可以搞定的, 我们需要几千行甚至上万行的CSS来完成页面的美化工作.

◼ 随着代码量的增加, 必然会造成很多的编写不便:

◼ 所以有一种对CSS称呼是 “面向命名编程”;

◼ 社区为了解决CSS面临的大量问题, 出现了一系列的CSS预处理器(CSS_preprocessor)

常见的CSS预处理器

◼ 常见的预处理器有哪些呢? 目前使用较多的是三种预处理器:

◼ Sass/Scss:

◼ Less:

◼ Stylus:

认识Less

◼ 什么是Less呢? 我们来看一下官方的介绍:

image.png

◼ Less (Leaner Style Sheets 的缩写) 是一门CSS 扩展语言, 并且兼容CSS。

编写Less代码

◼ 我们可以编写如下的Less代码:

image.png

less代码的编译

◼ 这段代码如何被编译成CSS代码运行呢?

◼ 方式一:下载Node环境，通过npm包管理下载less工具，使用less工具对代码进行编译;

◼ 方法二:通过VSCode插件来编译成CSS或者在线编译

◼ 方式三:引入CDN的less编译代码，对less进行实时的处理;

image.png 
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

◼ 方式四:将less编译的js代码下载到本地，执行js代码对less进行编译;

Less语法一:Less兼容CSS

◼ Less语法一:Less是兼容CSS的

image.png

Less语法二 – 变量(Variables)

◼ 在一个大型的网页项目中，我们****CSS****使用到的某几种属性值往往是特定的

◼ 在Less中使用如下的格式来定义变量;

@变量名: 变量值;

image.png

Less语法三 – 嵌套(Nesting)

◼ 在之前的项目中，当我们需要找到一个内层的元素时，往往需要嵌套很多层的选择器

image.png

◼ Less提供了选择器的嵌套

image.png

◼ 特殊符号: & 表示当前选择器的父级

image.png

Less语法四 – 运算(Operations)

◼ 在Less中，算术运算符 +、-、、/ 可以对任何数字、颜色或变量进行运算。*

image.png

Less语法五 – 混合(Mixins)

◼ 在原来的CSS编写过程中，多个选择器中可能会有大量相同的代码

◼ 混合(Mixin)是一种将一组属性从一个规则集(或混入)到另一个规则集的方法。

image.png

◼ 注意:混入在没有参数的情况下，****小括号可以省略，但是不建议这样使用****;

Less语法五 – 混合(Mixins)

◼ 混入也可以传入变量(暂时了解)

image.png

◼ Less语法六:映射(Maps)

image.png

◼ 混入和 映射 结合:混入也可以当做一个自定义函数来使用(暂时了解)

image.png

less其他语法补充

◼ Less语法七:extend继承

image.png

◼ Less语法八:Less内置函数

image.png

less其他语法补充

◼ Less语法九:作用域(Scope)

image.png

◼ Less语法十:注释(Comments)

◼ Less语法十一:导入(Importing)

认识Sass和Scss

◼ 事实上，最初Sass 是Haml的一部分，Haml 是一种模板系统，由 Ruby 开发者设计和开发。

◼ 所以，Sass的语法使用的是类似于Ruby的语法，没有花括号，没有分号，具有严格的缩进;

image.png

◼ 我们会发现它的语法和CSS区别很大，后来官方推出了全新的语法SCSS，意思是Sassy CSS，他是完全兼容CSS的。

◼ 目前在前端学习SCSS直接学习SCSS即可:

◼ 目前大家掌握Less的使用即可;

什么是移动端适配?

◼ 移动互联网的快速发展，让人们已经越来越习惯于使用手机来完成大部分日常的事务。

◼ 移动端开发目前主要包括三类:

◼ 因为目前移动端设备较多，所以我们需要对其进行一些适配。

◼ 这里有两个概念:

image.png

认识视口viewport

◼ 在前面我们已经简单了解过视口的概念了:

◼ 但是在移动端，不太一样，你布局的****视口****和你可见的视口是不太一样的。

◼ 所以在移动端，我们可以将视口划分为三种情况:

◼ 这些概念的区分，事实上来自ppk，他也是对前端贡献比较大的一个人(特别是在移动端浏览器)

布局视口和视觉视口

◼ 布局视口(layout viewport)

◼ 默认情况下，一个在PC端的网页在移动端会如何显示呢?

◼ 我们相对于980px布局的这个****视口****，称之为****布局视口(layout viewport)****;

◼ 视觉视口(visual viewport)

◼ 在Chrome上按shift+鼠标左键可以进行缩放。

image.png

理想视口(ideal viewport)

◼ 如果所有的网页都按照980px在移动端布局，那么最终页面都会被缩放显示。

◼ 理想视口(ideal viewport):

image.png

移动端适配方案

◼ 移动端的屏幕尺寸通常是非常繁多的，很多时候我们希望在不同的屏幕尺寸上显示不同的大小;

✓ 在375px的屏幕上显示是100x100; ✓ 在320px的屏幕上显示是90+x90+; ✓ 在414px的屏幕上显示是100+x100+;

◼ 这个时候，我们可能可以想到一些方案来处理尺寸:

✓ 因为不同属性的百分比值，相对的可能是不同参照物，所以百分比往往很难统一;

✓ 所以百分比在移动端适配中使用是非常少的;

适配方案 – rem+动态html的font-size

◼ rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的 font-size尺寸。

◼ 比如如下案例:

image.png

◼ 这样在开发中，我们只需要考虑两个问题:

rem的font-size尺寸

◼ 方案一:媒体查询

✓ 1.我们需要针对不同的屏幕编写大量的媒体查询;

✓ 2.如果动态改变尺寸，不会实时的进行更新;

◼ 方案二:编写js代码

✓ 1.根据html的宽度计算出font-size的大小，并且设置到html上;

✓ 2.监听页面的实时改变，并且重新设置font-size的大小到html上;

◼ 方案三:lib-flexible库

image.png

rem的单位换算

◼ 方案一:手动换算

◼ 方案二:less/scss函数

image.png

rem的单位换算

◼ 方案三:postcss-pxtorem

◼ 方案四:VSCode插件

image.png

考拉海购设计稿

image.png

适配方案 - vw

◼ 在flexible GitHub****上已经有写过这样的一句话:

image.png

◼ 所以它更推荐使用viewport的两个单位****vw****、wh。

image.png

◼ vw的兼容性如何呢?

vw和rem的对比

◼ rem事实上是作为一种过渡的方案，它利用的也是****vw****的思想。

◼ vw相比于rem的优势:

◼ vw我们只面临一个问题，将尺寸换算成vw的单位即可; ◼ 所以，目前相比于rem，更加推荐大家使用vw(但是理解rem依然很重要)

vw的单位换算

◼ 方案一:手动换算

◼ 方案二:less/scss函数

image.png

vw的单位换算

◼ 方案三:postcss-px-to-viewport-8-plugin

◼ 方案四:VSCode插件

image.png
上一篇 下一篇

猜你喜欢

热点阅读