总结CSS面试题目的考察点及常见布局问题整理

时间:2022-09-23 16:43:07

整理网上流传的若干份面试题目,突发奇想,总结关于CSS面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考。

写这个博文内心有种莫名奇妙的自我谴责感,实在不应该把面试层叠样式“应试”复习。牛逼的你,也许会说:万变不离其中,把css掌握了,哪里需要担心会考什么。呵呵!

1,  多元素水平居中

实现一下效果:

总结CSS面试题目的考察点及常见布局问题整理

平常人看见题目,最初感觉实现图片中的效果不难,设置小黑框的宽高边距,字体水平垂直居中即可。其实,题目应该实际上是考察多元素水平居中,即无论元素(小黑框)基数为多少,它们都能作为一个整体,水平居中。

在网站布局中,很多时候,子元素中使用行内元素如 span或块元素li标签且标签个数不定,而我们又想让这一块不管个数有多少个(子元素的总体宽度不定),始终都能居中显示。这就需要设置子元素 display:inline-block。同时,根据display:inline-block的属性,子元素本身具备inline的特性,因此父元素 需要设置text-align:center,来实现子元素作为一个整体在父元素中水平居中。

 

main{  text-align:center;} 
div{  display:inline-block;  *display:inline;/*hank IE*/  *zoom:1;/*hank IE*/}   

使用display:inline-block属性,可以使行内元素或块元素能够不加float属性就可以定义自身的宽、高,同时又能使该元素在父元素居中显示。

在内联元素上定义display:inline-block属性,发现IE6、IE7中的显示效果同其它浏览器一致,但事实是ie7及更低版本的ie浏览器不支持display:inline-block这个属性。

在IE下,display: inline-block只是触发了元素的layout。比如将display: inline-block设置到div上,只能保证这个div拥有块元素的特征(可以设置宽度,高度等),但还是会产生换行。接下来要设置 display: inline,使其不产生换行。将display:inline-block;*display:inline;写在同一个样式上,inline- block属性是不会触发元素的layout的,因此我们还要额外加上 *zoom:1来触发layout。

除了以上所提到的有效方法之外,还有另外一种方法

先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,让块元素呈递为内联对象(两个display 要先后放在两个 CSS 样式声明中才有效果,这是 IE 的一个经典 bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失)。

div {display:inline-block;...}div {*display:inline;}

但是要注意的是,display:inline-block元素间会产生多余空白(本题没有涉及)。解决方法:父元素定义font-size:0 去掉行内块元素水平方向空白;子元素定义vertical-align 属性去掉行内块元素垂直方向空白。

http://codepen.io/floralam/pen/XJwWZJ?editors=110

2,  栏栅化布局

实现一下布局:

总结CSS面试题目的考察点及常见布局问题整理

http://codepen.io/floralam/pen/OPYyEE

 

.parent{ 
    display: flex; 
    flex-direction: column;//上面两行等同于flex-flow:colomn 
    flex-wrap: wrap;// 显示 wrap一行显示不完的时候换行 
    height: 440px; 
    width: 660px; 
}   

一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。

伸缩方向与换行(flex-flow)

伸缩容器有一个CSS属性“flex-flow”用来决定伸缩项目的布局方式。

如果伸缩容器设置了“flex-flow”值为“row”,伸缩项目排列由左向右排列。

总结CSS面试题目的考察点及常见布局问题整理

如果“flex-flow”值设置为“column”,伸缩项目排列由上至下排列。

总结CSS面试题目的考察点及常见布局问题整理

制作一个20%、60%、20%网格布局

  1. .main-content {
  2. width: 60%;
  3. }
  4. .main-nav,.main-sidebar {
  5. -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  6. -moz-box-flex: 1;         /* OLD - Firefox 19- */
  7. width: 20%;               /* For old syntax, otherwise collapses. */
  8. -webkit-flex: 1;          /* Chrome */
  9. -ms-flex: 1;              /* IE 10 */
  10. flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  11. }

3,  未知高度多行文本垂直居中

http://codepen.io/floralam/pen/WbBrwV?editors=110

总结CSS面试题目的考察点及常见布局问题整理

 

