关于CSS面试知识点（持续更新ing~）

最新推荐文章于 2025-01-06 17:49:06 发布

原创最新推荐文章于 2025-01-06 17:49:06 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

本文详细介绍了CSS样式的三种方式：行内样式、内部样式和外部样式，以及它们的权重规则。接着，讨论了CSS选择器，包括标签选择器、类选择器、ID选择器和通配符选择器及其权重。此外，解释了盒模型的两种类型——标准盒模型和怪异盒模型，并探讨了如何解决浮动元素导致的父级元素高度塌陷问题，列举了四种清除浮动的方法。最后，提到了CSS3的一些新增特性，如RGBA、HSLA、文字阴影、边框效果、盒子模型调整、渐变、过渡和自定义动画等。

一. css样式

行内样式

<标签名 style='属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;'>内容</标签名>

内部样式

<style>
  选择器 {
     属性1: 属性值1;
     属性2: 属性值2;
     属性3: 属性值3;
  }
</style>

外部样式

<link href='CSS文件路径' rel='stylesheet'>

权重：行内样式 > 内部样式 > 外部样式

二. css选择器

标签选择器

标签名{属性1:  属性值1;属性2:  属性值2;属性3:  属性值3;}

类选择器

.类名 {属性1:  属性值1;属性2:  属性值2;属性3:  属性值3;}

id选择器

/#id名 {属性1:  属性值1;属性2:  属性值2;属性3:  属性值3;}

通配符选择器

*{属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}

权重：id选择器>类选择器>标签选择器>通配符选择器（*）

三. 盒模型

CSS3中有两种盒模型：标准盒模型 和 怪异盒模型

两种盒模型的区别

标准盒模型下 box-sizing: content-box;
盒子宽度=width + padding + border

怪异盒模型 box-sizing: border-box;
当内边距和边框宽度相加 < 内容width的时候，盒子宽度就是 width 的值压缩content内容区域
当内边距和边框宽度相加 > 内容width的时候，盒子宽度就是内边距+边框 content区域就没了

标准盒模型主要用于PC端，怪异盒模型主要用于手机端。

四. 清除浮动

目的：解决父级元素会因为子级元素浮动导致高度塌陷的问题。

1.额外标签法

在浮动元素末尾添加一个空的标签例如

<div class='parent'>
  <div class='child'>
  <div style='clear:both'></div>
  </div>
</div>

2. 添加overflow属性

给父级元素添加overflow属性

<style>
   .partent {
       overflow: hidden | auto | scroll ;
 }
</style>

3. 使用after伪元素

<style>
   .partent :after{
       content: ""; display: block; height: 0; clear: both; visibility: hidden;  
   } 
</style>

4. 使用before和after双伪元素清除浮动

<style>
 .partent {
	  zoom:1;
 }
 .partent :after,.partent :before{
     content:"";
     display:table;
 }
 .partent :after{
     clear:both;
     visibility:hidden;
     font-size:0;
     height:0;
 }
</style>