CSS基础及CSS常见的面试题

最新推荐文章于 2024-08-09 20:45:54 发布

漏气的可乐

最新推荐文章于 2024-08-09 20:45:54 发布

阅读量247

点赞数

分类专栏： css 文章标签： css基础 css常见面试 css面试题

本文链接：https://blog.youkuaiyun.com/weixin_43841301/article/details/101030522

版权

css 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨CSS的各种技巧，包括元素隐藏方法、margin与padding的适用场景、display属性详解、position与float的相互作用、overflow属性的功能、CSS优化策略、line-height的理解、解决li元素间隙问题、display: inline-block的间隙处理、图片格式对比、强制换行、背景图居中、清除默认边距、解决img自带边距、文字修饰、水平垂直居中、浏览器内核介绍、设置DOM样式的方法、前端界面构成、link与@import的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使元素消失的方法

   a：opacity:0 ，该元素隐藏起来，不会改变页面布局，并且，如果该元素已经绑定了一些事件也是可以触发的
   b：visibility:hidden，该元素隐藏起来，不改变页面布局，但不会触发已经绑定的事件；
   c：display：none，把元素隐藏起来，改变页面布局，可以理解为在页面中吧该元素删掉；
   d：z-index：-1，延z轴把元素隐藏在body下面。

2、margin和padding分别适合什么场景使用

  margin：需要在border外侧添加空白，空白处不需要背景色；
  padding：需要在border内侧添加空白，空白处不需要背景色。

3、display的值，说明它们的作用。

  block：像块状元素一样显示，此元素前后会带有换行符；
  none：像行内样式一样显示；
  inline：默认，此元素会被现实为内联元素，元素前后没有换行符；
  inline-block：像行内样式一样显示，但其内容像块状类型元素一样显示；
  list-item：像块类型元素一样显示，并添加样式列表标记；
  relative和absolute定位原点：
  table：此元素回座位块级表格显示，表格前后带有换行符；
  absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位；
  relative：生成相对定位的元素，相对于其正常位置进行定位。

4、position跟display、overflow、float这些特性相互叠加后会怎么样？

   display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
   优先级机制：position：absolute/fixed优先级最高，有他们再时，float不起作用，display值需要调整。float或者absolute定位的元素只能是块元素或者表格

5、overflow属性

   scroll：必回出现滚动条；
   auto：子元素内容大于父元素时出现滚动条；
   visible：溢出的内容出现在父元素之外；
   hidden：溢出时隐藏。

6、CSS优化、提高性能的方法：

  a、避免过度约束；b、避免后代选择符；c、避免链式选择符；d、使用紧凑的语法；f、避免不必要的命名空间；g、避免不必要的重复；h、最好使用语义的名字；i、避免important，可以选择其他选择器；j、尽可能的精简规则，你可以合并不同类里的重复规则；k、正确使用display属性==

7、你对line-height是如何理解的

   行高指一行文字的高度，具体说李阿航文字间基线的距离，css中起高度作用的是height和line-height，没有定义height属性，最终表现作用一定是line-height
   单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以吧height删除
   多行文本垂直居中：需要设置display属性为inline-block

8、li与li之间又看不见的空白间隙是什么原因引起的？

    行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符，这些空白也会被应用于样式，占据空间，所会有间隙，把字符大小设为0，就没有空格了。
    解决方法：
   a、可以将<li>代码全部写在一排；
   b、浮动li中的float：left；
   c、在ul中用font-size：0（谷歌不支持）
   d、可以将ul{letter-spacing：-4px；}；li{letter-spacing:normal;}

9、display：inline-block什么时候会显示间隙

   a、有空格时候会有间隙 解决：s除空格；
   b、margin正值的时候   解决：margin使用负值
   c、使用font-size时候     解决：font-size:0、letter-spacing、word-spacing

10、png、jpg、gif、webp这些图片格式解释：

png：便携式网络图片，是一种无损数据压缩位图文件格式
       优点：压缩比高，色彩好。大多数地方可以用。
jpg：是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调和颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式；
gif：是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果。
webp：是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小45%。
        缺点：压缩的时间更久了，兼容性不好，目前只有谷歌和opera支持。

11、强制换行的css

Word-break:break-all；

12、如何设置水平并且垂直居中的一张背景图

设置background-position：center

13、清除所有的默认边距：padding：0；margin：0；

14、解决img图片自带边距的问题

    图片底部的空隙实际上涉及行内元素的布局模型，图片偶人的垂直对齐方式是基线，而基线的位置是与字体相关的，所以在某些时候，图片底部的空隙可能是2px，而有可能是4px或者更多。不同的font-size应该也会影响空隙的大小。
   解决方法：
        最优的解决方法是定义vertical-align
      1、转换成（行级）块元素
             display：block
       2、浮动，浮动后的元素默认可以转化为块元素（可以随意设置宽高属性）
             float：left
       3、给img定义vertical-align：（消除底部边距）
               img{    
                        border: 0;    
                        vertical-align: bottom;
                    }
        4、将其父容器的font-size设为0；
        5、给父标签设置与图片相同的高度

15、文字如何加下划线，上划线，删除线

  text-decoration:underline|overline|line-through

16、居中的三个方法

  1. margin-left: auto; margin-right:auto; text-align: center;必须设置text-align，否则在IE中会居左。 
   2.居中就是要先找到中间的位置，再偏移一定的像素。假设宽度为900，设置如下：left: 50%; margin-left: -450px; 
   3.采用浏览器宽度调整定位：left:expression_r((body.clientWidth-900)/2); 
   这个不如第二个办法好。并且在IE中不灵光。如果用jquery的话是可以的。

17、浏览器及内核

   1.IE-trident
   2.chrome-blink
   3.opera-blink
   4.Safari-webkit
   5.Firefox-gecko

18、有哪项方式可以设置dom的css样式

   1.行内； 2.内嵌；3.外嵌

19、css样式语句构成：

   选择器{属性：值}

20、前端界面有哪三层构成?

 html(结构）CSS（样式）JS（交互）

21、CSS中link和@import的区别

  1.link是HTML标签，@import是css中提供
  2.link页面加载时同时加载，@import是css提供的
  3.@import存在兼容性问题，IE5以上
  4.@import权重低

22、简述其作用

   <!DOCTYPE>声明位于文档中的最前面的位置，处于<html>之前      
          它是用来告知web浏览器页面使用了那种html版本