.container{ 
   position: fixed; 
    left: 0; 
    top:0; 
    height: 100%; 
    width: 100%; 
    text-align: center; 

 
.mask:after{ 
    content: " "; display: inline-block; vertical-align: middle; height: 100% } .dialog{ display: inline-block; border: 3px solid lightblue; 
}   

box 容器通过 after或者before 生成一个高度 100% 的「备胎」,他的高度和容器的高度是一致的,相对于「备胎」垂直居中,在视觉上表现出来也就是相对于容器垂直居中了

4,  多栏自适应布局

对于移动设备浏览器:http://codepen.io/floralam/pen/NPVwgz?editors=110

 

.container{ 
  display:-webkit-box; 

 
.left{ 
  -webkit-box-flex:1; 

 
.right{ 
  -webkit-box-flex:1; 
}   

实现左右两侧元素,右侧元素的文字不会溢出到左侧位置。

总结CSS面试题目的考察点及常见布局问题整理

1)让左边的图片左浮动或者绝对定位,

http://codepen.io/floralam/pen/wBbPPj

  1. .right{
  2. margin-left: 150px;
  3. }

2)让左边的图片左浮动或者绝对定位,

http://codepen.io/floralam/pen/gbJogQ

.right{

overflow:hidden;/*让右侧文字和左侧图片自动分栏*/

}

3)左侧图片设置为左浮动,

http://codepen.io/floralam/pen/bNyaaX?editors=110

.right{

display: table-cell;/*让右侧文字和左侧图片自动分栏*/

}

两栏或多栏自适应布局的通用类语句是(block水平标签,需配合浮动):

http://codepen.io/floralam/pen/vEwpjV

  1. .cell{
  2. padding-right:10px;
  3. display: table-cell;
  4. *display: inline-block;
  5. *width: auto;
  6. }

总结CSS面试题目的考察点及常见布局问题整理

5,  强制不换行

div{
    white-space:nowrap;
}

自动换行

div{
word-wrap: break-word; //性允许长单词或 URL 地址换行到下一行
word-break: normal; //让浏览器实现在任意位置的换行
}

word-wrap是控制换行的。break-word是控制是否断词的。

强制英文单词断行

div{

word-break:break-all;

}

6,  li超过一定长度,以省略号显示

http://codepen.io/floralam/pen/zxQjrK

  1. .nowrap li{
  2. white-space:nowrap;
  3. width:100px;
  4. overflow:hidden;
  5. text-overflow: ellipsis;
  6. }

7,  左侧导航

http://codepen.io/floralam/pen/ogrbXW?editors=110

总结CSS面试题目的考察点及常见布局问题整理

 

.nav{ 
position:relative; 
float:left;width:190px; 
margin-right:-190px; 
background:lightblue; 

.container{ 
float:right; 
width:100%; 
background:pink; 

.content{ 
margin-left:200px; 
}   

8,  css3文字分栏

http://codepen.io/floralam/pen/ZYdOmN?editors=110

9,  修复侧边栏

在外容器的添加导航和主内容,当导航和主内容的宽度加上内外边距的数值大于外容器的宽度减去内边距的值,会导致导航和主内容(其中一个,html代码排后面的元素)被挤下。

总结CSS面试题目的考察点及常见布局问题整理

http://codepen.io/floralam/pen/XJLRYq?editors=110

解决方案:

1)      Section元素上使用box-sizing:border-box;模拟IE6中,使得内元素的宽度为width的值,而非width加上padding和margin的值。

2)      width:-moz-calc(75% -1rem * 2);width:-webkit-calc(75% - 1rem * 2); width: calc(75% - 1rem * 2); width属性中减去padding值

3)      http://codepen.io/floralam/pen/yydPOE

在元素内部增加一个额外的容器,并将padding放在这个新增的内部容器中,这是一种修复方法,而且得到众多浏览器支持。

10, css描绘三角形

http://codepen.io/floralam/pen/azgGmZ

很多关于使用css3来描绘特定图像,使用代码而非图片实现(多座小山包,返回顶部)的题目,都离不开描绘三角形。

11, 清除浮动的技巧

总结CSS面试题目的考察点及常见布局问题整理

在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。

1)      添加最后一个元素<div style ="clear:both"></div>

2)      父元素设置overflow: hidden;

3)      使用CSS的:after伪元素

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点".",并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。

http://codepen.io/floralam/pen/xboPXK?editors=110

