CSS 15道面试题
1、CSS盒模型
所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。
对不同部分的说明：
内容区（content）：它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型；
内边距（padding）：内边距是内容区和边框之间的空间；
边框（border）：边框是环绕内容区和填充的边界；
外边距（margin）：外边距位于盒子的最外围，是添加在边框外周围的空间。
2、什么是z-index？
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：z-index 仅能在定位元素上奏效！
可能到值：
auto——默认。堆叠顺序与父元素相等。
number——设置元素的堆叠顺序。
inherit——规定应该从父元素继承 z-index 属性的值。
3、什么是CSS Sprite（“精灵图”）
CSS Sprites叫 CSS精灵或者雪碧图，是一种网页图片应用处理方式。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中。
再利用CSS的"background-image"，“background-repeat”，"background-position"的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
4、使用CSS Sprites的好处
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
5、CSS中的伪元素是什么？
CSS伪元素是添加到选择器的关键字，可用于设置所选元素的特定部分的样式。
“first-line” 伪元素用于向文本的首行设置特殊样式，只能用于块级元素！下面的属性可应用于 “first-line” 伪元素：font，color，background，word-space，letter-space，text-decoration，text-transform，line-height，clear。
“first-letter” 伪元素用于向文本的首字母设置特殊样式，只能用于块级元素！下面的属性可应用于 “first-letter” 伪元素：font，color，background，margin，padding，border，text-decoration，line-height，clear，text-transform。
6. CSS有哪些单位?
CSS 有两种类型的长度单位：相对和绝对。设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。
相对长度
| 单位 | 描述 |
| em | 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； |
| rem | 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。 |
| vh | viewpoint height，视窗高度，1vh=视窗高度的1% |
| vw | viewpoint width，视窗宽度，1vw=视窗宽度的1% |
| vmin | vw和vh中较小的那个。 |
| vmax | vw和vh中较大的那个。 |
| % | 相对父元素 |
*提示: rem与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
绝对长度
| 单位 | 描述 |
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸 (1in = 96px = 2.54cm) |
| px | 像素 (1px = 1/96th of 1in) |
| pt | point，大约1/72英寸；(1pt = 1/72in) |
7、如何控制插入的图片不重复?
Background-repeat:none
8、 overflow属性在CSS中被用于什么？
overflow 属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
可能的值：
overflow: auto;如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow: hidden;内容会被修剪，并且其余内容是不可见的。
overflow: scroll;内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow: visible;默认值。内容不会被修剪，会呈现在元素框之外。
9 什么是响应式网页设计？
响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。
10.{visibility：hidden}和{display：none}有什么区别？
display:none 表示标签根本不会出现在页面上（尽管您仍然可以通过DOM与之交互）。与其他标签之间将没有分配空间。
visibility:hidden 表示该标签不可见，但在页面上为其分配了空间。标签已呈现，只是在页面上看不到。
11.CSS的特异性是什么意思？
如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。
将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。
每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：
1、行内样式 - 行内（内联）样式直接附加到要设置样式的元素。
2、ID - ID 是页面元素的唯一标识符，例如 #navbar。
3、类、属性和伪类 - 此类别包括 .classes、[attributes] 和伪类，例如：:hover、:focus 等。
4、元素和伪元素 - 此类别包括元素名称和伪元素，比如 h1、div、:before 和 :after。
12、CSS如何实现元素的定位？
position属性指定用于元素的定位方法的类型。
有五个不同的位置值：
position: fixed;
position: static;
position: absolute;
position: sticky;
position: relative;
然后使用top，bottom，left和right属性定位元素。但是，除非首先设置position属性，否则这些属性将不起作用。根据位置值，它们的工作方式也不同。
13、相对，固定，绝对、默认和粘性定位的元素有什么区别？
定位元素是计算的位置属性是relative, fixed, absolute and static。
静态static
默认位置；默认为0。元素将像往常一样流入页面。top，right，bottom，left和z-index属性不适用。
相对relative
元素的位置相对于自身进行了调整，而没有更改布局（因此，如果没有放置元素，将为元素留出一定的空隙）。
绝对absolute
元素从页面流中删除，并且相对于其最接近的祖先（如果有）或相对于初始包含块而定位在指定的位置。绝对定位的盒子可以有边距，并且不会与其他任何边距一起折叠。这些元素不会影响其他元素的位置。
固定 fixed
将元素从页面流中移除，并将其放置在相对于视口的指定位置，并且在滚动时不会移动。
粘性sticky
粘性定位是相对定位和固定定位的混合。将该元素视为相对位置，直到它超过指定的阈值为止，此时将其视为固定位置。
14、CSS中使用ID和Class的区别？
1）ID：ID属性的操作类似于CLASS属性，但有一点重要的不同之处：ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。ID选择器的标志符是散列符号（#）
2） Class：CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。类选择器以标志符（句点）开头。
15、什么是弹性布局？
flexbox布局正式称为CSS flexible box布局模块，是CSS3中的新布局模块。它可以改善容器中物品的对齐，方向和顺序，即使它们的尺寸是动态的，甚至是未知的。flex容器的主要特征是能够修改其子项的宽度或高度，以在不同的屏幕尺寸上以最佳方式填充可用空间。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！