![](https://img-blog.csdnimg.cn/20210429194050144.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
css3
文章平均质量分 67
与css3相关的内容
尼克_张
好的代码像粥一样,是用时间熬出来的!
展开
-
修改element的菜单组件使其变为酷炫风格
首先选给整个头部加背景图,其次munu中配置的background是对所有菜单都生效的,但我们不想改变父菜单,我们就把父菜单修改为transparent,最后为了让父菜单hover时产生平行四边形,利用伪元素配合 transform: skewX(-45deg),并且因为父元素时透明的,所以加z-index:1让图形显示出来。原创 2022-11-10 16:08:57 · 1232 阅读 · 0 评论 -
关于js滚动的相关判断
window.addEventListener(‘scroll’,this.scrollToTop)// 对文档中某一处元素的scroll事件@scroll=“handleScroll($event)”,把document换成e.targetlet scrollTop = document.documentElement.scrollTop || document.body.scrollTop;let clientHeight = window.innerHeight || document.d原创 2020-05-27 23:32:25 · 2582 阅读 · 1 评论 -
浮动与定位
元素浮动后不占位置,脱离文档流,但不会脱离文本流,离他最近的文字会环绕他1.1 清除浮动1.给父元素加高度2.设置父元素overflow:hidden3.父级定义 伪元素::after4.结尾处加空div,或是给受影响的元素加clear:both1.2 触发BFCBFC(Box Formatting Context,块级格式化上下文)是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。一个盒子不设置height时,当内容元素都浮动时,无法撑起自身,故需要创建BFC来避免此种情原创 2022-06-08 11:33:12 · 104 阅读 · 0 评论 -
熟练使用多行多列布局
项目中经常会用到多行多列布局,我们首先想到的就是结合flex布局,对于多行多列的布局要做到能到熟记于心,切记数量较少时写样式align-content: flex-start并且考虑当数量过多时显示滚动条,每个小盒子内的样式设置,这样可以大大提高开发效率。 <div class="container"> <div class="box" v-if="isShow"> <div class="content"> <div原创 2022-04-22 21:52:02 · 540 阅读 · 0 评论 -
九宫格图片自适应
在项目中,有时候要对图片或者视频做些动态的展示,这时候就要考验我们的css技巧了。当时一张图时,平铺整个屏幕;当两张图时,左右各占50%;当三张图时,左中右各占33.3%;当四张图时情况跟放两张一样,只不过要放两行;当五张图及以上时又跟放三张一样,只不过增加了行数。.wrap { /* width: 1000px; */ /* height: 800px; */ display: flex; flex-wrap: wrap; overflow: auto;}/原创 2022-03-04 14:29:16 · 292 阅读 · 0 评论 -
scss深入学习笔记
1.scss变量Sass 变量可以存储以下信息:字符串数字颜色值布尔值列表null 值Sass 变量使用 $ 符号2.嵌套当很多 CSS 属性都有同样的前缀,我们可以使用嵌套属性来编写它们&表示父节点3.引入文件@import “index” 引入文件时不需要指定文件后缀,Sass 会自动添加后缀 .scss。4.@mixin 与 @include注入时用@mixin, 引入时用@includes@mixin scrollStyle { // 自定义滚动条样式原创 2022-02-16 16:19:05 · 523 阅读 · 2 评论 -
三栏布局和两栏布局
1.三栏布局1.浮动布局.main { height: 300px; margin-left:230px; margin-right:230px; background: green;}.left { float: left; height: 300px; width: 200px; background: red;}.right { float: right; height: 300px; width: 2原创 2021-05-23 19:24:01 · 120 阅读 · 0 评论 -
css样式问题记录
1.对div动态设置border,出现抖动不管是动态设置,还是hover时设置,如果div原先没有border都会抖动。因为设置border时设置了1px边框,多出的这1px,与其它元素产生了挤压, 导致div偏移。所以需要给div一开始时设置border: 1px solid transparent;2.img标签外加了div后,div的高度比img的高度要大因为img是一种类似text的元素,在结束的时候,会在末尾加上一个空白符,所以就会多出3px。所以让img标签加上display:block原创 2021-03-10 22:07:44 · 189 阅读 · 1 评论 -
flex布局
flex布局被称为弹性布局,让元素跟随页面大小的改变而改变。flex布局的出现是由于浮动会脱离文档流,如果子元素浮动,而父元素没有高度,会引起页面塌陷,需要清除浮动。但flex布局对不兼容老版本浏览器,更适用于移动端。 1. 设置弹性容器display:flex /*设置弹性容器*//*弹性元素排列方式,设置主轴方向*/flex-direction:row /*默认,水平排序排列(从左向右)*/flex-direction:row-reverse /*反水平排列原创 2020-08-30 17:05:57 · 1819 阅读 · 0 评论 -
background相关的样式属性
background 的属性background-color 背景颜色background-image 背景图像background-repeat 如何重复背景图background-position 背景图像的位置background-size 背景图片的尺寸(cover是填充整个屏幕,contain是自适用内容高度和宽度)background-origin 规定background-position属性相对于什么位置来定位(border-box|padding原创 2020-07-26 17:03:27 · 294 阅读 · 1 评论 -
html与css常用技巧
对于静态页面我们首先要知道整体页面的布局,有哪些公用的页面,或者类似的页面,我们可以采用类似的html结构和css样式。html简述名称特点是否可以改变宽高等常用元素块级元素独占一行可以div,p,h1-h6,ul,ol,li行内块元素一行可以显示多个可以span,a,strong,em,del,ins行内元素一行可以显示多个不可以,由本身内容大小决定input,imgcss简述1.设置居中margin:0 auto ,这个会跟先设置wid原创 2020-07-11 23:21:46 · 571 阅读 · 0 评论 -
animation与transition的区别
/*添加动画效果*//*1.animation-name:指定动画名称*/animation-name: moveTest;/*2.设置动画的总耗时*/animation-duration: 2s;/*3.设置动画的播放次数,默认为1次 可以指定具体的数值,也可以指定infinite(无限次)*/animation-iteration-count: 1;/*4.设置交替动画 alternate:来回交替*/animation-direction: alternate;/*5.设置动画的原创 2020-07-11 17:20:34 · 525 阅读 · 0 评论