常见的一部份面试题

分类：Flex作者：编程之家用户

 

 

 

 

一、      盒子模型是什么？

      Margin：外边距

Border：边框线

Padding：内边距

Content：内容

 

二、      边框盒与内容盒有什么区别？分别对应属性是什么？

  1. 1.    边框盒：border-box:border、padding、content组成

a)     浏览器调试时，页面中显示的元素尺寸是指边框盒的尺寸

b)    元素的背景，默认覆盖边框盒，可通过background-clip属性修改

c) background-clip属性：含义：背景覆盖范围

                      不可继承

默认值：border-box

取值：border-box：背景覆盖边框盒

padding-box：背景覆盖填充盒

content-box：背景覆盖内容盒

  1. 2.     内容盒（content-box）：由content组成

a)     默认情况下，width和height属性，是指内容盒的宽度和高度

b)    width和height的设置范围，可通过box-sizing属性修改

c)        box-sizing属性：含义：盒子宽高的设置范围

不可继承默认值：content-box

取值：content-box：表示内容盒的宽高

border-box：表示边框盒的宽高

 

三、      弹性布局如何改变主轴方向？定义项目在主轴的对齐方式有哪些？项目在交叉轴上有哪些对齐方式？

1)     flex-direction属性决定主轴的方向（即项目的排列方向）。

             row（默认值）： 主轴为水平方向，起点在左端；

             row-reverse： 主轴在水平方向，起点在右端 ；

             column：主轴为垂直方向，起点在上沿。

             column-reverse：主轴为垂直方向，起点在下沿。

 

2)        flex-wrap属性定义，如果一条轴线排不下，如何换行。

            nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度；

            wrap： 换行，并且第一行在容器最上方；

            wrap-reverse： 换行，并且第一行在容器最下方。

 

3)     flex-flow 是flex-direction和flex-wrap的缩写形式，默认值为：flex-flow: row wrap; 

4)     justify-content属性定义了项目在主轴上的对齐方式。 

       

主轴方向为：row-起点在左边，row-reverse-起点在右边， column-起点在上边，column-reverse-起点在下边

           flex-start（默认值）： 项目位于主轴起点。

           flex-end：项目位于主轴终点。

           center： 居中

           space-between：两端对齐，项目之间的间隔都相等。(开头和最后的项目，与父容器边缘没有间隔)

           space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目，与父容器边缘有一定的间隔)

5)     align-items属性定义项目在交叉轴上如何对齐。

            flex-start：交叉轴的起点对齐。

            flex-end：交叉轴的终点对齐。

            center：交叉轴的中点对齐。

            baseline: 项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)

            stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

 (当项目换为多行时，可使用align-content取代align-items)

           flex-start：与交叉轴的起点对齐。

           flex-end：与交叉轴的终点对齐。

           center：与交叉轴的中点对齐。

           space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

           space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

           stretch（默认值）：轴线占满整个交叉轴。

 

 

四、      行内元素有哪些，特点是什么？块级元素有哪些，特点是什么？空元素有哪些？

块级元素

  1. 宽高可以自行设置，与内容 无绝对 关系
  2. 默认独占一行，与其他元素不能共存一行
  3. 对应的css属性是 display：block
  4. 常见的有 div、 p 、h1-h6 、hr、 ul 、 ol 、pre 各种h5 新增的语义化标签如header 、footer
  5. 宽高不可以设置，设置无效，由内容决定宽高
  6. 默认能与其他元素共存一行
  7. 对应的css属性是display:inline
  8. 常见的行内元素有：a、 span 、 strong、 I、 b 、td
  9. 宽高可以设置，与内容无绝对关系
  10. 默认不独占一行，可与其它元素共存一行
  11. 对应的CSS属性是：display:inline-block
  12. 常见的元素： img 、 td 、 table 、video 、audio 、 表单 、 。。。

行内元素

行内块级元素

 

五、      元素position属性有哪几种值？分别详细描述其什么意思。

   Absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

   Fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。

Relative：生成相对定位的元素，相对于其正常位置进行定位。

Static：默认值。没有定位，元素出现在正常的流中

Inherit：规定应该从父元素继承 position 属性的值。

 

六、   display属性有哪些常见值？分别是什么意思？

None：此元素不会被显示。

Block：此元素将显示为块级元素，此元素前后会带有换行符。

Inline：默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block：行内块元素。

Inherit：规定应该从父元素继承 display 属性的值。

七、   CSS选择器的优先级，从高到低排出来。

浏览器默认样式表中的声明

用户样式表中的普通声明

