大家好，感谢邀请，今天来为大家分享一下前端必看的8个HTML+CSS技巧的问题，以及和的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

这种布局方式在后台管理系统中比较常见。当我们的内容小于浏览器窗口的高度时，需要将底部内容固定在底部。当内容超过浏览器窗口的高度时，它会随着内容一起被推回。

在CSS3 之前，要实现这种效果是相当困难的。浏览器窗口的高度会根据不同用户打开浏览器的方式、屏幕尺寸和浏览器缩放比例的差异而有所不同。我们需要使用JavaScript来实时获取浏览器高度并进行计算来实现这一点。虽然标题说“固定”底部，但我们想要的效果并不是position:固定。使用固定定位，当内容高于窗口高度时，我们的内容就会被遮挡。

随着CSS3的出现，实现这一点最完美的方式就是使用Flexbox。关键是使用很少被注意到的flex-grow 属性，它可以用在我们的内容标签元素（例如div）上。在下面的示例中，我们使用主标签。

我来解释一下实现原理。

Fly-grow用于控制Flex元素相对于同级Flex元素的可扩展空间。如果我们使用flex-grow: 0，flex元素将根本不会扩展。所以我们需要将head和bottom之间的内容标签元素设置为flex-grow: 1或flex-grow: auto，这样内容部分就会自动填充除head和bottom之外的所有空间。

为了防止底部内容受到内容部分扩展空间的影响，我们给footer底部元素赋予了flex-shrink: 0属性。 flex-shrink的功能与flex-grow正好相反。用于控制flex元素的收缩空间。这里我们给flex-shrink: 0，这样底部页脚的大小不受影响。

我们直接看HTML和CSS代码看看是如何实现的。

HTMLdiv id=’document’navh1标题内容/h1/navmainp可以添加更多内容来查看底部的变化！ /p/mainfooterh1bottom 内容/h1/footer/divCSS#document { height: 100vh;显示：柔性； flex-direction: 列；背景： #202020; font-family: 微软雅黑，文泉驿微黑，无衬线！重要；}导航，页脚{background: #494949;显示：柔性； justify-content: center;}main { color: #bdbdbd; flex: auto;}页脚{ flex-shrink: 0;}* { margin: 0;}h1,p { padding: 15px;}nav h1 { color: #82FCFD;文本阴影： 1px 1px 4px #00000080;}页脚h1 { color: #82FCFD; text-shadow: 1px 1px 4px #00000080;} 知识点总结：

flex-grow — 用于控制一个flex元素相对于同级的flex元素的可扩展空间。 flex-shrink — 与flex-grow正好相反，用于控制flex元素的收缩空间。

2. 悬停放大图片特效

悬停放大图像是一种特别引人注目的特效，更常用于可点击的图像。当用户将鼠标悬停在图像上时，图像会稍微放大。

其实实现这种特殊效果非常简单。首先，我们需要一个div 来包裹img 标签。该包裹层用于阻挡图像。当图片放大时，图片不会超过我们指定的宽度和高度。

首先我们来说说div包的属性。我们需要给它一个固定的宽度和高度。然后我们必须给这个元素赋予overflow:隐藏属性。让图像放大时不超过div元素的宽度和高度。通过这个包裹层，我们可以编写img的各种效果。

在我的示例中，transform: scale(1,1) 用作悬停时的图像特效。此变换用于更改任何元素的属性，缩放用于放大（整数将放大）或缩小（负数将放大）。会收缩）元素。

我们看一下代码：

把div class=’img-wrapper’ img src=’https://img-blog.csdnimg.cn/2020032122230564.png’//divCSS.img-wrapper { width: 400px;高度： 400px；溢出：隐藏； box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);}.img-wrapper img { height: 400px; -webkit-transition: 0.3s 线性；过渡： 0.3s线性；}.img-wrapper img:hover {transform:缩放（1.1）;}.img-wrapper {display:内联块；} box-sizing: 边框框； border: 3px Solid #000;} 如果想让图像更酷一点，可以添加图像滤镜属性滤镜，让图像变成灰色或深棕色，然后悬停时会出现更酷的颜色变化。灰度属性为filter:grayscale(100%);深棕色属性为filter:sepia(100%)。其实图片的过滤属性有很多。如果你有兴趣的话，你可以尝试一下！

添加特效的代码如下：

