当前位置:首页 » 网页前端 » 前端标准模型
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端标准模型

发布时间: 2023-01-23 11:58:51

前端开发框架有哪些

前端框架好不好用还是要看具体情况分析,我这里给你推荐几个常用的框架,可以按需使用。

1、vue-element-admin

一个基于vue2.0和Element的控制面板UI框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板已经非常成熟了,并且有相关的社区和维护人员,开发时候遇到问题也不要慌。

2、AdminLTE

非常流行的基于Bootstrap 3.x的免费的后台UI框架,这是一个非常老牌的后台管理系统模板,每个页面都是单独的html网页,适合前端入门新手用来做项目。

3、ant-design-pro

这个就不多说了,选择react技术栈的童鞋们必然离不开这个优秀开箱即用的中台前端/设计解决方案,文档齐全,组件丰富,一键生成模板,更支持开启复制粘贴模式哦。

4、ng2-admin

这是基于Angular 2、Bootstrap 4和webpack的后台管理面板框架,要收前面已经有了React和vue技术栈的模板,那怎么能少了ng的?虽然在国外用的比较多,国内较少使用,但丝毫不影响ng作为前端框架三巨头之一的地位。

9:material-dashboard

基于 Bootstrap 4 和 Material 风格的控制面板。Material Dashboard 是一个开源的 Material

Bootstrap Admin,其设计灵感来自谷歌的 Material Design 。

10:d2-admin

D2Admin 是一个完全 开源免费 的企业中后台产品前端集成方案,基于 vue.js 和 ElementUI 的管理系统前端解决方案 ,小于 60kb的本地首屏 js 加载,已经做好大部分项目前期准备工作

11:vuestic-admin

vuestic-admin管理台仪表盘是一个响应式的仪表盘模板,采用Bootstrap4和Vue.js构建。这个精美的管理台模板提供了自定义元素组件,如地图,聊天,个人资料卡,图标,进度条等,以及用于登录和注册的预建页面。

⑵ 前端里面什么是盒子模型

盒子模型:当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型,将所有元素表示为一个个矩形的盒子。
组成:一个盒子由四个部分组成:content(内容)、padding(内边距)、border(边框)、margin(外边距)
盒子总宽度 = width(内容宽度) + padding + border + margin;
盒子总高度 = height(内容高度) + padding + border + margin

⑶ 字节跳动最爱考的前端面试题:CSS 基础

参考链接: juejin.im/post/5e8d52…

animation、transition、transform、translate 这几个属性要搞清楚:

水平居中:

垂直居中

BFC 是块级格式上下文,IFC 是行内格式上下文:

不会,因为 BFC 是页面中一个独立的隔离容器,其内部的元素不会与外部的元素相互影响,比如两个 div,上面的 div 设置了 float,那么如果下面的元素不是 BFC,也没有设置 float,会形成对上面的元素进行包裹内容的情况,如果设置了下面元素为 overflow:hidden;属性那么就能够实现经典的两列布局,左边内容固定宽度,右边因为是 BFC 所以会进行自适应。

box-sizing 属性可以被用来调整这些表现:

BFC(Block Formatting Context)格式化上下文,是 Web 页面中盒模型布局的 CSS 渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。

五种:

BFC 的特性:

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括: 外边距(margin) 、 边框(border) 、 内边距(padding) 、 实际内容(content) 四个属性。 CSS盒模型: 标准模型 + IE模型

标准盒子模型:宽度=内容的宽度(content)+ border + padding

低版本IE盒子模型:宽度=内容宽度(content+border+padding),如何设置成 IE 盒子模型:

static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性定义。 sticky:具体是类似 relative 和 fixed,在 viewport 视口滚动到阈值之前应用 relative,滚动到阈值之后应用 fixed 布局,由 top 决定。

问:为什么会有这种现象?你能解释一下吗

是由块级格式上下文决定的,BFC,元素在 BFC 中会进行上下排列,然后垂直距离由 margin 决定,并且会发生重叠,具体表现为同正取最大的,同负取绝对值最大的,一正一负,相加

