css面试题

css面试题

1.html与css

1.1html引入css的方式？

• 行内式
  • 直接在标签内部通过style属性定义样式信息
• 内嵌式
  • 通过head标签中的style标签指定选择器配置样式
• 外链式
  • 将样式放到一个css样式文件中，再通过link标签引入href
• 导入式
  • 将样式放到一个css样式文件中，通过@import引入url

2.盒模型问题

2.1什么是盒模型？

HTML中任何一个元素都可以视为一个盒模型。

每个盒模型由四个区域组成：

• content：主要内容区域
• padding：内边距区域
• border：边框区域
• margin：外边距区域

2.2css中有哪两种盒模型？两种盒模型的区别？

box-sizing：content-box；标准盒模型

box-sizing：border-box；ie盒模型

content-box：标准盒模型设计的宽高是content区域的宽高，再添加padding和border会向外扩张。

border-box：ie盒模型设计的宽高是整个盒子的宽高，添加padding和border会向内缩，整个盒子的大小不会改变。content部分是去掉padding和border区域剩下的区域。

总结：

• 标准盒模型content大小不变，添加padding和border盒子向外扩张
• ie盒模型整体大小不变，添加padding和border向内收缩

2.3计算盒子的高度和宽度？

宽度：content的width+左右的padding+左右border

高度：content的height+上下的padding+上下border

因为margin是盒子的外边距，不属于盒子的真实部分，所以不加margin

3.标签问题

3.1.格式化标签有哪些？

b、strong：粗体

i、em：斜体

u、ins：下划线

s、del：删除线

3.2.b标签和strong标签的使用区别？

从表象上看，两个标签都是加粗，在搜索引擎的优化时，strong系列的标签语气更加强烈，搜索引擎更看重strong系列的标签。

3.3.标签元素类型划分？

标签元素类型分为三种：行内元素、块级元素，行内块儿元素，行内块儿元素称为特殊的行内元素。

• 行内元素：span、a、格式化标签
• 块级元素：div、h1-h6、列表标签、p标签、table
• 行内块元素：img、audio、video、input

3.4.如何区分是行内元素还是块元素？

根据元素的特点划分：

• 多个行内元素共占一行，一个块儿元素独占一行
• 行内元素的宽高按文本内容多少决定与设定的宽高无关，块元素的宽高能够按照图片的宽高来设定。

3.5.有几种隐藏标签元素的方式？

• display：none：不显示

• opactiy：0：透明度0-1，0是全透明

• visibility：hidden：是否可见，hidden就是隐藏

• margin：-999px：margin是判断盒子外边距的，负值就会将它移出页面，就显示不出来了。

• z-index:控制层级

• 宽高为0，只能在空标签中设置

3.6.display：none、opacity：0、visibility：hidden的区别？

display会直接将标签模块移除，而其他的方式只是不显示，但是原位置还存在这个模块

3.7.html5新增表单元素有哪些？

color：选色框

number：数字文本框

search：搜索框

file：文件选择按钮

tel：电话文本框

email：邮件框

date：日期框

range：范围选择框

4.margin与padding

4.1.padding后面跟的属性值个数？

• 1个，表示上下左右都为该数值
• 2个，表示上下为第一个数值，左右为第二个数值
• 3个，表示上为第一个数值，左右为第二个数值，下为第三个数值
• 4个，分别表示上右下左的数值

如果用一个padding设置四个数值，哪个方向不想设置内边距，一定要写上0。

在实际工作中，一定要灵活设置属性，如果四个内边距中，三个都一致，可以先将所有的内边距都设置为这个值，再单独拎出不是这个值得边单独设置。

4.2.对margin属性的了解？

margin主要用来设置盒子的外边距