作者样式表中的普通声明

作者样式表中的重要声明

用户样式表中的重要声明

 

八、   overflow属性有哪些值，分别描述其含义。

Visible：默认值。内容不会被修剪，会呈现在元素框之外。

Hidden：内容会被修剪，并且其余内容是不可见的。

Scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

Auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

Inherit：规定应该从父元素继承 overflow 属性的值。

 

九、      DOCTYPE作用？语义化标签的作用？

<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

 

 

语义化标签的作用：有利于浏览器理解HTML文档

有利于搜索引擎理解HTML文档

 

 

十、 描述优雅降级和渐进增强。

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

 

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

 

十一、    写出几种常见浏览器内核（1个1分）。

1、360浏览器：Chrome内核和IE内核。

2、百度浏览器：IE和Webkit双内核。

3、QQ浏览器：Chromium内核+IE双内核。

4、猎豹浏览器：Trident和WebKit。

5、搜狗浏览器：chromium内核。

 

十二、    清除浮动的方法（至少4种）？

（1）        给父级元素单独定义高度（height）

原理：如果父级元素没有定义高度，父元素的高度完全由子元素撑开时，父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

 优点：简单、代码少、容易掌握。

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。对于响应式布局会有很大影响。

（2）        在标签结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，不利于页面的优化。

（3）        父级div定义伪类:after 和 zoom

原理：元素生成伪类的作用和效果相当于方法2中的原理，但是IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题 

优点：浏览器支持好、不容易出现怪问题，写法是固定的，不理解也可以直接复制使用；

缺点：css代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

（4）        父级div定义 overflow:hidden

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。（不建议使用此种方式，可能会影响页面元素布局）

 

 

十三、         详细描述em,rem,vh，vw,px,%这6种单位的意思？

Px：是 pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率；

Em：参考父元素的font-size,具有继承的特点。浏览器默认字体是16px,

Rem：是CSS3新增的一个相对单位，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

%：百分比，相对长度单位，相对于父元素的百分比值。

vh和vw： 相对于视口的高度和宽度，1vh等于1/100的视口高度，1vw等于1/100的视口宽度。

 

 

十四、       背景图片的相关属性（地址、重复方式、位置、尺寸、固定背景图）？

  1. 1.    设置背景图片：background-image：url（）
  2. 2.    设置背景图片的重复方式：background-repeat

　取值：repeat：默认值，沿水平和垂直方向平铺
　　    repeat-x：沿水平方向平铺
　　    repeat-y：沿垂直方向平铺
　　    no-repeat：设置背景图片不重复平铺

  1. 3.    设置背景图片的位置：background-position

2.取值：x y
　　取像素值：
　　x：表示背景图片水平方向的偏移距离正值表示图片向右偏移，负值表示图片向左偏移
　　y：背景图片垂直方向的偏移距离正值表示图片向下偏移，负值表示图片向上偏移
注意：结合“精灵图”实现元素背景图片调整，这种技术叫“精灵技术”
　　取百分比
　　参照元素尺寸计算水平和垂直偏移距离
　　 0% 0%：背景图片显示在元素左上角
　　 50% 50%：背景图片显示在元素中间
　　100% 100%：背景图片显示在元素右下角
方位值确定背景图片的位置
　　x：left / center / right
　　y: top / center / bottom
如果只设置一个方向上的关键字，另外一个方向默认是center

4.设置背景图片的大小
　　属性：background-size
　　取值：x y
　x y分别表示背景图片的宽和高
　　像素值
　　百分比：参照元素宽高尺寸计算背景图片大小
　　cover：表示将图片等比放大至完全覆盖元素，超出部分不可见
　  contain：表示将图片等比拉伸至刚好被元素容纳，不能超出元素尺寸，可能或造成背景图片无法完全覆盖元素的效果
5.背景属性简写
　　属性：background
取值：url() repeat position
注意：1.背景属性按照上面取值的顺序设置
background-size单独设置

十五、 表单元素中下拉列表的两种写法？

<input type=text list=list1>

<datalist id=list1>

<option>推荐选项1</option>

<option>推荐选项2</option>

</datalist>

 

<select size=1 >

<option>选项一</option>

<option>选项二</option>

<option selected >选项三</option>
</select>

</select>

 

原文地址：https://www.cnblogs.com/caoxiangwang/p/11407725.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

