目录
面试题
面试题一:
1、简述弹性盒子 flex 布局及 rem 布局?
问题解答:
rem 是 CSS3 新增的一个相对单位,相对于根节点(html)字体大小的值,r 就是 root html{font-size:10px} 则 2rem=20px 通过它就可以做到只修改根元素的大小,就能成比例地调整所有的字体大小,只依赖 html 字体的大小
适配方案步骤:
1、首先动态计算 html 的 font-size
2、将所有的 px 换算成 rem(计算过程请看下面代码和注释(注意:rem 的换算是根 据设计图稿的像素计算的,下面的计算只是动态计算 html 的 font-size 大小),
请看下面的注意事项:
<meta name="viewport" content="width=device-width,user-scalable=no"/> <style> body{ margin: 0; } div{ /*width: 80px;*/ height: 100px; width: 4rem; height: 4rem; /*1rem=20; nrem=80; n=80/rem; n=80/20; n=4*/ background: green; float: left; } <style> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </body> <script> (function(){ var html=document.documentElement; var width=html.getBoundingClientRect().width; //获取屏幕宽度(设备独立像素), 如 iPhone6 为 414 html.style.fontSize=width/16+'px'; //html font-size = 20px //iphone5 下 1rem=20 这里之所以除以 16,是因为要把宽度分成 16 份,这个数并没 有固定,一般选 15,16,以 ipone5 为准是 16,因为一除可以得到整数 20,好计算。 })(); </script>
注意:
1、必需动态的去设置 html 的大小,才能适配
2、根据页面的宽度除以一个系数,把算出的这个值赋给 html 的 font-size 属性,rem 换 算值是根据 psd 设计图的宽度/系数的 rem 系数 以 640px 设计稿和 750px 的视觉稿,网易这样处理的:
var width = document.documentElement.clientWidth; // 屏幕的布局视口宽度
var rem = width / 7.5; // 750px 设计稿将布局视口分为 7.5 份
var rem = width / 6.4; // 640px 设计稿将布局视口分为 6.4 份
这样不管是 750px 设计稿还是 640px 设计稿,1rem 等于设计稿上的 100px。故 px 转换 rem 时:1rem = 1px * 0.01;
在 750px 设计稿上: 设计稿上 75px 对应 0.75rem, 距离占设计稿的 10%;
在 ipone6 上: width = document.documentElement.clientWidth = 375px; 1rem = 375px / 7.5 = 50px; 0.75rem = 37.5px; (37.5/375=10%;占屏幕 10%)
在 ipone5 上: width = document.documentElement.clientWidth = 320px; rem = 320px / 7.5 = 42.667px; 0.75rem = 32px; (32/320=10%;占屏幕 10%)
故对于设计稿上任何一个尺寸换成 rem 后,在任何屏下对应的尺寸占屏幕宽度的百分比相 同。故这种布局可以百分比还原设计图
2.1)为什么要除一个数字,原因是:一个页面里,不可能全都是整屏的元素,肯定有 一行中放多个元素。所以就把一行分成 n 份
2.2)不除一个数字的话,那 1 个 rem 就是屏幕的宽度,这个值太大,如果一个元素 的宽度比它小的话,就不方便计算
2.3)这个系数,自己定。多少都可以,但是建议给一个能整除的值(这个能整除的 数, 是还要根据设计稿能整除的数。)
3、对于切的图片,尺寸是根据设计图的尺寸宽度的,显示起来会很大,如果是 Img 标 签, 可以设置宽度为切出的图片尺寸,换算成 rem,如果是 background-img,用 background-size 属性,设置设计图尺寸宽高,换算成 rem 进行图片的缩放适配。 对于上述的第二点,根据设计稿动态转换 rem,这里说一下,前面的计算是动态的设置 html的 font-size 的大小,这是根据设备的独立像素计算的。而设计稿往往是根据物理像素,即 设备像素设计的,往往很大,是 750px 及以上,所以在转换 rem 的时候,转换是根据 psd 设计稿的像素进行转换,即 1rem = 设计稿像素宽度/系数,例如,如果是 1080px 的设计 稿,那么,就用 1rem = 1080/18 = 60px(这里用 18 做系数,是因为能整除),然后布 局的时候就根据设计稿的元素尺寸转换,例如设计稿一个元素的高为 60px,那么就可以转 化为 1rem 了
特点:
1、所有有单位的属性会根据屏幕的尺寸自动计算大小
2、同样一个元素,在不同的设备下的大小是不一样的。在尺寸小的设备下显示的小,在 尺 寸大的设备下显示的大
3、一般以 iphone6 为基准,以它的宽度 750 除上一个系数,再去算 rem Tips:上述步骤 2 中换算可以通过 Hbuilder 将 px 自动转 rem 以及通过 less 自动计算 成 rem,sublime 也可以通过插件进行自动转换
3.1)打开 Hbuilder,顶部栏的工具》选项》Hbuilder》代码助手》px 自动转 rem 设 置 3.2)less 自动转换:Hbuilder 也可以将 less 文件自动转成 css 文件。less 文件的书 写如下所示:
比如想设置宽度为 187px,高度为 100px 的元素,可以通过下面方式计算适配 @rem:25rem; /*这是 1rem = X px 的 X 的值,但是用了 rem 做单位而已*/ div{ width: 187/@rem; height: 100/@rem; }
弹性布局适配(会配合 rem 适配使用 )
兼容情况
IE10 及以上、ios9 及以上、android4.4 及以上版本支持
特点 :
1、默认所有子元素都会在一行中显示,即使给子元素一个很大的宽度
2、父级加了这条属性,子级的 float、vertical-align 就会失效
3、如果兼容低版本的机型要加前缀-webkit-,包括后面讲的所有属性 容器属性(父元素样式) 具体看菜鸟教程或阮一峰的教程,这里说一下一些重点知识
3.1)flex-direction:子元素排列方向(主轴的方向,如果设置了 column,则意味着 主轴旋转了 90 度)
3.2)flex-wrap:换行方式
3.3)flex-flow:以上两种方式的简写 3.4)justify-content:水平对齐方式(子元素在主轴上的对齐方式)
3.5)align-items:垂直对齐方式(子元素在交叉轴上的对齐方式)
3.6)align-content:多行垂直对齐方式(多根轴线的对齐方式)
项目属性(子元素样式)
1、order:排列位置 //如果有两个的值是相等,按书写顺序排列
2、flex-grow:扩展比例
flex-grow 当父级的宽度大于所有子元素宽度之和时,根据父级的剩余空间,设置子元素 的扩展比例(设置后,元素给的固定宽度会被覆盖)它是一个系数默认为 0,即如果存在 剩 余空间也不扩展
剩余空间:剩余空间=父级的宽度-所有子元素的宽度和
注意:如果没有设置初始宽度,也没有内容,则默认为 0,否则为内容的宽度。例如设置 了 文字,会撑开有初始宽度
子元素宽度计算公式:
子元素的宽度=(父级的宽度-所有子元素的宽度和)/所有子元素的 flex-grow 属性值之和*子元 素的 flex-grow 属性值+子元素初始宽度
3、flex-shrink:收缩比例
flex-shrink 当所有子元素宽度之和大于父级宽度的时候,根据超出的空间,设置子元素的 收缩比例(设置后,元素给的固定宽度会被覆盖)它是一个系数默认为 1,如果给个 0 的 话,就不会收缩
超出空间:超出空间=所有子元素的宽度和-父级的宽度
子元素宽度计算公式
1、算出超出空间,所有子元素的宽度和-父级的宽度
2、子元素的初始宽度*子元素的 flex-shrink 值
3、算出第二步所有结果的和
4、每个子元素的第二步/第三步*第一步
5、子元素的初始宽度-第四步
flex-basis:元素的大小
flex:以上三个属性的简写
align-self:单独的垂直对齐方式(交叉轴方向上)
面试题二:
2、important 的作用?
问题解答:
定义及语法
!important,作用是提高指定样式规则的应用优先权(优先级)。语法格式 { cssRule !important },即写在定义的最后面,例如:box{color:red !important;}。 在 CSS 中,通过对某一样式声明! important ,可以更改默认的 CSS 样式优先级规则, 使 该条样式属性声明具有最高优先级
浏览器识别
ie7 及 ie7+,firefox,chrome 等浏览器下,已经可以识别 !important 属性, 但是 IE 6.0IE6 及更早浏览器下仍然不能完全识别。important 的样式属性和覆盖它的样式属性单 独使用时(不在一个{}里),IE 6.0 认为! important 优先级较高,否则当含! important 的样 式属性被同一个{}里的样式覆盖时,IE 6.0 认为! important 较低
面试题三:
3、如何解决 margin“塌陷”?
问题解答:
外边距塌陷共有两种情况:
第一种情况:
两个同级元素,垂直排列,上面的盒子给 margin-bottom 下面的盒子给 margin-top,那么他们两个的间距会重叠,以大的那个计算。解决这种情况 的方法为:两个外边距不同时出现
第二种情况:
两个父子元素,内部的盒子给 margin-top,其父级也会受到影响,同时产生 上边距,父子元素会进行粘连,决绝这种情况的方法为:父级添加一个 css 属性, overflow: hidden,禁止超出 外边距重叠就是 margin-collapse
解决方案:
1、为父盒子设置 border,为外层添加 border 后父子盒子就不是真正意义上的贴合 (可 以设置成透明:border:1px solid transparent)。
2、为父盒子添加 overflow:hidden;
3、为父盒子设定 padding 值;
4、为父盒子添加 position:fixed;
5、为父盒子添加 display:table;
6、利用伪元素给子元素的前面添加一个空元素 .son:before{ content:""; overflow:hidden; }
面试题四:
4、什么是外边距重叠?重叠的结果是什么?
问题解答:
外边距重叠
外边距重叠指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距 的高度等于两个发生合并的外边距的高度中的高度如果都是正边界,边界宽度是相邻边界 宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果 没有正边界,则从零中减去绝对值最大的负边界。只有外边距才可以是负值,内边距不允 许为负值
在 CSS 中,相邻的两个盒子的外边距可以结合成一个单独的外边距,这种合并外边距的方 式被称为折叠,并且因而所结合成的外边距称为折叠外边距
重叠情况
1、两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值
2、两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值
3、两个外边距一正一负时,折叠结果是两者的相加的和
4、外边距不重叠的情况 水平 margin 永远不会重合
设置了 overflow 属性(visible 除外)的元素和它的子元素之间的 margin 不会重叠 设置了绝对定位(position:absolute)的盒模型,垂直 margin 不会被重叠,和子元素之 间也不重叠
设置了 display:inline-block 的元素,垂直 margin 不会重叠,和子元素之间也不重叠 根元素(如 html)与 body 的 margin 不会重叠
5、防止外边距重叠的方法
元素绝对定位 postion:absolute;一般用在内层元素
内层元素 加 float:left;或 display:inline-block;
外层元素用 padding 增加边距
外层元素设置 overflow:hidden;
内层元素透明边框 border:1px solid transparent;
面试题五:
5、HTML5 的 input 增加哪些 type?
问题解答:
在 HTML5 中,为 input 元素新增了以下一些 type 属性值,用来丰富文本框的类型。
color:用于指定颜色的控件 dao
date:用于输入日期的控件(年,月,日,不包括时间)
datetime:基于 UTC 时区的日期时间输入控件(时,分,秒及几分之一秒)
datetime-local:用于输入日期时间控件,不包含时区
email:用于编辑 e-mail 的字段
month:用于输入年月的控件,不带时区
number: 用于输入浮点数的控件
range:用于输入不精确值控件
search:用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除
tel:用于输入电话号码的控件
time:用于输入不含时区的时间控件
url:用于编辑 URL 的字段
week:用于输入一个由星期-年组成的日期,日期不包括时区