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

MINT
178 阅读4分钟

菜鸡打卡

1.在一个页面中给多个元素设置相同的 id, 会导致什么问题?

会导致通过 js 获取 dom 元素的时候, 只能获取到第一个元素, 后面的元素都无法正常获取.

2.用伪类实现一个上三角?

<style>
.triangle_border_up{ 
    border:20px solid red; 
    border-top:0;
    border-left:20px solid transparent; 
    border-right:20px solid transparent; 
    width:0;
}
</style>

<div class='triangle_border_up'></div>

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;

  • 使用伪元素法:(推荐使用)

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

avatar
文章
阅读
粉丝