学习打卡-HTML5+CSS3基础（二）

---

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 的目的是提高开发效率以及提高代码的可维护性.