不支持缓存,数据变,直接会触发相应的操作;
监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数,
immediate:组件加载立即触发回调函数执行,
deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到
当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,
你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功。
组件中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。
答:created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
单页应用的内容的改变不需要重新加载整个页面,获取数据也是通过Ajax异步获取,没有页面之间的切换,就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象,页面显示流畅,web应用更具响应性和更令人着迷。
后端不再负责模板渲染、输出页面工作,后端API通用化,即同一套后端程序代码,不用修改就可以用于Web界面、手机、平板等多种客户端。
单页应用相对服务器压力小,服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍。
Vue-router懒加载就是按需加载组件,只有当路由被访问时才会加载对应的组件,而不是在加载首页的时候就加载,项目越大,对首屏加载的速度提升得越明显。
在做项目时,我们会用到很多库,采用cdn加载可以加快加载速度。
vue中的scoped属性的效果主要通过PostCSS转译实现 , PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的dom——组件内部dom。
1.前端在本地写好路由表,以及每个路由对应的角色,也就是哪些角色可以看到这个菜单/路由;
2.登录的时候,向后端请求得到登录用户的角色(管理者、普通用户);
3.利用路由拦截,根据取到的用户角色,跟本地的路由表进行对比,过滤出用户对应的路由,并利用路由进行左侧菜单渲染
点击分配权限按钮,把当前角色的id放在data中,点击确定按钮时候,先获取到整个树型结构中
半选和全选状态的id值合并到完整的数组中,把得到的数组做了一次字符串的拼接,用英文的逗号隔开
发送请求把保存的角色id和新拼接的id字符串发送到服务器端
首先做一个用户管理,包括用户的增删改查,还得做一个后台左侧菜单管理,包括增删改查,以及二级菜单的增删改查,系统有一个超级管理员,可以对所有普通用户分配权限,分配完权限之后,这个用户下次登录就可以看到权限之内的菜单,这叫做随意分配权限,还有一种按角色分配权限和自定义权限,取的是并集,把重复的权限过滤掉
3、将路由改为按需加载的形式
hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件*(hashchange只能改变 # 后面的url片段**)* , hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用 , hash模式背后的原理是onhashchange
事件,可以在window对象上监听这个事件
history 模式改变 url 的方式会导致浏览器向服务器发送请求,这不是我们想看到的,我们需要在服务器端做处理:如果匹配不到任何静态资源,则应该始终返回同一个 html 页面。 如果后端没有准备的话,会分分钟刷出一个404来
token
有过期的机制,可以在请求拦截器中做逻辑判断处理,若当前时间接近了过期时间,则通过更新 token
的接口请求更新 token
,在之后的请求中带上新的 token
。以此循环,若用户过长时间无操作,则可认为用户为离线状态,在用户之后的第一次请求时,由于
token
已经过期,访问后端接口会发生错误,根据后端返回的错误状态码作为判断,将系统定向至登录页面。
问题:在我当前的布局中,我的盒子具有基于标准的特定高度。我想使用列在该框/div 中显示数据,但是当我这样做时,到达第二列的项目会溢出父容器的宽度。(见下图)
注意:调整屏幕大小以获得我在下面的屏幕截图中显示的结果
我正在寻找的结果:我希望元素占用父容器内所需的尽可能多的空间,可能只在 Y 轴(垂直)上溢出。换句话说,我希望文本换行成多行。(见下图)
怎样才能做到这一点?谢谢!
编辑:我正在寻找的是一个解决方案,我没有硬编码宽度,子项从上到下自动重新排列,包装成多列(flex-direction: column; flex-wrap: wrap),但不会溢出父宽度,因此将文本分成多行。
我的理解是 flex 项目将增长以满足子项的内容,因此在这种情况下,包装长文本的 div 增长以满足文本长度。对此的一种解决方案是在 div 上设置特定的宽度。下面将实现您想要的结果,但您需要在第 3 个 div 上调整 div 宽度以获得正确的结果。
关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)
关注公众号:程序员总部,回复前端,免费领取,关注公众号回复前端充值+你的账号,免费为您充值1000积分
所属网站分类: 技术文章 >
CSS部分的面试题主要考察应试者对CSS基础概念模型的理解,例如文档流、盒模型、浮动、定位、选择器权重、样式继承等。很多应试者认为CSS很简单,没多少内容,面试就是面试 JavaScript部分的内容,这些观点是错误的,面试的第一关往往会考察应试者对CSS的掌握情况。因此,CSS也常常是应试者掉入的第一个陷阱。
1、CSS有哪些基本选择器?它们的权重是如何表示的?
CSS基本选择器有类选择器、属性选择器和ID选择器。
CSS选择器的权重预示着CSS选择器样式渲染的先后顺序,元素样式渲染时,权重高的选择器样式会覆盖权重低的选择器样式。
通常将权重分为4个等级,可用0.0.0.0来表示这4个等级。
!important关键字优先级最高。
注意:!importont井非选择器,而是针对选择器内的单一样式设置的。当然,不同选择器内应用 !important的权重也是不一样的,例如,在id选择器内的!important关键字权重要高于类选择器内的 !important关键字权重,即下面所说的选择器权重组合。
内联样式(非元素器)的优先级可看成1.0.0.0。
类属性选择器、属性选择器、伪类的优先级为0.0.1.0。
元素选择器、伪元素选择器的优先级为0.0.0.1。
通配符选择器对特殊性没有任何贡献值。
当把选择器组合使用的时候,相应的层级权重也会递增,例如# id .class的权重为0.1.1.0。
2、CSS的引入方式有哪些?ink和@ import的区别是什么?
CSS有3种引入方式。
行内式是指将样式写在元素的 style属性内。
内嵌式是指将样式写在 style元素内。
外链式是指通过link标签,引入CSS文件内的样式。
通过link标签引入样式与通过@ import方法引入样式有如下区别。
(1)加载资源的限制。
link是 XHTML的标签,除了加载CSS文件外,还可以加载RSS等其他事务,如加载模板等。
如果用link引用CSS,在页面载入时同时加载,即同步加载。
如果用@ import引用CSS,则需要等到网页完全载入后,再加载CSS文件,即异步加载。
link是 XHTML的标签,没有兼容问题。
@ import是在CSS2.1中提出的,不支持低版本的浏览器。
link的标签是DOM元素,支持使用 JavaScript控制DOM和修改样式;@ import是种方法,不支持控制DOM和修改样式。
3、浮动元素引起的问题和解决方法是什么?
引起的问题有如下几个。
(1)父元素的高度无法被撑开,影响与父元素同级的元素。
(2)与元素同级的非浮动元素会紧随其后(类似遮盖现象)。
(3)如果一个元素浮动,则该元素之前的元素也需要浮动;否则,会影响页面显示的结构(即通常所说的串行现象)。
(1)为父元素设置固定高度。
(2)为父元素设置 overflow:hidden即可清除浮动,让父元素的高度被撑开。
(3)用 clear:both样式属性清除元素浮动。
注意:如果只有左浮动或只有右浮动,可以单独设置 clear:left或 clear:right,但是设置clear:both则都可以解决,所以此方法在工作中用得更多。
(4)外墙法是指在父元素外面,添加“一道墙”,设置属性 clear:both
(5)内墙法是指在父元素内部,浮动元素的最后面,添加“一道墙”,设置属性 clear:both
注意:这里所说的少创建元素,实际上并没有少创建,添加的伪元素也是元素,只不过没有写在HTML文档中而已。
注意:推荐以上这种方式,因为 clearfix已经应用在各大CSS框架(如 Bootstrap等)中,并成为行业的默认规范。
4、position的值分别是相对于哪个位置定位的?
relative表示相对定位,相对于自己本身所在正常文档流中的位置进行定位。absolute表示绝对定位,相对于最近一级(从直接父级元素往上数,直到根元素)定位,相对于 statIc的父元素进行定位。
fixed用于生成绝对定位,相对于浏览器窗口或 frame进行定位。
statIc是默认值,没有定位,元素出现在正常的文档流中。
sticky是生成黏性定位的元素,容器的位置根据正常文档流计算得出。
注意:CSS3的新增属性有点类似于 relative与 fixed的结合体。如果目标区域在屏幕中可见,表现为 relative;如果目标区域在屏幕中不可见,表现为fixed。
共同点是对内联元素设置float和 absolute属性,可以让元素脱离文档流,并且可以设置其宽高。
不同点是float仍可占据位置,不会覆盖在另一个BFC区域上,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止, absolute会覆盖文档流中的其他元素,即遮盖现象。
6、CSS选择器(符)有哪些?
(4)相邻选择器(h1+p)
(7)通配符选择器(*)
注意:在CSS3规范中,为了区别伪元素和伪类,CSS3建议伪类用单冒号“:",伪元素用双冒号"::"。
7、CSS的哪些样式可以继承?哪些不可以继承?
注意:为了方便辨识,与字体相关的样式通常可以继承,与尺寸相关的样式通常不能继承。
8、CSS优先级如何排序?
(3) JavaScript是网站中实现前后台交互效果、网页动画效果的一种开发语言,比如鼠标单击( click)事件、前后台数据请求(Ajax)等。
10、为什么要初始化CSS?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没有初始化CSS,往往会导致页面在不同浏览器之间出现差异。
当然,初始化样式有时会对SEO产生一定的影响,但鱼和熊掌不可兼得,所以在力求影响最小的情况下初始化CSS。
11、如何居中div?如何居中一个浮动元素?
确定容器的宽高,例如宽400px、高200px的div.设置层的外边距。
/*注意,由于左上外边距优先级高于右下外边距优先级,因此,还可以简化设置 margin:-150px-250px;*/ /*为方便看效果,添加一种背景色*/12、构成CSS的基本语句是什么?
构成CSS的基本语句如下。
选择器{属性名称1:属性值1;属性名称2:属性值2;}
13、display有哪些值?说明它们的作用。
block是指块类型。默认宽度为父元素宽度,可设置宽高,换行显示。 none是指元素不会显示,已脱离文档流。
inline是指行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。
inline- block是指默认宽度为内容宽度,可以设置宽高,同行显示。
list-item是指像块类型元素一样显示,并添加样式列表标记。
table是指此元素会作为块级表格显示。
14、简要描述块级元素和行内元素的区别。
块级元素的前后都会自动换行。默认情况下,块级元素会独占一行。例如<p><h1-h6><div>都是块级元素,当显示这些元素中间的文本时,都将从新行中开始显示,其后的内容也将在新行中显示。
行内元素可以和其他行内元素位于同一行,在浏览器中显示时不会换行。例如<a><span>等,对于行内元素,不能设置其高度和宽度。
还有一种元素是行内块级元素,比如<img>< input>元素等。这些元素可以和其他行内元素位于同一行,同时可以设置其高度和宽度。
15、如何用DIV+CSS实现3栏布局(左右固定200pX,中间自适应)?
16、解释浮动及其工作原理。
浮动的元素可以向左或向右移动,直到它的外边缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动,必须为元素设置一个宽度( width)。虽然浮动元素已不在文档流中,但是它浮动后所处的位置依然在浮动之前的水平方向上。
因为浮动元素不在文档流中,所以文档流中的块元素表现得就像浮动元素不存在一样,下面的元素会填补原来的位置。
有些元素会在浮动元素的下方,但是这些元素的内容并不一定会被浮动的元素遮盖。当定位内联元素时,要考虑浮动元素的边界,围绕浮动元素放置内联元素。也可以把浮动元素想象成被块元素忽略的元素,而内联元素会关注的元素。
17、解释一下 CSS Sprite,以及如何在页面或网站中使用它。
注意:在高级浏览器中,可以基于图片的bose64编码存储,将图片与其他类型的文件打包。
18、在书写高效CSS时有哪些问题需要考虑?
(1)样式,从右向左解析一个选择器
(2)类型选择器的速度,ID选择器最快, Universal(通配符*)最慢。对于常用的4种类型选择器,解析速度由快到慢依次是ID、 class, tag和 universal。
(3)不要用标签限制ID选择器(如:ul#main- navigation{},ID已经是唯一的,不需要Tag来限制,这样做会让选择器变慢)。
(4)后代选择器最糟糕(换句话说, html body ul li a{}这个选择器是很低效的)。
(5)想清楚你的需求,再去书写选择器。
(6)CSS3选择器(如nth- child)能够漂亮地定位我们想要的元素,又能保证CSS整洁易读。然而,这些神奇的选择器会浪费很多的浏览器资源。
(7)我们知道ID选择器的速度最快,但是如果都用ID选择器,会降低代码的可读性和可维护性等。在大型项目中,相对于使用ID选择器提升速度,代码的可读性和可维护性带来的收益更大。
(1)双边距问题,是使用fLoat引起的。
(2)3像素问题,是使用float引起的。
(3)超链接 hover伪类样式,单击后失效。
(5)PNG图片半透明问题。
解决方法是使用 JavaScript代码库,或使用IE滤镜
注意:在使用E滤镜解决PNG图片透明度的时候,在1E6中,会对事件产生影响。
20、页面重构怎样操作?
编写CSS,让页面结构更合理化,提升用户体验,达到良好的页面效果并提升性能
display:none隐藏对应的元素,在文档流中不再给它分配空间,它各边的元素会合拢,即脱离文档流。
visibility:hidden隐藏对应的元素,但是在文档流中仍保留原来的空间。
22、内联元素可以实现浮动吗?
在CSS中,任何元素都可以浮动。不论浮动元素本身是何种元素,都会生成个块级框。因此,对于内联元素,如果设置为浮动,会产生和块级框相同的效果。
content属性与:before及:after伪元素配合使用,用来插入生成的内容,可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号,并可以结合计数器,为页面元素插入编号。比如,查看如下代码。
24、如何定义高度很小的容器?
因为有一个默认的行高,所以在IE6下无法定义小高度的容器。
25、如何在图片下方设置几像素的空白间隙?
27、如何让超出宽度的文字显示为省略号?
28、如何使英文单词发生词内断行?
31、已知高度的容器如何在页面中水平垂直居中?
32、px和em的区别是什么?
px和em都是长度单位,两者的区别是:px的值是固定的,指定为多少就是多少,计算比较容易;em的值不是国定的,是相对于容器字体的大小,并且em会继承父级元素的字体大小。
与cm对应的另一个长度单位是rem,是指相对于根元素(通常是HTML元素)字体的大小。
33、什么叫优雅降级和渐进增强?两者有什么区别?
优雅降级 graceful degradation是指一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
渐进增强 progressive enhancement是指针对低版本浏览器构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进并追加功能,以达到更好的用户体验。
(1)优雅降级从复杂的现状开始,并试图减少用户体验的供给。
(2)渐进增强则从一个非常基础并且能够起作用的版本开始,并不断扩充,以适应未来环境的需要。
(3)降级(功能衰减)意味着往回看,而渐进增强则意味着朝前看,同时保诬其根基处于安全地带。
34、网页制作会用到哪些图片格式?
用于网页制作的主流图像格式有JPG、PNG、GIF等。
JPG:压缩率高,文件小,最常用。
PNG:支持无损压缩,色彩损失小,保真度高,文件稍大。
GIF:支持动画显示,但只支持256色显示,目前已经被Fash大量取代。
35、CSS的 content属性有什么作用?有什么应用?
CSS的 content属性专门应用在 before/after伪元素上,用于插入生成的内容最常见的应用是利用伪类清除浮动。
不起作用(需要注意行内元素的替换元素img、 Input,它们是行内元素,但是可以设置它们的宽度和高度,并且 margin属性也对它们起作用, margin-op和 margin- botton有着类似于 inline- block的行为)
(1)改版的时候更方便,只须改动CSS文件。
(2)页面加载速度更快、结构清晰、页面简洁。
(3)表现与结构分离。
(4)搜索引擎优化(SEO)更友好,排名更靠前。
38、如果设置<p>的font-sze为10rem,那么当用户重置或拖曳浏览器窗口时,它的文本会不会受到影响?
39、谈谈你对BFC规范的理解。
BFC( Block Formatting Context)指块级格式化上下文,即一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中,两个毗邻的块级盒在垂直方向(和布局方向有关系)的 margin会发生折叠。
BFC决定元素如何对其内容进行布局,也决定与其他元素的关系和相互作用。
40、谈谈你对C规范的理解。
IFC( Inline Formatting Context)指内联格式化上下文,IFC的线框( line box)高度由其包含行内元素中最高的实际高度计算而来(不受竖直方向的 padding/margin的影响)。IFC中的线框一般左右都贴紧整个IFC,但是会被foat元素扰乱。同一个IFC下的多个线框高度不同。
IFC中是不可能有块级元素的,当插入块级元素时(如在p中插入div),会产生两个匿名块,两者与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。
41、谈谈你对GFC规范的理解。
item)上定义网格行( grid row)和网格列(grid column)来为每一个网格项目定义位置和空间。
42、谈谈你对FFC规范的理解。
FFC( Flex Formatting Context)指自适应格式化上下文,即 display值为fex或lne-flex的元素将会生成自适应容器。伸缩容器中的每一个子元素都是一个伸缩单元。伸缩单元可以是任意数量的。伸缩单元内和伸缩容器外的一切元素都不受影响。简单地说, Flexbox定义了伸缩容器内伸缩单元的布局。
43、访问超链接后 hover样式就不出现的原因是什么?应该如何解决?
44、什么是外边距重叠?重叠的结果是什么?
外边距重叠就是 margin- collapse在CSS中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式称为折叠,因此而结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则。
(1)当两个相邻的外边距都是正数时,折叠的结果是它们两者中较大的值
(2)当两个相邻的外边距都是负数时,折叠的结果是两者中绝对值较大的值。
(3)当两个外边距一正一负时,折叠的结果是两者相加的和。
rgba()和 opacity都能实现透明效果,但它们最大的不同是 opacity作用于元素,并且可以设置元素内所有内容的透明度;而 rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)。
46、CSS中可以让文字在垂直和水平方向上重叠的两个属性是什么?
可以用于消除 inline- block元素间的换行符空格间隙
48、有什么方式可以对一个DOM设置它的CSS?
外链式,即通过link标签引入一个外部CSS文件中。
内嵌式,即将CSS代码写在 style标签内。
行内式,即将CSS代码写在元素的 style属性中。
49、在CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?
设置宽高为0,透明度为0,设置z- index位置为-1000。
50、常用的块属性标签及其特征有哪些?
常用块标签有div、hl、h6、ol、ul、li、d、 table、p、br、form。块标签的特征有独占一行,换行显示,可以设置宽、高,块可以套块和行。
51、常用的行内属性标签及其特征有哪些?
52、浏览器标准模式和怪异模式之间的区别是什么?
它们的区别是盒子模型的渲染模式不同。
53、如何避免文档流中的空白符合并现象?
空白符合并是标准文档流的特征之一,可以通过设置 white-spac修改这一特征,属性值如下。
pre表示不会合并空白符,渲染换行符,不会自动换行,相当于pre元素。
pre-wrap表示不会合并空白符,渲染换行符,自动换行pre-line表示合并空白符,渲染换行符,自动换行。
nowrap表示合并空白符,不会渲染换行符,不会自动换行。
normal表示默认值,按照文档流特点渲染,合并空白符,不会渲染换行符,自动换行。
54、常见的兼容性问题有哪些?
PNG24位的图片在IE6浏览器上出现背景,解决方案是改成PNG8,也可以引段脚本进行处理浏览器默认的 margin和 padding不同。解决方案是用一个全局的*{ margin:0 padding:0;}来统一它们。
IE6双边距Bug是指在块属性标签float后又有横行的 margin时,在IE6中显示的margin比设置的大浮动IE产生的双倍距离(IE6的双边距问题是指在IE6下,如果对元素设置了浮动,同时又设置了 margin-left或 margin- right, margin的值会加倍)
这种情况下IE会产生20px的距离,解决方案是在float的标签样式控制中加入display:inline,将其转换为行内属性(这个符号只会被IE6识别)。
用渐进识别的方式,从总体中逐渐排除局部。
首先,巧妙地使用“\9”这一标记,将IE浏览器从所有情况中分离出来。然后,再次使用“+”将IE8和I7、IE6分离开,这样IE8就能被独立识别。
怪异模式问题是指漏写DTD声明, Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯。现在可以使用[hml5]
解决方法是养成良好的代码编写习惯,同时采用 margin-top或者同时采用 margin- bottom。
55、透明度具有继承性,如何取消透明度的继承?
使用rgba给元素的背景设置透明度的方式,来替代使用opacity设置元素透明度的方式,解决子元素继承父元素透明度的问题。
56、CSS中,自适应的单位都有哪些?
自适应的单位有以下几个
相对于视口宽度的单位:ww
相对于视口高度的单位:vh
相对于视口宽度或者高度(取决于哪个小)的单位:Vm
相对于父元素字体大小的单位:em
相对于根元素字体大小的单位:rem
57、说说rem和em的区别。
rem表示相对于根元素的字体大小。
em表示相对于父元素的字体大小
IE会首先加载整个HTML文档的DOM,然后再导入外部的CSS文件。因此,在页面DOM加载完成到CSS导入完成中间,有一段时间页面上的内容是没有样式的,这段时间的长短跟网速和电脑速度都有关系。
display:none隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当它从来都不存在。
visibility:hidden隐藏对应的元素,但是在文档布局中仍保留原来的空间。
欢迎加我微信(winty230),拉你进技术群,长期交流学习...
欢迎关注「前端Q」,认真学前端,做个专业的技术人...