theme: channing-cyan
菜鸡打卡
1.在一个页面中给多个元素设置相同的 id, 会导致什么问题?
会导致通过 js 获取 dom 元素的时候, 只能获取到第一个元素, 后面的元素都无法正常获取.
2.用伪类实现一个上三角?
```html
```
3.怎么让一个不定宽高的 div,垂直水平居中?
方案一:transform
.parent{ background: #ddd; width: 400px; height: 400px; } .son { position: relative; background: pink; width: 200px; height: 200px; top:50%; left: 50%; transform: translate(-50%, -50%); }
方案二:flex
.parent { display: flex; justify-content: center; align-items: center; background: #ddd; width: 400px; height: 400px; } .son { background: pink; width: 200px; height: 200px; }
方案三:position
.parent { position: relative; background: #ddd; width: 400px; height: 400px; } .son { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: pink; width: 200px; height: 200px; margin: auto; }
4.清除浮动有哪些常用的方式?
额外标签法: 在浮动元素的最后添加一个块级标签, 给其设置一个clear:both 的属性 (缺点:会在页面上产生很多空白标签);
给浮动元素的父元素设置高度:(缺点:不太灵活);
给浮动元素的父元素设置 overflow:hidden;
使用伪元素法:(推荐使用)
css .clear:after{ content:''; display:block; overflow:hidden; visibility:hidden; clear:both; }
5.让两个块级元素在一行显示有哪些做法?
设置显示模式:display:inline|inline-block;
flex 布局: 给父元素设置 display:flex;
使用浮动
6.如何设置一个元素在垂直方向居中?
首先不考虑代码的灵活性, 可以使用 margin 外边距或者 padding 内边距来实现元素在垂直方向居中显示.具体可以给父元素设置一个垂直方向的padding 内边距; 也可以给需要垂直居中的子元素设置垂直方向的外边距.其次如果这个需要垂直居中的元素是一个单行文本, 则可以使用行高等于标签高度的方式来实现.
也可以使用 css3 中的flex 布局, 使用 align-items:center 设置元素在侧轴(垂直方向)居中对齐.也可以使用绝对定位的方式, 设置元素在相对定位的父元素中垂直对齐.
7.说说图片懒加载的原理?实际开发中用过哪些图片懒加载的插件?
img 标签在加载图片的时候, 是通过请求 src 属性所指向的文件来加载图片的, 那如果 img 标签本身没有 src 属性的话, 那么 img 标签在渲染的时候, 就不会加载图片.
所以图片懒加载的原理就是将 img 标签的 src 属性给暂时先改成一个自定义的属性, 这样页面已加载就会不去加载图片, 当 img 标签所在区域进入屏幕可视区域后, 从存放图片路径的自定义属性中获取图片地址,并动态的设置给对应 img 标签的 src 属性, 这样浏览器就会自动帮助我们去请求对应的图片资源, 也就实现了所谓的图片懒加载.
图片懒加载的插件有很多, 大部分是基于 jquery 的, 比如jquery.lazyload. 当然 vue 的中也有实现了图片懒加载的插件, 比如 vue-lazyload, vue 的组件库中也有图片懒加载的组件.
8.css3 新增了那些新特性?
媒体查询(@media);
transfrom 系列: translate 平移, scale 缩放,rotate 旋转动画(animate);
过渡效果(transition);
flex 弹性(伸缩)布局;
盒模型计算方式 box-sizing:border-box;
线性渐变(linear-gradient),径向渐变;
伪元素,文字阴影(text-shadow), 边框阴影(box-shadow), 圆角(border-radius)
9.display:none 和visibility:hidden 的区别?
display:none 隐藏元素后,不占位;
visibility:hidden 隐藏元素后占位.
Less 是什么? Scss 是什么?(sass) Stylus 是什么?(.styl)
Less 是一种 css 预处理语言, 在 less 中可以定义一些变量和表达式以及使用嵌套语法; less 中使用@定义变量
(@baseColor:pink); 后期可以通过一些编译工具(less)将 less 编译成浏览器能直接识别的css 样式. 所以 less 只是在开发阶段使用的一种中间语言, 使用less 的目的是提高开发效率以及提高代码的可维护性.
scss 是一种 css 预处理语言, 在 less 中可以定义一些变量和表达式以及使用嵌套语法; scss 中使用$定义变量
($baseColor:pink); 后期可以通过一些编译工具(node-sass)将 less 编译成浏览器能直接识别的 css 样式. 所以 scss 只是在开发阶段使用的一种中间语言, 使用 scss 的目的是提高开发效率以及提高代码的可维护性.
stylus 是一种 css 预处理语言, 在 stylus 中可以定义一些变量和表达式以及使用嵌套语法(stylus 中是使用缩进的语法表示嵌套关系); 后期可以通过一些编译工具(stylus)将 stylus 编译成浏览器能直接识别的css 样式. 所以stylus 只是在开发阶段使用的一种中间语言, 使用 stylus 的目的是提高开发效率以及提高代码的可维护性.