还在挣扎的螃蟹 - 个人主页动态 - 牛客网

发布(300) 评论刷题

2023-02-27 11:44

已编辑

门头沟学院 Web前端

CSS：实现一个三角形（*****五颗星）

1.border三角形特性 CSS绘制三角形主要用到的是border属性，也就是边框。 平时在给盒子设置边框时，往往都设置很窄，以为边框是由矩形组成的。实际上，border属性是由三角形组成的， 例如：将元素的长宽都设置为0，显示出来的效果是这样的： <style> div { width: 0; height: 0; border: 100px solid; border-color: orange blue red green; } <...

前端面试题

0 点赞评论收藏

分享

2023-02-27 12:37

已编辑

门头沟学院 Web前端

CSS：如何解决1px问题（*****五颗星）

1.关于1px 问题 1px 问题指的是：在一些 Retina屏幕 的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果。 原因很简单——CSS 中的 1px 并不能和移动设备上的 1px划等号。它们之间的比例关系有一个专门的属性来描述： window.devicePixelRatio返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比。此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小。简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。<script> //window.devicePixelRatio =...

前端面试题

0 点赞评论收藏

分享

2023-02-26 13:54

门头沟学院 Web前端

CSS：设置chrome小于12px的字体（****四颗星）

每个浏览器的默认字体大小可能都是不一样的。chrome默认字体大小16px，在chrome下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。解决方法1：用css3的缩放transform（scale）（因为是整体缩放所以注意缩放时位置可能会变化） 使用css3的transform缩放属性-webkit-transform:scale(0.5)，他只针对有宽高的元素，如果是行内元素就得设置display：block/inline-block; 注意-webkit-transform:scale(0.75);收缩的是整个元素的大小，这时候，如果是内联元素，必...

前端面试题

0 点赞评论收藏

分享

2023-02-27 14:46

已编辑

门头沟学院 Web前端

CSS：display、float、position关系（四

1.display、float、position关系：首先判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被设置为table或者block，具体转换需要看初始转换值。如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display的值则按上面的规则转换。注意，如果position的值为relative并且float属性的值存在，则relative相...

前端面试题

0 点赞评论收藏

分享

2023-02-25 00:37

门头沟学院 Web前端

CSS：px、em、rem的区别及使用场景（****四颗星）

1.px、em、rem的区别：px是固定的像素，一旦设置了就无法因为适应页面大小而改变。em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。2.px、em、rem使用场景：对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可 。对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。

前端面试题

0 点赞评论收藏

分享

2023-02-27 15:08

已编辑

门头沟学院 Web前端