• margin有几个小属性：top、right、bottom、left
• margin的应用与padding的应用相同也能够用一个margin设置上下左右四个方向的内边距
• margin的上下外边距遵循塌陷原则，就是说如果上下两个盒子都有上下外边距的时候，他们两个之间的距离是较大的外边距的距离，而不是两个外边距相加
• margin的左右外边距符合相加原则两个盒子的距离是两个外边距的相加。
• 有些标签在创建时会有默认的margin和padding值，所以在网页创建之前应该先将这些默认值设置为0
• margin能够设置盒子水平居中，通过margin：0 auto；属性值设置
• 文本居中是使用的text-align：center；属性值设置，两者要区分开

4.3.如何清除标签默认的margin和padding？

通过通配符选择器

*代表选中页面中所有的标签元素，通过将margin属性和padding属性设置为0，就能够去除所有标签自带的外边距和内边距的值。

5.BFC

5.1.什么是BFC？

BFC（Block formatting Context）：块级格式化上下文，是一块独立渲染区域，只有block-level-box的参与，规定了block-level-box如何布局，使这个区域与外部毫不相干。

5.2.BFC的作用？

• 清除margin元素垂直合并
• 清除margin穿透
• 避免父盒子高度塌陷
• 避免浮动元素与普通元素重叠

5.3.什么是块儿盒，什么是行盒？

根据标签属性与display属性值，将盒子分为两大类：

块儿盒：display属性为：block、list-item、table的元素

行盒：display属性为：inline、inline-block、inline-table的元素

5.4.什么是margin穿透与margin合并现象？

margin穿透：子盒子设置margin-top值向下掉是，父盒子也同时跟着下掉

• 原因：在同一个bfc中，父与子之间，子级上下margin会与父级上下margin重叠，以最大值为标准去渲染
• 解决方法：
  • 1、给父盒子加一个上或下边框
  • 2、使父盒子成为bfc
  • 3、给父盒子加padding来代替子盒子加margin。

margin合并：兄弟元素之间：兄弟的上下边距取最大值

• 原因：处于同一个bfc中
• 解决方法：
  • 1.两个盒子之间的距离让一个盒子来决定
  • 2、让其中一个盒子成为bfc。

5.5.bfc的布局规则？

• bfc内部的block-box会在垂直方向，一个接一个放置

• bfc内部bloc-box垂直方向的距离由marin决定，同一个bfc下的相邻盒子之间会产生margin合并

• BFC的区域不会与float box重叠。

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

• 计算BFC的高度时，浮动元素也参与计算。(解决父盒子高度塌陷问题)

5.6.bfc的生成条件？

• 根元素：html本身是bfc
• float的值不是none。
• position的值不是static或者relative。
• display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• overflow的值不是visible

6.绝对路径与相对路径

6.1.绝对路径和相对路径？

1. 绝对路径是以某个点为坐标原点设置的路径，相对路径是以盒子原位置作为坐标原点设置的路径
2. 相对路径会保留原位置，新位置的盒子只是原位置的影子，绝对路径直接删除原本位置，已经脱离了原来的文档流，到更高的一层
3. 绝对定位和相对定位的元素都可以设置宽高，行内元素也可以。
4. 绝对路径会优先选择离自己最近的有相对路径的父盒子作为自己的坐标原点盒子。

7.定位

7.1.如何用绝对路径实现盒子水平垂直居中？

方法一：

1. 父盒子设置相对路径属性position：relative
2. 子盒子设置绝对路径position：absolute
3. 子盒子设置top和left为50%
4. 子盒子设置margin-top和margin-left为负自己的一半

方法二：

• 父盒子设置相对定位position：relative
• 子盒子设置绝对定位position：absolute
• 使用变型属性transform：translate（-50%，-50%）

方法二比方法一更高效，而且方法二在不知道盒子宽高时也可以使用

7.2.position的各种属性值，以及个属性值的特点？

position：

• static：默认值
• relative：相对定位
  • 参照物–自己
  • 不脱离普通文档流，层级比普通文档流高
  • 原位置保留，新位置是原盒子的影子，不影响其他盒子的位置
  • 常用于给绝对定位盒子做参照物