BFC 是页面中一个独立的隔离容器,内部的子元素不会影响到外部的元素。

不清楚浮动会发生高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)

了解更多加入我们前端学习圈

⑷ 前端——盒模型

导言:当HTML 定义了各类元素以后,由CSS将所有的元素置于不同的盒子,一个个盒子和其中所包含的的元素组成了一个网页的基本部分...

Content box : 这个区域是用来显示内容,大小可以通过设置 width 和 height .

Padding box : 包围在内容区域外部的空白区域; 大小通过 padding 相关属性设置。

Border box : 边框盒包裹内容和内边距。大小通过 border 相关属性设置。

Margin box : 这是最外面的区域,是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

一般在标准盒模型中,设置的height和width都只对content-box起作用,padding、margin和border需另外进行设置。

<1>  margin并不计入实际大小,但是仍然会影响页面所占的空间(影响盒子外部所占的空间)一般盒子的范围到边框为止,并不涉及到margin。

<2>  且牢记模型的总宽度和总高度=各部分*2(除content-box仅计算一次即可)后的总和

通俗点来讲:可以一次性设置想要的呈现方式,不必再单独设置padding,border等元素的参数;

width被认定为左内边界到右内边界的距离

height一般被认为是上内边界到下内边界的距离

在CSS中任何块级的元素均可被设置显示高度,如若 设置的显示高度小于内容高度,则自动添加一个滚轮,若大于内容高度,则依据浏览器的overflow属性

宽高和margin均可设置为auto:

对于块级元素:

(1)宽度设置为auto:则会尽可能的宽,元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距

(2)高度设置为auto:则会尽可能的窄,元素高度=恰好足以包含其内联内容的高度

⑸ web前端面试题第二道—简述盒模型

W3C组织建议把所有网页上的对象都放在一个盒子(box)中,就是所说的盒子模型,CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:实际内容(content)、填充(padding)、边框(border),边界(margin)。一个div就是一个盒子。

下面的图片说明了盒子模型(Box Model):

不同部分的说明与属性:

Content(内容) - 盒子的内容,显示文本和图像。

Padding(内边距) - Padding是盒子中的文字距离盒子边框(border)的距离,内边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Margin(外边距) - margin是盒子距离网页边的距离,外边距是透明的。

最终盒子实际所占位置大小计算公式是这样的:

盒子所占位置的实际宽度=宽度+左填充+右填充+左边框+右边框+左边界+右边界

盒子所占位置的实际高度=高度+顶部填充+底部填充+上边框+下边框+上边界+下边界

要注意区分的是盒子所占位置的实际宽度高度值和盒子实际大小的宽度和高度值,盒子实际大小的宽度和高度是所占位置实际宽度高度的值减去边界(margin)所占的大小,即

盒子的实际宽度=宽度+左填充+右填充+左边框+右边框

盒子的实际高度=高度+顶部填充+底部填充+上边框+下边框

盒子模型的3D示意图,如下图所示,padding与margin是看不见的透明元素

从第一层到第五层依次为:border、content+padding、background-image、background-color、margin。

盒子模型分两种,IE盒子模型和标准的W3C盒子模型。他们对盒子模型的解释各不相同。

W3C标准盒子模型

W3C标准盒子模式包括内容(content)、填充(padding)、边框(border)、边界(margin)

IE盒子模型

从图中可以可以看出IE盒子模型的范围也包括content、padding、border、margin,所不同的是IE盒子模型的content包含了border和padding。那么应该选用哪种模型呢,当然是选用W3C 标准盒模型,就是要在网页的顶部加上DOCTYPE声明,否则各个浏览器会根据自己的行为去理解网页。

例如一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为50px

假如用标准 w3c 盒子模型解释,那么这个盒子需要占据的位置为:

宽 20*2+1*2+10*2+200=262px、高20*2+1*2*10*2+50=112px