CSS:两栏布局的实现（*****五颗星）

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应。 两栏布局的具体实现： 1.利用浮动，将左边元素宽度设置为300px，并且设置向左浮动。将右边元素的margin-left设置为300px，宽度设置为auto（默认为auto，撑满整个父元素）。<style> .outer { height: 300px; background: rgb(42, 219, 83); } .left { float: left; width: 3...

前端面试题

0 点赞评论收藏

分享

2023-02-24 21:08

门头沟学院 Web前端

CSS：响应式设计的概念及基本原理（***三颗星）

响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。关于原理： 基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。关于兼容： 页面头部必须有mate声明的viewport。 <meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

前端面试题

0 点赞评论收藏

分享

2023-02-24 21:03

门头沟学院 Web前端

CSS：如何根据设计稿进行移动端适配？（***三颗星）

移动端适配主要有两个维度：适配不同像素密度， 针对不同的像素密度，使用 CSS 媒体查询，选择不同精度的图片，以保证图片不会失真；适配不同屏幕大小， 由于不同的屏幕有着不同的逻辑像素大小，所以如果直接使用 px 作为开发单位，会使得开发的页面在某一款手机上可以准确显示，但是在另一款手机上就会失真。为了适配不同屏幕的大小，应按照比例来还原设计稿的内容。为了能让页面的尺寸自适应，可以使用 rem，em，vw，vh 等相对单位。

前端面试题

0 点赞评论收藏

分享

2023-02-25 14:38

已编辑

门头沟学院 Web前端

HTML：严格与混杂模式，!Doctype html（三星）

 文档声明（Doctype）和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？它们有何意义?（***三颗星）1.文档声明（Doctype）的作用： 文档声明是为了告诉浏览器，当前HTML文档使用什么版本的HTML来写的，这样浏览器才能按照声明的版本来正确的解析。2.<!doctype html>的作用： <!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5 标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，我们需要避免此类情况发生。3.严格模式与混杂模式：严格模式： 又称为标...

前端面试题

0 点赞评论收藏

分享

2023-03-02 21:47

已编辑

门头沟学院 Web前端

ES6：ES6的call方法和apply方法（五颗星）

1.定义： 将方法借给某个对象的方法。call和apply作用相同，写法不同。 apply() 方法调用一个具有给定 this 值的函数，以及以一个数组（或一个类数组对象）的形式提供的参数2.语法使用call方法的语法：（方法.call(对象)） 被借用对象.方法.call(借用对象)使用apply方法的语法：（方法.apply(对象)） 被借用对象.方法.apply(借用对象)3.基本使用(相同点):  1.将方法借给对象使用 2.借用之后自动调用 3.会将方法中的this指向借给的对象 特点：可以设置方法中this的指...

前端面试题

0 点赞评论收藏

分享

2023-02-27 00:48

已编辑

门头沟学院 Web前端

CSS：CSS预处理器/后处理器，为什么使用它们（四颗星）

1.预处理器 如：less，sass，stylus， 用来预编译sass或者less，增加了css代码的复用性。层级，mixin， 变量，循环， 函数等对编写以及开发UI组件都极为方便。 css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。 其它css预处理器语言：Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT C...

前端面试题

0 点赞评论收藏

分享

2023-02-27 16:35

已编辑

门头沟学院 Web前端

CSS：伪元素和伪类的区别和作用（****四颗星）

1.伪元素： 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。他们只在外部显示可见，但不会在文档的源代码中找到它们，因此称为伪元素<style> p{ height: 100px; width: 300px; } p::after { content:"后" } p::before{ content: "前"; } ...

前端面试题

0 点赞评论收藏

分享

2023-02-23 00:05

门头沟学院 Web前端

CSS：css中继承与不可继承属性有哪些（****四颗星）

1.不可继承的属性 1.display 规定元素应该生成的框的类型 2.文本属性vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi：设置文本的方向 3.盒子模型的属性 width、height、margin、border、padding 4.背景属性 background、background-color、background-image、background-re...

前端面试题

0 点赞评论收藏

分享

2023-02-23 02:06

已编辑

门头沟学院 Web前端

HTML：渐进增强和优雅降级区别（****四颗星）

1.渐进增强（progressive enhancement） 针对低版本的浏览器进行页面重构，保证基本功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。 2.优雅降级（graceful degradation） 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。 3.渐进增强和优雅降级区别 优雅降级是从复杂的现状开始的，并试图减少用户体验的供给； 而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要； 降级（功能衰竭）意味着往回看， 而渐进增强则意味着往前看，同时保证其根基处于安全地带 ...

前端面试题

0 点赞评论收藏

分享

2023-02-23 00:04

门头沟学院 Web前端

CSS：display属性值及作用（*****五颗星）

display属性值及作用？属性值作用none元素不显示，并且会从文档流中移除。block块类型。默认宽度为父元素宽度，可设置宽高，换行显示。inline行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。inline-block默认宽度为内容宽度，可以设置宽高，同行显示。list-item像块类型元素一样显示，并添加样式列表标记。table此元素会作为块级表格来显示。inherit规定应该从父元素继承display属性的值。

前端面试题

0 点赞评论收藏

分享

关注他的用户也关注了：

牛客网
牛客企业服务