nick_zhang的博客

translateY(-100%) = 在元素上方、外面。translateX(-100%) = 在元素左方、外面。translateY(100%) = 在元素下方、外面。translateX(100%) = 在元素右方、外面。translateY(0) = 元素原来的位置。translateX(0) = 元素原来的位置。

首先选给整个头部加背景图，其次munu中配置的background是对所有菜单都生效的，但我们不想改变父菜单，我们就把父菜单修改为transparent，最后为了让父菜单hover时产生平行四边形，利用伪元素配合 transform: skewX(-45deg)，并且因为父元素时透明的，所以加z-index:1让图形显示出来。

window.addEventListener(‘scroll’,this.scrollToTop) // 对文档中某一处元素的scroll事件@scroll=“handleScroll($event)”,把document换成e.target let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; let clientHeight = window.innerHeight || document.d

元素浮动后不占位置，脱离文档流，但不会脱离文本流，离他最近的文字会环绕他 1.1 清除浮动 1.给父元素加高度 2.设置父元素overflow:hidden 3.父级定义 伪元素::after 4.结尾处加空div，或是给受影响的元素加clear:both 1.2 触发BFC BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。一个盒子不设置height时，当内容元素都浮动时，无法撑起自身，故需要创建BFC来避免此种情

项目中经常会用到多行多列布局，我们首先想到的就是结合flex布局，对于多行多列的布局要做到能到熟记于心，切记数量较少时写样式align-content: flex-start并且考虑当数量过多时显示滚动条，每个小盒子内的样式设置，这样可以大大提高开发效率。 <div class="container"> <div class="box" v-if="isShow"> <div class="content"> <div

在项目中，有时候要对图片或者视频做些动态的展示，这时候就要考验我们的css技巧了。 当时一张图时，平铺整个屏幕；当两张图时，左右各占50%；当三张图时，左中右各占33.3%;当四张图时情况跟放两张一样，只不过要放两行；当五张图及以上时又跟放三张一样，只不过增加了行数。 .wrap { /* width: 1000px; */ /* height: 800px; */ display: flex; flex-wrap: wrap; overflow: auto; } /

1.scss变量 Sass 变量可以存储以下信息： 字符串 数字 颜色值 布尔值 列表 null 值 Sass 变量使用 $ 符号 2.嵌套 当很多 CSS 属性都有同样的前缀，我们可以使用嵌套属性来编写它们 &表示父节点 3.引入文件 @import “index” 引入文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。 4.@mixin 与 @include 注入时用@mixin, 引入时用@includes @mixin scrollStyle { // 自定义滚动条样式

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

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

flex布局被称为弹性布局，让元素跟随页面大小的改变而改变。flex布局的出现是由于浮动会脱离文档流，如果子元素浮动，而父元素没有高度，会引起页面塌陷，需要清除浮动。但flex布局对不兼容老版本浏览器，更适用于移动端。 1. 设置弹性容器 display:flex /*设置弹性容器*/ /*弹性元素排列方式,设置主轴方向*/ flex-direction:row /*默认,水平排序排列(从左向右)*/ flex-direction:row-reverse /*反水平排列

background 的属性 background-color 背景颜色 background-image 背景图像 background-repeat 如何重复背景图 background-position 背景图像的位置 background-size 背景图片的尺寸(cover是填充整个屏幕,contain是自适用内容高度和宽度) background-origin 规定background-position属性相对于什么位置来定位 (border-box|padding

对于静态页面我们首先要知道整体页面的布局，有哪些公用的页面，或者类似的页面，我们可以采用类似的html结构和css样式。 html简述 名称 特点 是否可以改变宽高等 常用元素 块级元素 独占一行 可以 div，p，h1-h6，ul，ol，li 行内块元素 一行可以显示多个 可以 span，a，strong，em，del，ins 行内元素 一行可以显示多个 不可以，由本身内容大小决定 input，img css简述 1.设置居中 margin:0 auto ,这个会跟先设置wid

/*添加动画效果*/ /*1.animation-name:指定动画名称*/ animation-name: moveTest; /*2.设置动画的总耗时*/ animation-duration: 2s; /*3.设置动画的播放次数，默认为1次 可以指定具体的数值，也可以指定infinite(无限次)*/ animation-iteration-count: 1; /*4.设置交替动画 alternate:来回交替*/ animation-direction: alternate; /*5.设置动画的