HTML!– 灰度过滤–div class=’img-wrapper’ img class=’grayscale-img’ src=’https://img-blog.csdnimg.cn/2020032211021728.png’ //div!– 深棕色过滤- – div class=’img-wrapper’ img class=’sepia-img’ src=’https://img-blog.csdnimg.cn/2020032122230564.png’ //divCSS/*==============* 灰度过滤*==============*/.grayscale-img { -webkit-filter: 灰度(100%); filter: 灰度(100%);}.grayscale-img:hover { -webkit-filter: 灰度(0); filter: 灰度(0);}/*==============* 棕褐色滤镜*==============*/.sepia-img { -webkit -filter: 棕褐色(100%); filter: 棕褐色(100%);}.sepia-img:hover { -webkit-filter: 棕褐色(0); filter: sepia(0);} 知识总结

变换— 用于改变元素比例— 放大和缩小元素滤镜— 图片滤镜灰度— 灰度滤镜棕褐色— 深棕色滤镜

3. 瞬间黑暗模式

最近，微信也难逃黑暗时代的来临，很多网页都采用了黑暗模式兼容性和主题。如果我们想在我们正在开发的网站上立即实现深色模式，我们该如何实现呢？

其实有一个快捷的方法，我们可以使用invert和hue-rotate这两个CSS3滤镜来实现。

filter: invert() — 是从0 到1 的范围，其中1 是从白色到黑色。 filter: Hue-rotate() — 用于更改元素的颜色，同时保持或多或少相同的配色方案。该属性的值范围为0deg 到360deg。

通过将这两个属性添加到我们页面的body 标签中，我们可以快速尝试将我们的网站变成“黑暗模式”。这里需要注意的是，如果body和html上没有设置背景色，这个过滤就不会生效。

CSS代码如下：