• absolute：绝对定位
  • 参照物–祖先级position属性值为，relative、absolute、fixed的元素
  • 脱离普通文档流，原位置消失
  • 就近原则，选择最近的符合条件祖先级作为参照物
  • 块级元素不设置宽度高度，其宽度由自身内容决定
  • 行内元素写宽高起作用
  • 给绝对定位的元素用百分比设置宽度时，指的是参照物宽度的百分比，不一定是父级的百分比
• fixed：固定定位
  • 参照物，body，常用于侧边导航栏

8.img向下多撑像素

img是行内块元素，如果他没有设置高度，他就会在自己高度的基础上多撑几像素的距离。

解决办法：把img转换成块儿元素，display：block；或者font-size：0px；

9.选择器

9.1.各种选择器的使用方式？

• 通配符选择器：*
• 标签选择器：直接标签名
• 类选择器：.加类名
• 属性选择器：[属性名]
• id选择器：#加id名
• 子选择器：父标签名>子标签名
• 后代选择器：父标签名 子标签名
• 相邻兄弟选择器：+
• 通用兄弟选择器：~
• 并集选择器：，
• 交集选择器：选择器紧紧相连，没有连接符
• 伪类选择器：标签名：伪类

9.2.各选择器的权重？

• 通配符选择器：0
• 标签选择器：1
• 类选择器：10
• 属性选择器：10
• id选择器：100
• 子选择器：选择器权重之和
• 后代选择器：选择器权重之和
• 相邻兄弟选择器：选择器权重之和
• 通用兄弟选择器：选择器权重之和
• 并集选择器：用逗号分割，计算两个逗号之间的权重之和
• 交集选择器：选择器权重之和
• 伪类选择器：标签权重

10.语义化标签

10.1.html5新增语义化标签有哪些？

header：顶部

footer：底部

section：块区

aritical：文章

aside：侧边栏

nav：导航栏

main：主区域

figure：配图

figcaption：配图描述，在figure中使用

thead：表格头部

tbody：表格体

tfoot：表格底部

10.2.thead、tbody、tfoot的好处？

thead、tbody、tfoot是表格的语义化，使用这三个定义表格后，即使thead在tfoot下面，浏览器还是会指定thead做表格的头部。他们三个渲染的顺序不会因为编码的顺序打乱而混乱。使用tr则会混乱。

11.边框做三角形

11.1.如何用边框做三角形？

1. 将边框设置一个较大的宽度。

2. 使盒子的宽高均为0。

3. 使用transparent设置透明色，注意需要将之前设置的颜色删除，让透明色替代。

4. 用border-方向-color：显示一方的边框。这样三角形就做出来了

12.css三大特性

12.1.什么是css三大特性，请分别说明？

• 继承性

  • 当父元素设置了某些属性，其后代元素会自动继承这些属性
  • 会继承的属性有：color、font-、text-、line-、list-开头的。

• 层叠性

  • 对同一个元素，同一个属性设置了不同的值，解决这种冲突的能力叫做层叠性
  • 首先会看权重
    • 权重相同，判断选择器的先后顺序，后边的会覆盖前边的同属性设置
    • 权重不同，谁的权重大听谁的。

• 优先级

  • ！important>行内样式>id>类>标签>通配符>继承>浏览器默认
  • ！important：强制使用此样式
  • ！important和行内样式不经常使用。
  • 内嵌式与外链式同级，看执行顺序

13.浏览器兼容

13.1.浏览器私有前缀？

不同浏览器有不同的私有前缀，用于对实验性的css加以标识。好处一些低版本的浏览器也能识别这些属性。

常见的不同版本浏览器的前缀：

chrome：-webkit-

firefox:-moz-

ie、edge：-ms-

欧朋：-o-

13.2.音频的不同文件格式都兼容哪些浏览器内核？