总结CSS面试题目的考察点及常见布局问题整理的更多相关文章

  1. CSS常见布局问题整理

    实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...

  2. CSS两列及三列自适应布局方法整理

    布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 ...

  3. http协议详解及htt面试题目,常见的http状态码

    http协议详解及htt面试题目,常见的http状态码 HTTP报文是面向文本的,报文中的每一个字段都是一些ASCII码串,各个字段的长度是不确定的.HTTP有两类报文:请求报文和响应报文. HTTP ...

  4. BAT网络运维常见面试题目总结

    BAT常见面试题目总结 Author:Danbo 2015-7-11 TCP/IP详解鸟哥Linux的书网络安全ping的原理make的过程文件有哪些类型各种Linux发行版的区别.有关suid的作用 ...

  5. java常见面试题目(一)

    在大四实习阶段,秋招的时候,面试了很多家公司,总结常见的java面试题目:(答案可以自己百度) 1.你所用oracle的版本号是多少? 2.tomcat修改8080端口号的配置文件是哪个? 3.myb ...

  6. 2017最全的php面试题目及答案总结

    最近在网上看到很多的小伙伴们都在询问如何应对php面试,这个对于有工作经验和实战项目的小伙伴来说是没什么问题的,但是对于刚刚学习完php的小伙伴们.php面试却是一个很重要的一步,那么今天php中文网 ...

  7. 全网最全C&num;实习面试题目

    整个内容是我在春招面试时候整理的一些题目,里面涵盖有网上搬运的(由于当时没有记录来源,如果有转载没标注来源,请与我联系),还有我面试到的.整个排版很乱,后期我会一步一步整理.整个内容大概快有两万字.整 ...

  8. PHP面试题目搜集

    搜集这些题目是想在学习PHP方面知识有更感性的认识,单纯看书的话会很容易看后就忘记. 曾经看过数据结构.设计模式.HTTP等方面的书籍,但是基本看完后就是看完了,没有然后了,随着时间的推移,也就渐渐忘 ...

  9. 2016年Web前端面试题目汇总

    转载: 2016年Web前端面试题目汇总 以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中未解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢 ...

随机推荐

  1. Hadoop2&period;2编程:新旧API的区别

    Hadoop最新版本的MapReduce Release 0.20.0的API包括了一个全新的Mapreduce JAVA API,有时候也称为上下文对象. 新的API类型上不兼容以前的API,所以, ...

  2. php配置虚拟主机的配置步骤(hosts、httpd&period;conf、vhosts&period;conf)1&period;配置本地的dns文件2&period;配置apache的主配置文件3&period;配置Apache的虚拟主机

    1.域名解析(DNS) 找到C:\Windows\System32\drivers\etc目录下的hosts文件,在里面进行添加对应的内容

  3. Jenkins 七: 部署到Tomcat

    在build.xml定义了打包target之后,我们可以将打包生成的war文件直接部署到tomcat. 1. 建立Tomcat用户. 打开Tomcat安装路径下的 conf/tomcat-users. ...

  4. layer ifram 弹出框

    父层 <div class="col-xs-4 text-left" style="padding-left: 50px;"><button ...

  5. ES6 扩展运算符 三个点(&period;&period;&period;)

    它是什么 es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形.因为typeScript是es6的超集,所以typeScrip ...

  6. 带有ZLIB&lowbar;LIBRARY&lowbar;DEBUG的FindZLIB&period;cmake文件

    CMake自带的FindZLIB.cmake只有ZLIB_LIBRARY,而没有ZLIB_LIBRARY_DEBUG 将下面的代码保存成FindZLIB.cmake,替换掉D:\Program Fil ...

  7. HBase数据存取流程

    一.HBase的特点是什么 1.HBase一个分布式的基于列式存储或者行式存储的数据库,基于hadoop的hdfs存储,zookeeper进行管理. 2.HBase适合存储半结构化或非结构化数据,对于 ...

  8. Linux下Qt安装

    1.下载qt-everywhere-opensource-src4.7.2.tar.gz(http://download.qt.io/archive/qt/4.7),并解压在/opt目录下,文件名为q ...

  9. Oracle rac架构和原理

        Oracle RAC Oracle Real Application Cluster (RAC,实时应用集群)用来在集群环境下实现多机共享数据库,以保证应用的高可用性:同时可以自动实现并行处理 ...

  10. input type&equals;number 禁止输入字符&OpenCurlyDoubleQuote;e”的办法

    输入框input,的type设置为number,本想只输入数字,但是字符“e”却能通过, 首先科普一下, <body> <input onkeypress="getCode ...