css display:flex 属性
一：display:flex布局display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵
display:flex 布局详解2
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：1<divclass="demo">2<divclass="inner">3<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>4</div
移动端开发
移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些应用。常见的例子，比如360杀毒，photoShop，VisualStudioCode等等移动端app是什么，有哪些应用。常见的例子，比如手机微信，手机qq，手机浏览器，美颜相机等等PC端与移动端的区别第一：PC考虑的是浏览器的兼容性，移动端考
grid布局笔记
最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周末了，难得学点东西，grid是之前看到的，很好奇，讲的二维的布局，看起来很方便，应该很适合移动端布局，所以今天抽时间学一学，这个当是笔记了。参考的是阮老师的博客。阮一峰：CSSGrid网格布局教程http://www.ruanyifeng.com/blog/2019/03/g
盒模型
display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后，浮动，定位将不会有效果）给父元素设置的属性：（1）display：flex---把容器设置为弹性盒模型。（2）flex-direction---设置弹性盒模型主轴方向默认情况下主
javascript – Flex禁用Safari键盘快捷键
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他地方的JavaScript,我可以告诉Safari不要这样做？解决方法:简短的
flex布局，flex-item
flex布局，flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
c# – 大屏幕多点触控交互式应用程序设计
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是：开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此……必须有一些非常棒的Java库用于触摸交互,但是在Windows平台上
左图有文字的一些CSS样式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&quo
弹性盒模型：flex多行多列两端对齐，列不满左对齐
【1】需求：  【2】解决方案：最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的justify-content:space-between;实现时发现最后一行不能左对齐，而是两端对齐方式。 不是项目上想要的效果#网上查了一些资料，有两种方法可以实现效果：**1.
AS3无法从Java发送的套接字解​​码AMF3对象
我有一个java套接字服务器,它在连接时将Animal对象发送到Flash客户端.对象发送方式如下：Amf3Outputamf3Output=newAmf3Output(SerializationContext.getSerializationContext());amf3Output.setOutputStream(userSocket.getOutputStream());amf3Output.writeObject(animal)
java – 在JBoss上使用Flex / BlazeDS的Client.Error.MessageSend问题
我正在开发一个Flex3.4应用程序,它通过最新版本的BlazeDS与JBoss-4.2.2服务器上运行的JavaEE后端进行交互.当我在Tomcat上从FlashBuilder4beta2运行Flex应用程序时,一切都很好,Flex应用程序能够进行所需的远程调用.但我的生产环境是在JBoss上,当我将应用程序移动到JBoss时(更
java – NetConnection.Call.Failed偶尔在Flex3 / Tomcat / BlazeDS / Spring中发生
我有一个非常大的问题.我使用Flex3/Tomcat/BlazeDS/Spring编写了一个大型应用程序,在本地开发时运行良好,当我部署到公共开发环境时很好,但是当部署到我们的测试环境时经常失败.当远程处理请求花费大量时间(超过20秒)时,故障似乎最常发生.在我的开发服务器上,错误发生,但仅
HTML5的Day1
弹性和布局display:flex在ie6,ie7不兼容状态，一般在pc用的比较少,在手机端所有的浏览器都是支持的控制子元素在父元素里面的位置关系display:flex是给父元素加的文档流是按照主轴排列，只要父元素加了flex,那么里面的子元素全部可以直接添加宽高主轴的方向
FLEX源码分析
FLEX2.0源码分析（一）https://www.jianshu.com/p/8bc4c5f4b19fFLEX源码分析二（网络监测swizzle）https://www.jianshu.com/p/ffb95f2cbda6FLEX源码分析三（网络监测记录FLEXNetworkRecorder）https://www.jianshu.com/p/66267dc922c5FLEX源码分析四（Systemlog）https://www.jianshu.
页面伸缩布局实例
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title><itle>6<style>7*{8margin:0;9padding:0;10
弹性盒子圣杯布局
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&qu
flex与inline-flex
flex：将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示两者都是使子元素们弹性布局，但是如果是flex，父元素的尺寸不由子元素尺寸动态调整，不设置时默认是100%，而inline-flex则会使父元素尺寸跟随子元素们的尺寸动态调整。
css实现手机端导航栏左右滑动
<html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>test<itle><stylemedia="screen">.tab-head{list-style-type:no
php – 查找位于指定距离之间的用户(使用用户的邮政编码)
有没有办法使用邮政编码找到径向距离？我的任务是搜索居住在指定距离内的所有用户.我知道用户的zipcodes.例如,距离当前位置25英里的用户.我有其他搜索类别,我正在使用mysql查询.我无法解决距离问题.我的后端是在PHP中Flex的前端和前端.对我来说最好的选择就是www.zip-codes.com
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot