前端开发实习面试题（CSS篇）

目录

1.CSS3有哪些新特性？

2.介绍一下盒子模型（由什么组成）？

3.定位有哪些值，分别是相对谁定位？

4.如果我想给table表格的第一列内容添加样式，如何做？

5.浮动的作用，如何清除浮动？

---

1.CSS3有哪些新特性？

• 新增各种css选择器
• 圆角 border-radius
• 多列布局
• 阴影和反射
• 文字特效text-shadow
• 线性渐变
• 旋转transform

CSS3新增伪类有那些？

• p:first-of-type 选择属于其父元素的首个<p>元素的每个<p> 元素。
• p:last-of-type 选择属于其父元素的最后 <p> 元素的每个<p> 元素。
• p:only-of-type 选择属于其父元素唯一的 <p>元素的每个 <p> 元素。
• p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
• p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
• :after 在元素之前添加内容,也可以用来做清除浮动。
• :before 在元素之后添加内容。
• :enabled 已启用的表单元素。
• :disabled 已禁用的表单元素。
• :checked 单选框或复选框被选中。

2.介绍一下盒子模型（由什么组成）？

盒子模型（Box Modle）可以用来对元素进行布局，由实际内容（content）、内边距（padding）、边框（border）与外边距（margin）这几个部分组成。

内容区（content）

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，width、height 和overflow。

使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。

当overflow 属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。

填充（padding）

填充是内容区和边框之间的空间。填充的属性有五种 ，即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。

使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时，可使背景色延伸到填充区域。

边框（border）

边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。

border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了dotted（点线）、dashed（虚线）、solid(实线)等九种边框样式。

使用border-width属性可以指定边框的宽度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick。

使用border-color属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS 规定的17个颜色名 。

在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。

设置盒子背景色属性时，在IE中背景不会延伸到边框区域，但在FF等标准浏览器中，背景颜色可以延伸到边框区域，特别是单边框设置为点线或虚线时能看到效果。

空白边（margin）

空白边位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。

空白边的属性有五种 ，即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin，其具体的设置和使用与填充属性类似。

对于两个相邻的（水平或垂直方向 ）且设置有空白边值的盒子，他们邻近部分的空白边将不是二者空白边的相加，而是二者的并集。

若二者邻近的空白边值大小不等，则取二者中较大的值。

同时，CSS 容许给空白边属性指定负数值，当指定负空白边值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。

采用指定空白边正负值的方法可以移动网页中的元素，这是CSS 布局技术中的一个重要方法。

3.定位有哪些值，分别是相对谁定位？

static（默认）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky

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

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。

fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。

sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

4.如果我想给table表格的第一列内容添加样式，如何做？

使用子代选择器

5.浮动的作用，如何清除浮动？

文档流：在浮动中有一个文档流的概念，也称标准流————元素在排列的时候有默认开始位置以及他们所占的区域。

浮动：使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来。

浮动的目的：为了达到自己的布局目的，让指定元素定位在指定位置，并且可以设置浮动后的行级元素的宽高，我们就需要用到浮动。

为什么要清除浮动：如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。

清除浮动的四种方法：

方式一:使用overflow属性来清除浮动

　　　　.ovh{

　　　　　　overflow:hidden;

　　　　}

先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响。

注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）。

方式二:使用额外标签法

　　　　.clear{

　　　　　　clear:both;

　　　　}

在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.

• a.内部标签：会将这个浮动盒子的父盒子高度重新撑开
• b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子

注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱。

方法三:使用伪元素来清除浮动(after意思:后来,以后)

　　　　.clearfix:after{

　　　　　　content:"";//设置内容为空

　　　　　　height:0;//高度为0

　　　　　　line-height:0;//行高为0

　　　　　　display:block;//将文本转为块级元素

　　　　　　visibility:hidden;//将元素隐藏

　　　　　　clear:both//清除浮动

　　　　}

　　　　.clearfix{

　　　　　　zoom:1;为了兼容IE

　　　　}

方法四:使用双伪元素清除浮动

　　　　.clearfix:before,.clearfix:after {

                  content: "";

                  display: block;

                  clear: both;

              }

            .clearfix {

                  zoom: 1;

            }

总结:第一种方法会将超出部分隐藏在某些时候我们想清除浮动并且保留超出部分时做不到,第二种方法会增加许多不必要的标签,

所以我们尽量使用第三种方法来清除浮动,为什么不选择第四种方法呢?因为第四种是第三种的改良版虽然比较简便,但是不严谨！

以上皆是本人目前在广州找实习期间亲身经历过的面试题中的CSS问题，部分答案源于网上，如有错漏或有更好的答案也欢迎大家指出，仅作为笔记收录使用，也衷心希望各位能少走弯路，能够找到自己心仪的工作！

前端开发交流QQ群：761614159

求职前端开发的小伙伴可以进群交流一下！