html { 背景： #fff;}正文{ 背景： #fff; filter: invert(1)hue-rotate(270deg);}实现效果

这里我们会发现图片的颜色会受到影响，不太美观。使用css滤镜无法完美切换深色模式。不过，使用JavaScript 辅助，你可以完美切换到深色模式。

最近，一款名为Darkmode.js 的JavaScript 辅助插件发布了。

Darkmode.js

事实上，Darkmode.js 还使用了CSS 中名为mix-blend-mode 的功能- “CSS 属性描述了元素的内容应如何与元素的直接父元素的内容以及元素的背景混合元素。”借助Javascript，它可以判断页面上哪些元素需要黑化，哪些元素不需要黑化。就会像我们之前做的那样，会导致其他不需要黑化的元素，比如图片，受到影响，出现颜色问题。

使用Darkmode.js 非常简单。只需在脚本中添加以下代码即可立即添加插件：

script src=’https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js’/scriptscript //这些是这个插件的可配置项： var options={ Bottom: ’32px ‘, //定位底部距离- 默认： ’32px’ right: ’32px’, //定位右侧距离- 默认： ’32px’ left: ‘unset’, //定位左侧距离- 默认： ‘unset’ time: ‘0.5s’ , //默认动画时间： ‘0.3s’ mixColor: ‘#fff’, //要更改的颜色- 默认： ‘#fff’ backgroundColor: ‘#fff’, //背景颜色- 默认： ‘#fff’ buttonColorDark: ‘# 262728’, //深色模式下按钮颜色- 默认： ‘#100f2c’ buttonColorLight: ‘#fff’, //白天模式下按钮颜色- 默认： ‘#fff’ saveInCookies: true, //是否将当前模式保存在cookie 中- 默认： true, label: ”, //切换模式按钮图标- 默认： ” autoMatchOsTheme: true //是否根据系统自动适应模式- 默认： true };让暗模式=新的暗模式（选项）；黑暗模式.showWidget(); /script 如果您不想使用插件的默认按钮，您可以在JavaScript 代码中控制它。我们可以通过.toggle() 方法切换模式，并且可以使用.isActivated() 来检测是否进入了深色模式。

const darkmode=new Darkmode();darkmode.toggle();console.log(darkmode.isActivated()) //如果已经进入深色模式，则会返回true。知识总结

filter: invert() — 可以将页面从白色更改为黑色，或从黑色更改为白色。 filter: Hue-rotate() — 用于更改元素的颜色，同时保持或多或少相同的配色方案。 Darkmode.js — 立即实现暗模式。

4. 自定义列表符号

ul，li的无序列表有默认的符号·，但很多时候我们希望给这个符号添加自己的样式和颜色，甚至替换为自定义的符号。我们无法对默认符号进行任何样式处理，并且CSS 属性中只有几个选项可供默认符号使用。很多时候，它们无法满足我们的设计。

其实，自定义无序列表符号并不难。我们只需要使用之前的伪类：并添加content属性即可实现。

在我的示例中，我创建了两个任务列表，一个用于待处理的任务，一个用于已完成的任务，每个列表都有不同的列表符号和颜色。

实现原理

1. 首先，我们禁用默认符号样式list-style: none of ul。

2、将content内容值赋予li的：before伪类，对于待处理的任务使用它，对于已完成的任务使用li.completed:before。

3、为了让显示效果更加美观，我给li和li.分别完成了两种不同的颜色。

我们看一下代码，看看它是如何实现的：

超文本标记语言

div h2 待处理/h2 ul li 执行任务1/li li 执行任务2/li li 执行任务3/li li 执行任务4/li li 执行任务5/li /ul/divdiv h2 已完成/h2 ul li class=’已完成’完成任务1/li li class=’已完成’完成任务2/li li class=’已完成’完成任务3/li /ul/divCSS

ul { 列表样式：无； color:#fff；字体大小： 20px； border: 3px实心#000；填充： 1rem 2rem；最小高度： 200px； margin: 15px 2rem 0 0;背景： #323232;框阴影： 0 1px 4px rgba(0 , 0, 0, 0.6); border-radius: 8px;}li { padding: 0.3rem 0;}li:before { content: ‘ ‘; color: aqua;}li.completed:before { content: ‘ ‘;文本装饰：无； color: greenyellow;}li .completed { text-decoration: line-through; color: #bdbdbd;} :before 和：after 伪类加上content 属性可以用来创造很多特效，也是当代前端排版中常用的“魔法”。说到伪类的使用，我给大家讲一个比较常用的使用场景。

在管理后台或者文章展示中，我们经常看到的“面包屑导航”也是利用伪类在各个目录中间插入符号。

实施逻辑

1. 该导航包含3 个a 标签。首先给每个a标签添加一个伪类：after，然后在content属性中插入/符号。

2.然后使用a:first-child。该伪类将选择第一个a 标签，然后使用content 属性添加» 符号。

3. 因为我们在第一步中在每个a标签后面插入了/符号，所以我们需要将最后一个a标签清除掉。这里我们使用：last-child来选择最后一个a标签，然后使用content:”属性来清除伪类的内容。

超文本标记语言

div class=’breadcrumb’ a Three Diamonds/a 前端/a 教程/a/divCSS

.breadcrumb { 字体大小： 1.6rem; color: #fff;}.breadcrumb a:first-child { color: #82fcfd;}.breadcrumb a:first-child:before { content: ‘ » ‘;}.breadcrumb a:after { content: ‘/’; color: #ef6eae; }.breadcrumb a:last-child:after { content: ”;} 知识总结

:之前| :after — 用于向某些选择器添加特殊效果的伪类。 content — 用于在元素的：before 和：after 伪元素中插入内容的CSS 属性。使用content 属性插入的内容是匿名可替换元素。first-child — CSS 伪类，表示一组兄弟元素中的第一个元素。last-child — CSS 伪类，表示父元素的最后一个子元素。

5. 图片视差效果

这种超酷的效果在官网上很受欢迎。这种效果可以给用户带来视觉冲击力，也给我们的网站带来活力。普通网页图像会随着网页滑动，但视觉差异效果图像会固定在底部，只有图像所在窗口上的元素会移动。

仅使用CSS

你没看错，只用CSS就可以轻松实现这种效果！我们只需要使用CSS背景图像属性background-attachment:fixed，它将相对于视口固定背景。即使元素具有滚动机制，背景也不会随着元素的内容而滚动。

实现原理：

1、在包含图片的元素上添加background: url()和background-size: cover（第二个属性适合将图片定义为封面，这样可以让图片大小自动适应，完整的图片会显示在a上）大屏幕）

2.然后附加固定背景图片的属性background-attachment:fixed。

3. 最后，向该元素添加height: 100% 的高度或height: 400px 的任意高度。

就这么简单！不用怀疑，代码马上上传，大家可以自己尝试一下！

超文本标记语言

div class=’wrapper’ div class=’parallax-img’/img p 这里就填一堆文字即可，尽量多/p/divCSS

.wrapper { height: 100wh;}.parallax-img { 背景附件：固定；背景位置：中心；背景-repeat: 无重复；背景尺寸：封面；高度： 100%; background-image: url(‘http://ppe.oss-cn- shenzhen.aliyuncs.com/collections/182/7/thumb.jpg’);}p { font-size: 20px;填充： 1.5rem 3rem；最小高度： 1000px； //当你的文字内容不够时，你也可以提供足够的高度来看到效果。当然，如果文字足够多的话，就不需要}如果你想实现和我动画中一样的效果，或者想看看是如何实现的，可以查看摘要中的“预览实际效果”下面或者看“GitHub源代码”。

知识总结

background-attachment: 已修复— 修复了相对于视口的背景。即使元素具有滚动机制，背景也不会随着元素的内容而滚动。 background-size: cover — 允许图像尺寸自动适应并显示完整图像，即使在大屏幕上也是如此。

使用CSS + JavaScript

有些孩子可能不会对此感到震惊，或者仍然觉得不够刺激。我们再举一个高级的例子。上面的例子中，滑动时图片是固定的。如果加上JavaScript的帮助，我们可以让窗口中的图片随着页面慢慢滑动，使效果更加动态、更有冲击力。

实现原理先说一下布局，因为我们滑动页面的时候需要使用JavaScript来对图片进行偏移，所以我们需要给图片赋予一个CSS属性，这样我们就可以让图片按照一个速度上下移动。在此示例中，我们将所有图像包装在带有类名块的div 中。该div被赋予相对定位属性position:relative。这时候我们可以在里面添加图片，然后让图片绝对定位在div框内的position:绝对位置。

但图片可能会很大。我们需要将图片保持在我们定义的框内，因此我们的div也被赋予overflow:隐藏，高度height: 100%。这样，图像超出div框就会被隐藏。

布局代码如下：

div class=’block’ img src=’https://unsplash.it/1920/1920/?image=1005′ data-speed=’-1′ class=’img-parallax’/h2 视差速度-1/h2/divdiv class=’block’ img src=’https://unsplash.it/1920/1920/?image=1067′ data-speed=’1′ class=’img-parallax’/h2 视差速度1/h2/divhtml, body{ margin: 0;填充： 0；高度： 100%;宽度： 100%； font-family: ‘Amatic SC’，草书；}.block{ width: 100%;高度： 100%;相对位置：溢出：隐藏；字体大小： 16px;}.block h2{ 相对位置：显示：块；文本对齐：居中；边距： 0;顶部： 50%；变换：翻译Y(-50%);字体大小： 10vw；颜色：白色； font-weight: 400;}.img-parallax { width: 100vmax; z-index: – 1;绝对位置：顶部： 0;剩余： 50%； Transform: 翻译(-50%,0);指针

-events: none}实现这个布局，在你滑动的时候，图片是不会移动的。因为最后一步就是加入JavaScript的辅助，让图片活起来。

position: relative — 相对定位。 position: absolute — 绝对定位。 overflow: hidden — 如果需要，内容将被剪裁以适合填充框。不提供滚动条。

6. 裁剪图像的动画

在有CSS3之前裁剪图片实现也是颇有难度的。现在我们有了两个非常方便简单的CSS3属性可以实现裁剪，那就是object-fit和object-position, 这两个属性可以让我们改变图片的大小，但是不影响图片的长宽比。

当然我们可以使用图片处理工具或者使用JavaScript等插件来实现图片裁剪功能。但是因为有了CSS3的属性，我们不只可以裁剪，我们还可以用裁剪的属性来做图片的动态效果。

为了让我们的例子更加简单，我们这里使用了<input type=”checkbox”>复选框元素，这样我们就可以使用:checked的伪类来触发启动效果。所以在例子里面我们完全不需要JavaScript的协助。

实现原理：

一、首先给予图片一个宽高height: 1080px，width: 1920px。

二、然后用CSS选择器，锁定当input被选中后img标签的样式变化。当被选中时，给图片设定一个新的宽高，这里我们给宽高各自500像素：width: 500px，height: 500px。

三、然后我们加上了过渡效果和时间让图片改变宽高时有动画过渡效果：transition: width 2s, height 4s;。

四、最后加上object-fit: cover和object-position: left-top这两个属性来保持图片的宽高比例，这样就大功告成了！

我们来看看完成的代码：

勾选裁剪图片 <input type=”checkbox” /><br /><img src=”https://img-blog.csdnimg.cn/2020032122230564.png” alt=”Random”/>input { transform: scale(1.5); /* 只是用来放大复选框大小 */ margin: 10px 5px; color: #fff;}img { width: 1920px; height: 1080px; transition: 0s;}/* css选择器锁定复选框被选中时的状态 */input:checked + br + img { width: 500px; height: 500px; object-fit: cover; object-position: left-top; transition: width 2s, height 4s;}知识总结

object-fit — CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 object-position — 用来切换被替换元素的内容对象在元素框内的对齐方式。 transition — 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。

7. 混合模式（Blend）

如果有使用过Photoshop的同学对blend混合模式应该是非常熟悉了，我们都知道混合模式是非常强大，也是p图时非常常用的一个功能。但是你们有没有想象过可以在浏览器的CSS中直接使用呢？对我们不需要设计师给我们做图，我们前端也可以实现混合模式了。

在CSS中我们不只可以对background背景加入混合模式，我们可以对任何一个元素的自带背景加入混合模式，让你可以做出很多之前没有想过的效果和排版。

往一个元素加入混合模式，我们只需要使用到一个CSS属性mix-blend-mode即可。

简单实现原理：

首先我们只需要加一个h1标题标签

<h1>混合模式：颜色减淡</h1>然后我们给h1标签加入mix-blend-mode中的颜色减弱模式color-dodge，但是要注意的是我们需要给body和html加入背景颜色background: white，要不你会发现这个效果会无效。因为h1我们没有给颜色，会自动往上级继承，并且混合模式是针对背景颜色的过滤，所以body和html需要有背景颜色才行。

h1 { mix-blend-mode: color-dodge; font-family: yahei; font-size: 5rem; text-align: center; margin: 0; padding: 20vh 200px; color: #D1956C; } html, body { margin: 0; background-color: white; } body { background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80); background-repeat: no-repeat; background-size: cover; min-height: 100vh; overflow: hidden; }换换背景图和h1标签的字体颜色就可以弄出各种不同的特效了。

知识总结

mix-blend-mode — CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

8. 瀑布流布局

CSS Grid和Flexbox让我们可以更简便，更容易和更快的实现各式各样的响应布局，并且让我们快捷方便的在布局中实现横向剧中和竖向剧中。但是回想一下以前是颇为困难的。

虽然这些新出的布局方式可以让我们解决很多以前的布局难题，但是像瀑布流布局这种，就无法用它们简单来实现了。因为瀑布流一般来说都是宽度一致，但是高度是根据图片自适应的。并且图片的位置也是根据在上方图片的位置而定的。

其实最好实现瀑布流布局的办法就是用CSS的列属性套件，这套属性大多数都是用于排版杂志中的文本列。但是用于布局瀑布流也是特别实用哦。因为以前需要实现瀑布流，就必须有JavaScript的辅助来计算图片高度然后决定每张图片的定位和位置，所以现在有了列属性就可以使用纯CSS实现了。

实现原理：

实现这个布局，首选我们需要把所有的内容先包裹在一个div元素里面，然后给这个元素column-width和column-gap属性。

然后，为了防止任何元素被分割到两个列之间，将column-break-inside: avoid添加到各个元素中。

神奇的效果就完美实现了，零JavaScript。

我们来看看代码：

<div class=”columns”> <figure> <img src=”https://source.unsplash.com/random?city” alt=”” /> </figure> <figure> <img src=”https://source.unsplash.com/random?night” alt=”” /> </figure> <figure> <img src=”https://source.unsplash.com/random?developer” alt=”” /> </figure> <figure> <img src=”https://source.unsplash.com/random?building” alt=”” /> </figure> <figure> <img src=”https://source.unsplash.com/random?water” alt=”” /> </figure> <figure> <img src=”https://source.unsplash.com/random?coding” alt=”” /> </figure> <figure> <img src=”https://source.unsplash.com/random?stars” alt=”” /> </figure> <figure> <img src=”https://source.unsplash.com/random?forest” alt=”” /> </figure> <figure> <img src=”https://source.unsplash.com/random?girls” alt=”” /> </figure> <figure> <img src=”https://source.unsplash.com/random?working” alt=”” /> </figure></div>.columns { column-width: 320px; column-gap: 15px; width: 90%; max-width: 1100px; margin: 50px auto;}.columns figure { display: inline-block; box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); column-break-inside: avoid; border-radius: 8px;}.columns figure img { width: 100%; height: auto; margin-bottom: 15px; border-radius: 8px;}知识总结

column-width — CSS属性建议一个最佳列宽。列宽是在添加另一列之前列将成为最大宽度。 column-width — 该 CSS 属性用来设置元素列之间的间隔 (gutter) 大小。 column-break-inside — 设置或检索对象内部是否断。