浏览器：Chorme，Firefox，IE9，Opera，Safari

oGG:Safari不支持

MP3：FireFox，Opera不支持

WAV：Chorme、IE9、Safari不支持

13.3.如何解决audio的兼容性问题？

• 在设计pc端页面时，一个音频需要准备三种格式，使用audio标签，在audio标签中插入多source引入三种格式，当浏览器在准备音频内容时，会由上到下找到第一种兼容的格式来加载。

• 在设计手机端页面时，手机端使用的都是Chorme标准，所以只要用兼容Chorme浏览器的音频格式即可，mp3和OGG

13.4.什么是视口？视口的作用？

视口就是用来适配屏幕大小，在pc端设计的页面是根据电脑网页大小设计的，而手机端的屏幕没有那么大，就会出现问题：

• 如果不设置视口代码，系统会默认认为手机端body页面的宽度为980px，平板端body的宽度为1024px，但事实上他们并没有那么宽，这时，页面中的内容就会等比例缩小，但是这个缩小是错误的。

所以，添加视口标签，通过在content中设置width=device-width，能够实现body的宽度等于设备真实宽度，使里面的内容不会缩小。

视口还可以：

• 设置初始化缩放比例：initial-scale：1.0

• 最大缩放比例：maximum-scale：1.5

• 最小缩放比例：minimum-scale: 0.8

• 禁止用户缩放网页：user-scalable：no

13.5.什么是rem？

html是根元素。

rem：font size of the root element：根元素字体大小，rem就是一个描述大小的计量单位，与px相同，它的大小就是根元素字体大小。

14.基线对齐问题

14.1.vertical-align出现的两个盒子不对齐的情况？

首先我们要了解。vertical-align：垂直对齐，是用来定义两个盒子中以什么做为对齐的目标，默认的属性值为baseline，基准线。

问题：当两个盒子设置了inline-block水平显示时，一个盒子中有文字，一个盒子中没有文字，出现了有文字盒子下移的问题。

原因：默认的属性值为baseline，baseinline是以文字小写a的底部作为基准线，而当盒子中没有文字来对比基准线时，就会选择盒子底部作为基准线，这时候，有文字的盒子向没有文字的盒子对齐，会去找第二个盒子的基准线，而他的基准线正好是底部，所以就会让文字底部与盒子底部对齐。

解决：

• 修改vertical-align的默认属性值，不以基准线为对齐方式。
• 设置overflow：visible属性值。

15.float

15.1.浮动会产生的问题?

• 浮动的元素会脱离文档流
• 浮动元素的父级会产生高度塌陷

15.2.浮动元素的特点？

• 浮动元素脱离文档流
• 同级元素一浮全浮
• 浮动的块级元素如果不设置宽度，他的宽度则是自己内容的宽度
• 浮动的行内元素可以设置宽高
• 给图片设置浮动能实现文字环绕图片
• 浮动元素的父级如果没有设置高度会发生高度塌陷

15.3.如何解决浮动产生的父级高度塌陷问题？

• 给父级加高度
• 给父级添加overflow：hidden；属性
• 给浮动元素父级盒子的末尾添加子元素，为子元素设置clear：both；属性

 .clearfix:after{
            content: ""; //伪元素中必须有content
            font-size: 0; //字体大小为0目的是不显示
     		height: 0;//高度为0，隐藏
            display: block;//设置为块元素，实现换行
            visibility: hidden;//可见度，设为隐藏，能避免很多空行的BUG
            clear: both; //清除浮动的重点属性
        }
.clearfix{
    *zoom:1;   //这是针对于IE6的，因为IE6不支持:after伪类，这个设置可以让IE6的元素可以清除浮动来包裹内部元素
}

15.4.让两个块级元素在一行显示的办法？

方式一：将两个元素转为行内块，但是这样连个之间会存在空格的分析，解决方法