盒子的实际大小为:宽1*2+10*2+200=222px、高1*2+10*2+50=72px

假如用ie 盒子模型,那么这个盒子需要占据的位置为:

宽 20*2+200=240px、高20*2+50=70px

盒子的实际大小为:宽 200px、高 50px

由于IE浏览器使用自己的非标准模型。IE浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。就是要在网页的顶部加上DOCTYPE声明。

⑹ 前端常用的框架有哪些

给你介绍Web前端三大主流框架
React:
1.声明式设计:React采用声明范式,可以轻松描述应用。
2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活:React可以与已知的库或框架很好地配合。
优点:
1.速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
2.跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。
3.模块化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。
4.单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构5.同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。6.兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。缺点:React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouter和Flux才能写大型应用。

Vue:
Vue是尤雨溪编写的一个构建数据驱动的Web界面的库,准确来说不是一个框架,它聚焦在V(view)视图层。
它有以下的特性:
1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化
优点:
1.简单:官方文档很清晰,比Angular简单易学。
2.快速:异步批处理方式更新DOM。
3.组合:用解耦的、可复用的组件组合你的应用程序。
4.紧凑:~18kbmin+gzip,且无依赖。
5.强大:表达式无需声明依赖的可推导属性(computedproperties)。
6.对模块友好:可以通过NPM、Bower或Duo安装,不强迫你所有的代码都遵循Angular的各种规定,使用场景更加灵活。
缺点:
1.新生儿:Vue.js是一个新的项目,没有angular那么成熟。
2.影响度不是很大:google了一下,有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
3.不支持IE8。

Angular:
Angular是一款优秀的前端JS框架,已经被用于Google的多款产品当中。
它有以下的特性:
1.良好的应用程序结构
2.双向数据绑定
3.指令
4.HTML模板
5.可嵌入、注入和测试
优点:
1.模板功能强大丰富,自带了极其丰富的angular指令。
2.是一个比较完善的前端框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能;3.自定义指令,自定义指令后可以在项目中多次使用。
4.ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。
5.angularjs是互联网巨人谷歌开发,这也意味着他有一个坚实的基础和社区支持。
缺点:
1.angular入门很容易但深入后概念很多,学习中较难理解。
2.文档例子非常少,官方的文档基本只写了api,一个例子都没有,很多时候具体怎么用都是google来的,或直接问misko,angular的作者。
3.对IE6/7兼容不算特别好,就是可以用jQuery自己手写代码解决一些。
4.指令的应用的最佳实践教程少,angular其实很灵活,如果不看一些作者的使用原则,很容易写出四不像的代码,例如js中还是像jQuery的思想有很多dom操作。
5.DI依赖注入如果代码压缩需要显示声明。

⑺ 什么是web前端开发标准

对于前端,官方的定义是网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。用自己的话来说,前端是网页给访问网站的人看的内容和页面,那前端开发顾名思义就是这些内容和页面中代码的实现。

现在的前端开发使得现代网页更加美观,交互效果显着,功能更加强大。所以现在的前端开发,运用到的知识面更加广泛,难度也更大。前端开发目前市场需求还是很大的,而且相对来讲比较容易,很适合学习。需要学习的内容也不少,我有全套web前端视频课资料可以发给你自学。

学习内容包括:

①计算机基础以及PS基础

②前端开发基础(HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架)

③移动开发

④前端高级开发(ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等)

⑤小程序开发

⑥全栈开发(MySQL数据库、Python编程语言、Django框架等)

⑦就业拓展(网站SEO与前端安全技术)

互联网行业目前还是最热门的行业之一,学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的,发展前景非常好,普通人也可以学习。

想要系统学习,你可以考察对比一下开设有相关专业的热门学校,好的学校拥有根据当下企业需求自主研发课程的能力,能够在校期间取得大专或本科学历,中博软件学院、南京课工场、南京北大青鸟等开设相关专业的学校都是不错的,建议实地考察对比一下。

祝你学有所成,望采纳。