css面试题

目录

面试题

1、简述弹性盒子 flex 布局及 rem 布局?

2、important 的作用?

3、如何解决 margin“塌陷”?

4、什么是外边距重叠?重叠的结果是什么?

5、HTML5 的 input 增加哪些 type?

面试题

面试题一:

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:用于输入一个由星期-年组成的日期,日期不包括时区

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

面相进程,面相对象

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值