• 这是由于html编码时换行造成的，消除两个块编码之间的缝隙
• 空格也是文字，将父盒子的font-size设置为0，空格缝隙也就消失了

方式二：设置float:left属性

16.background

16.1.background有哪些小属性？聊聊它的属性值作用？

• background-color：背景颜色
• background-size：背景大小，可以是px值，百分比，cover，contain
• background-repeat：背景重复，
• background-clip：背景裁剪
• background-origin：背景起源
• background-attachement：背景固定
• background-position：背景定位

16.2.如何实现渐变背景？

渐变背景需要在background-img中，使用linear-gradient实现线性渐变，还可以使用radial-gradient实现放射性渐变

16.3.如何使用background-position属性实现css精灵？

css精灵就是将许多小图标放到同一个图片中，这样就减少了页面加载时的http访问次数，通过background-position属性定位到某一个图标位置，从而实现图标的截取，需要注意的是，background-position属性的x偏移，y偏移是相对于图片来说的，所以我们想获取，就需要定义xy轴上的负值来获取。

16.4.background的复合写法？

background：背景颜色+背景图片+repeat+背景定位。

16.5渐变的书写规范?

• 线性渐变：linear-gradient
  • toright，red，blue：第一个值是方向，从哪到哪，二三个值是从哪个颜色到那个颜色
  • 45deg,red,blue:下顺时针转45度。
  • toright，red，yellow 20%，blue ，从宽度20%处用yellow。

17.变型

17.1.2D变型有哪些？3D变型有哪些？每种变形的参数是什么？正方向是什么？

2D：transform

• rotate：（45deg）:2d旋转沿图片中心旋转

-translate：100px 200px;向右移动100px，向下移动200px

-origion：0 0；以左上角作为原点进行旋转，不设置就是中心点

-scale：2；放大到原来的2倍。如果小于1就是缩小，大于1就是放大

-skew：斜切;

3D:transform

• rotateX （45deg）:沿盒子中间X轴旋转
• rotateY：沿盒子中间Y轴旋转
• rotateZ：沿盒子中间Z轴旋转，与rotate相同

注意：当图片旋转后，它的xyZ方向也会跟着旋转

• translateX（100px）：沿盒子中间X轴移动
• translateY：沿盒子中间Y轴移动
• translateZ：沿盒子中间Z轴移动

perspective：父盒子添加的属性，就是表示透视的强度，人眼到透视平面的距离。

18.过渡

18.1.过渡属性是什么？他有哪些小属性？他有哪些属性值？

过渡属性：transition

属性值四要素：要变换的属性+变换时间+变换速度+延迟时间

四个符合属性值：property+duration+timing-function+delay

小属性：

-property：要变换的属性

-duration：变换的时间

-timing-function：变换速度

-delay：延迟时间

18.2.哪些属性可以使用过渡属性进行过度？

• 所有数值类型的属性都可以过渡

• 背景颜色和文字颜色可以过渡

• 所有变形（2D,3D）都可以过渡

18.3.过渡缓动效果有哪几种？

transition-timing-function：

• linear：线性，匀速
• ease：两头慢，中间快
• ease-in：开始慢，越来越快
• ease-out：开始快，越来越慢
• ease-in-out：两头慢，中间快，比ease平缓

19.动画

3.如何定义和调用动画？如果想无限调用动画，应该怎么做？

• 使用@keyframes选择器，在选择器里面使用from选择器定义起始状态，使用to选择器定义结束状态。
• 调用：使用animation：选择器调用定义的选择器：定义选择器名+动画时间+动画速率+延迟时间+infinited+alternate+forwards
• 使用infinited：定义无限过渡。
• 使用alternate：定义过渡为头尾交替开始。
• 使用forwards：定义动画停止在结尾状态，不需要恢复原状态

20.flex

20.1.flex的的作用？

flex：弹性的意思，用来将元素转为弹性盒子，它有一下特点

