cssflex图⽚不拉伸_前端必看的8个HTML+CSS技巧
js控制css3动画触发
CSS是⼀个很独特的语⾔。看起来⾮常简单，但是某种特殊效果看似简单，实现起来就颇有难度。这篇⽂章主要是给在学习前端的童鞋分享⼀些新的CSS技巧，⼀些在前端教程和培训课堂中不会讲到的知识。第⼆就是让还在前端开发这条道路上的童鞋们，重新燃起对前端排版和特效的热爱和热情！
1. 固定底部内容
这种是⼀个⾮常常见的布局⽅式，但是对于新⼿来说是⽐较常见的难题。
这种布局⽅式在后台管理系统中⽐较常见，当我们内容不⾜浏览器窗⼝⾼度时，底部内容需要固定在底部。当内容超出了浏览器窗⼝⾼度，就会随着内容往后推。
在有CSS3之前，实现这个效果是颇有难度的。浏览器窗⼝⾼度是会根据不同⽤户打开浏览器的情况，屏幕⼤⼩的差异和浏览器的缩放⽐例⽽变。我们需要借助JavaScript来实时获取浏览器⾼度进⾏运算才能实现。虽然说标题是说“固定”底部，但是我们想要的效果不是position: fixed。使⽤固定定位，在内容⾼于窗⼝⾼度时，就会挡住我们的内容。
随着CSS3的来临，最完美的实现⽅式是使⽤Flexbox。实现的关键就是使⽤不太被关注的flex-grow属性，可以在我们的内容标签元素(⽐如div)中使⽤。在我们下⾯的例⼦⾥使⽤了main标签。
我来讲解⼀下实现原理吧。
flew-grow是⽤来控制⼀个flex元素相对它同等级flex元素的⾃⾝可扩充的空间。如果我们使⽤flex-grow: 0，那这个flex元素就完全不会扩展了。所以我们需要把头部和底部之间的内容标签元素设置为flex-grow: 1或者flex-grow: auto，这样内容部分就会⾃动填充满头部和底部之外的所有空间。
为了避免底部内容受内容部分扩充空间的影响，我们给footer底部元素flex-shrink: 0属性。flex-shrink的作⽤与flex-grow是恰恰相反，
⽤来控制flex元素收缩的空间，这⾥我们给了flex-shrink: 0就是为了底部footer的⼤⼩不受影响。
我们直接上HTML和CSS代码看看是怎么实现的。
HTML
头部内容
可以添加更多内容看看底部的变化哦！
底部内容
CSS
#document {    height: 100vh;    display: flex;    flex-direction: column;    background: #202020;    font-family: microsoft yahei,wenquanyi micro hei,sans-ser
知识点总结：
flex-grow --- 是⽤来控制⼀个flex元素相对它同等级flex元素的⾃⾝可扩充的空间 flex-shrink --- 作⽤与flex-grow是恰恰相反，⽤来控制flex元素收缩的空间
2. 悬停放⼤图⽚特效
悬停放⼤图⽚是⼀个特别吸引眼球的特效，⽐较常⽤于可点击的图⽚。当⽤户悬停⿏标在图⽚上，图⽚会稍微的放⼤。
其实实现这个特效是⾮常简单的。⾸先我们需要⼀个div包裹这img标签，这个包裹层是⽤来遮挡住图⽚，当图⽚放⼤时不会出现图⽚超出我们规定的宽⾼以外。
⾸先我们来讲讲div包裹的属性，我们需要给它⼀个固定的width宽和height⾼。然后我们必须给予这个元素overflow: hidden属性。让图⽚放⼤的时候不会超出这个div元素的宽⾼。有了这个包裹层，我们就可以编写img的各种效果了。
我的例⼦⾥⾯⽤了transform: scale(1,1)作为悬停时的图⽚特效，这个transform是⽤于改变任何元素的属性的，然后scale是⽤于放⼤(整数就会放⼤)或者缩⼩(负数就会缩⼩)元素的。
上代码让⼤家看看：
html body中放⼊
CSS
.img-wrapper {  width: 400px;  height: 400px;  overflow: hidden;  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);}.img-wrapper img {  height: 400px;  -webkit-tran
如果你们想让图⽚更加炫酷可以加上图⽚过滤属性filter，让图⽚变灰或者变深褐⾊，然后悬停时候出现更加炫酷的颜⾊变幻。灰化的属性
是filter: grayscale(100%);，然后深褐⾊化的属性是filter: sepia(100%)。其实图⽚还有很多过滤属性的，⼤家有兴趣也可以去尝试⼀下哦！
加⼊特殊效果的代码如下：
HTML
CSS
/* ============== * 灰度过滤 * ==============*/.grayscale-img {  -webkit-filter: grayscale(100%);  filter: grayscale(100%);}.grayscale-img:hover {  -webkit-filter 知识总结
transform --- ⽤于改变元素 scale --- 对元素进⾏放⼤和缩⼩ filter --- 图⽚过滤器 grayscale --- 灰度过滤 sepia --- 深褐⾊过滤
3. 瞬间⿊暗模式
最近也逃脱不了⿊暗时代的到来，⽹页也很多都做了⿊暗模式的兼容和主题。如果我们在做的⼀个⽹站想瞬间实现⿊暗模式可以怎么实现呢？
其实有⼀个很快的⽅式，我们可以使⽤invert和hue-rotate两个CSS3过滤器来实现。
filter: invert() — 是从0到1的刻度，1是从⽩变⿊。 filter: hue-rotate() — ⽤于改变你元素的颜⾊，同时或多或少保持原本相同的⾊系。这个属性的值可以从0deg到360deg。
在我们页⾯的body标签上添加这两个属性，我们就可以快速尝试把我们的⽹站变成"⿊暗模式"。这⾥需要注意的是，如果body和html上没有设置background背景颜⾊，这个过滤就会不起效了哦。
CSS的代码如下：
html {  background: #fff;}body {  background: #fff;  filter: invert(1) hue-rotate(270deg);}
实现效果
这⾥我们会发现图⽚的颜⾊会受影响，并不是很美观，使⽤css过滤器是⽆法完美切换⿊暗模式的。不过使⽤JavaScript辅助就可以完美的切换⿊暗模式。
最近出了⼀个JavaScript辅助插件叫Darkmode.js。
Darkmode.js
其实Darkmode.js运⽤的也是css⾥⾯的⼀个特性叫mix-blend-mode — “CSS 属性描述了元素的内容应该与元素的直系⽗元素的内容和元素的背景如何混合“。加上Javascript的辅助判断哪些页⾯上的元素需要⿊化的，哪些是不需要⿊化的。就会想我们之前那种做法，导致其他不需要⿊化的元素，⽐如图⽚，受到影响导致颜⾊出现问题。
使⽤Darkmode.js⾮常简单，只要在脚本⾥⾯添加以下代码就可以马上加⼊⼀个插件，

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。