当前位置：首页 > news >正文

css题库

news 2025/9/12 17:10:42

什么是css？

CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，它是一种标准的样式表语言，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等）。

为什么最好把 CSS 的 link 标签放在 head 标签之间？

把 <link> 标签放在 <head></head> 之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

css引入方式有几种？有什么区别？link和@import有什么区别？

有内部引入、外部引入、行内引入

行内式引入，使用style属性在特定的HTML标记内插入CSS代码，语法“<标签名 style="css样式">..</标签名>”；
嵌入式引入，在文档head部分的style标签对中放入CSS代码，语法“<style>样式</style>”；
外部引入，将CSS代码放入外部CSS文件中，使用link标签或“@import”规则引入html文档中。

link属于html标签，而@import是css提供的一种方式，link标签不仅可以引入css，还可以做其他事，而@import只能引入css；@import只有在IE5以上才支持；而link标签不存在兼容性问题。

link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载

css选择器有几种？选择器的优先级是怎样的？

元素选择器，id 选择器，calss 选择器，后代选择器，子代选择器，伪类选择器，通配符

内联样式 > id > class > 元素 > 通配符 > 继承样式

浮动的原理什么？浮动有几种？

浮动的框可以左右移动，直到它的外边缘遇到另一个浮动框的边缘。

浮动框不属于文档流，是脱离了文档流。

float：left（左边） right（右边）。

请写出清除浮动有几种方式，分别是什么?

使用空标签清除浮动 clear：both。

使用overflow属性。

使 after 伪对象清除浮动

浮动外部元素，float-in-float。

如何解决浮动引起的高度坍塌？

给父元素加上高度（height）

设置一个空标签，并且给此标签加上clear:both；

清除——两者

行内，块状，行内块元素之间如何进行转换？

行内是display：inline；

块状是display：block；

行内块是display：inline-block；

行内块元素之间为什么会有间隙？怎么去除？

出现空白间隙的原因是，元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。

1.去除元素间的空白

2.父元素设置font-size为0，子元素单独再设置字体大小

3.设置margin-right为负值

4.给inline-block元素加float或者flex

5.设置字符间距或单词间距

定位有几种，他们的特点分别是什么？是相对于什么进行定位的？

position：static；默认值

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

position：absolute；绝对定位

特点：脱离文档流，

根据最近的有定位方式的父元素进行定位。

position：relative；相对定位

特点：不脱离文档流的布局，

根据自身的位置进行定位；一般配合绝对定位使用。

position：fixed；固定定位

特点：脱离文档流。

根据浏览器页面进行定位的常用于制作导航栏。

position：sticky；粘性定位

粘性定位的元素是依赖于用户的滚动。

相对于用户的滚动位置来定位。

请列举几种隐藏元素的方法？

overflow:hidden; 溢出隐藏

opacity: 0 透明度隐藏

display: none 显示全无

visibility:hidden 能见度隐藏

如何初始化css样式？为什么要初始化css样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异。

margin和padding的区别是什么？

margin是指从自身边框到另一个容器边框之间的距离，即容器外距离，是隔开元素与元素的间距；

而padding是指自身边框到自身内部另一个容器边框之间的距离，即可容器内距离，是盒子边框与盒子内部元素的距离。

display：none；和visibility：hidden；的区别是什么？

display:none它不占据空间，对后面的元素布局没有任何影响，visibility:hidden会占据原本的空间，会影响后面元素的布局。

请描述一下渐进增强与优雅降级是什么？

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

width: auto 和 width: 100% 的区别？

width: 100%的大小不包括内边距、边框

width: auto包括内边距和边框

100%表示子元素的宽度和父元素的宽度相等，其中并不包括子元素内外边距以及边框的值，为子元素真正的宽度

auto表示子元素的宽度+内边距+外边距+边框才等于父元素的宽度

什么是FOUC？你如何来避免FOUC？

FOUC无样式内容闪烁（Flash Of Unstyled Content），是在IE下通过@import导入css文件引起的。

IE会首先加载整个HTML文档的DOM，然后再导入外部的css文件。

因此，在页面DOM加载完成到css导入完成之间，有一段时间页面上的内容是没有样式的，这段时间的长短跟网速和电脑速度都有关系。

解决方法：使用link标签将样式表放在文档head中

说一下你对 box-sizing 属性的了解?

box-sizing属性是css3中新增的属性，允许你以某种方式定义某些元素，以适应指定区域

box-sizing的值有content-box、border-box、inherit。

content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框，此为默认值。

border-box：元素设定的宽度和高度决定了元素的边框盒。元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit：表示继承父元素的box-sizing属性。

弹性布局的布局原理是什么？什么场景下使用弹性布局？

它的原理是设置两条轴: 默认水平显示的主轴和始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。

弹性布局一般经常用在移动端中，在设置一些元素的排列时用弹性布局会比较简单

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过Css3媒体查询检测不同的设备屏幕尺寸做处理。

rgba、十六进制颜色是什么？如何这两个表达白色、红色、黑色、蓝色、绿色？

16进制模式：用三到四位16进制数表示颜色

rgba模式：用0-255分别表示rgb三个通道的数值

rgba的前几位分别代表红/绿/蓝，最后一位a（alpha）一般用作不透明参数。范围是0到1，其他三位的范围是0-255。

通过一个以“#”开头的6位十六进制数值表示一种颜色。6位数字分为3组，每组两位，依次表示红、绿、蓝三种颜色的强度。

1. #FFFFFF RGB(255,255,255) 即白色。

2. #000000 RGB(0,0,0) 即黑色。

3. #0000FF RGB（0,0,255）即蓝色。

4. #00FF00 RGB（0,255,0)即绿色。

5. #FF0000 RGB（255,0,0)即红色。

rgba()和opacity的透明效果有什么不同？

不同的是 opacity 作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。

伪类，伪元素有哪些？区别是什么?

伪类是操作文档中已有的元素，而伪元素则是创建了一个不在文档树中的元素，并为其添加样式。

1.伪类是通过在元素选择器上加入伪类改变元素状态。

2.伪元素通过对元素的操作进行对元素的改变。

常用伪类有：

:active 选择正在被激活的元素（匹配指定状态）

:hover 选择被鼠标悬浮着的元素（匹配指定状态）

:link 选择未被访问的元素（匹配指定状态）

:visited 选择已被访问的元素（匹配指定状态）

:disable 选择每个已禁止的元素

:checked 选择每个被选中的元素

:target 选择当前的锚点元素

常用伪元素

::first-letter 选择指定元素的第一个单词

::first-line 选择指定元素的第一行

::after 在指定元素的内容前面插入内容

::before 在指定元素的内容后面插入内容

::selection 选择指定元素中被用户选中的内容

css性能优化的方法，至少说出五种

1.异步加载CSS

2.文件压缩、

3.有选择地使用选择器

4.优化重排与重绘

5.减少使用昂贵的属性