• 弹性盒子被称为容器，容器中的子元素被称为项目
• 设为弹性盒子的容器的子元素，它的float、vertical-align、clear属性都失效
• 弹性盒子中存在主轴和侧轴，默认主轴是x轴，其子元素默认沿主轴排列

20.2.flex及与其相关的属性？

display：flex/inline-flex：元素转弹性盒子

与容器相关的属性有flex-*、justify-content、align-items

flex:

• -direction:主轴方向
• -warp：是否换行
• -flow：上边两个的复合属性

justify-content：主轴方向

• flex-start：主轴起点对齐
• center：主轴中间对齐
• flex-end：主轴结尾对齐
• space-between：项目之间均分空隙
• space-around：项目左右均分空隙
• space-evenly：项目与项目之间、容器边缘与项目之间均分空隙

align-items：单行项目在侧轴方向上的操作

• flex-start：单行与侧轴起点对齐
• center：单行与侧轴中间对齐
• flex-end：单行与侧轴终点对齐
• sterch：项目填充满侧轴长度

align-content：多行项目在侧轴方向的操作，前提是必须有flex-warp：warp属性

• flex-start：多行项目与侧轴起点对齐
• center:多行项目与侧轴中间对齐
• flex-end:多行项目与侧轴终点对齐
• space-between：行与行之间均分空隙
• space-around：行上下外边距均分空隙
• space-evenly：行与行之间，行与容器边缘之间，均分缝隙

与项目有关的属性有：order、flex-gorw、flex-shrik、flex-basis、flex

• order：次序，默认为0，按order从小到大排序
• flex-grow:1；放大，放大空余的空间平均分后的1份
• flex-shrink：缩小，1就是项目总长超出盒子长后按比例缩小，0就是超出后就溢出，不缩小项目
• flex-basis：设置项目在主轴占大小，功能与height和width相同
• **flex：**最重要的，设置平均分容器主轴的长度，1就代表占容器平均分后的1份，2就带表占平均分后的2分。

21.文本溢出显示…

21.1.单行文字超出显示…怎么做？

溢出隐藏:overflow：hidden;

文字隐藏的方式…:text-overflow:ellipisis;

不让换行：white-space:nowarp;

21.2.多行文字超出显示…怎么做？

        div{
            width: 50px;
            border: 1px solid red;
            overflow: hidden;
            /* 溢出部分用...显示 */
            text-overflow: ellipsis;
            /* 老版本的flex */
            display: -webkit-box;
            /* 控制截止到哪一行显示。。。 */
            -webkit-line-clamp: 5;
            /* 控制主轴方向是垂直的 */
            -webkit-box-orient: vertical;
        }

21.3.禁止用户选中文字怎么做？

        body {
            user-select: none;
        }

21.4.单词间距如何设置？

• letter-spacing：10px；字符与字符之间的距离
• word-spacing： 10px; 单词与单词之间的距离，以空格为准
  • 如果是中文想让汉字与汉字之间有距离，需要在汉字之间加空格

22.圣杯与双飞翼布局

22.1.圣杯布局如何实现？

• 三个兄弟盒子，main,left，right,left、right宽度固定,main宽度随着屏幕宽度变化
• 把main放到最上面，为的是优先加载
• 给body加padding，左右空出一定的固定内边距
• 三个盒子全左浮动
• 给left设margin-left：-100%；相对定位，再向左移固定宽度像素
• 给right设margin-left:-固定宽度;相对定位，再向右移固定宽度像素

22.2.双飞翼布局如何实现？

• 三个兄弟盒子，main有一个子盒子inner,left，right。main、left、right宽度固定，inner随着宽度变化而变化
• 把main放到最上面，为的是优先加载
• 给main加padding，左右空出一定的固定内边距
• 三个盒子全左浮动
• 给left设margin-left：-100%；
• 给right设margin-left:-固定宽度;