CSS 常见面试题总结

HATA
157 阅读9分钟

1. CSS选择器及其优先级

选择器格式优先级权重
id选择器#id100
类选择器#classname10
属性选择器a[ref=“eee”]10
伪类选择器li:last-child10
标签选择器div1
伪元素选择器li:after1
相邻兄弟选择器h1+p0
子选择器ul>li0
后代选择器li a0
通配符选择器*0

内联>ID选择器>类选择器（class）>标签选择器

选择器有：id选择器，类选择器，标签选择器，子元素选择器，后代选择器，伪类选择器

（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）

属性选择器（/* 存在title属性的 元素 */ a[title]）和伪类选择器优先级相同

样式优先级：！important>行内样式>(内联样式，外联样式)

内联外联和加载顺序有关。后定义的被应用。

权重大的会生效。

选择器符号：
1、群组选择器（','）
/* 表示既h1，又h2 */
h1, h2 {
  color: red;
}
2、后代选择器（空格）
/* 表示 h1 下面的所有 span 元素，不管是否以 h1 为直接父元素 */
h1 span {}
3、子元素选择器（'>'）(必须是直接子元素)
/* 表示 h1 下面的所有以 h1 为直接父元素的 span 元素，注意必须以 h1 为直接父元素 */
h1 > span {}
4、相邻兄弟选择器（'+'）(具有相同父元素，紧跟在后边的一个元素，仅选中一个元素)

div+span 表示选择紧邻在 span 后面的 span元素，且 div 和 span 必须拥有相同的父元素，所选到的仅为一个 span 元素标签。

5、兄弟选择器（'~'）（具有相同父元素的兄弟元素）

选择在某元素之后的所有兄弟元素，不一定要紧跟在后面，但必须得是相同父元素，即必须是同一级元素。

2. 常见的 CSS 布局单位

vw/vh 和百分比很类似，两者的区别：

  • 百分比（%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
  • vw/vm：相对于视窗的尺寸

em在设置自身字体大小的时候是相对于父元素的字体大小;

在用em设置其他属性单位的时候，是相对于自身的字体属性大小，只是很多时候自身字体属性是继承自父元素。

而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。

3.三栏布局

1.圣杯布局

利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。

2.绝对定位

左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

3.利用flex布局

左右两栏设置固定大小，中间一栏设置为flex:1。

一些 flex 的缩写值：

image-20230104171410810.png

flex:0的元素表现为最小内容宽度。如果元素有宽度，则为内容，文字的最小宽度。

image-20230104171436383.png

当 flex: 1，则三个属性依次为 1 1 0%（ 放大且缩小**）。

image-20230104171536174.png

当 flex:none，则三个属性依次为 0 0 auto，（不放大也不缩小）

image-20230104171610785.png

当 fle:auto，则三个属性依次为 1 1 auto（放大且缩小）。

flex-basis：该属性用来设置元素的宽度，通常情况下大家使用 width 设置宽度。但是如果元素上同时设置了 width 和 flex-basis ，那么 width 的值就会被 flex-basis 覆盖掉。

flex 的项目属性。

order 数值越小，排列越靠前。

4.水平垂直居中

  • 绝对定位

    先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心

.parent {    
    position: relative;
} 
.child {    
    position: absolute;    
    left: 50%;    
    top: 50%;    
    transform: translate(-50%,-50%);
}
  • 需要该元素有宽高限制
.box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
  • flex 布局
.box{
    display:flex;
    justify-content:center;
    align-items:center;
}

6.移动端适配问题

为了能让页面的尺寸自适应，可以使用 rem，em，vw，vh 等相对单位

7.定位与浮动

1.为什么要清除浮动

浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

浮动的工作原理：

  • 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
  • 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

浮动元素引起的问题？

  • 父元素的高度无法被撑开，影响与父元素同级的元素
  • 与浮动元素同级的非浮动元素会跟随其后
  • 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

清除浮动的方式如下：

  • 给父级div定义height属性
  • 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
  • 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
  • 使用 :after 伪元素。
.clearfix:after{
    content: "";
    display: block; 
    height: 0;
    clear: both; //清除左右两边浮动
}

clear CSS 属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。

对元素设置clear属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。

2.定位

相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

  • absolute
  • fixed
  • relative
  • static
  • inherit
值描述
absolute元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative生成相对定位的元素，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。（相对于其正常位置进行定位）。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
fixed元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
sticky元素根据正常文档流进行定位，然后相对它的 最近滚动祖先 和 最近块级祖先，基于 top，right，bottom，和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。
static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit规定应该从父元素继承 position 属性的值。

8. BFC

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

创建BFC的条件：

  • 根元素：body；
  • 元素设置浮动：float 除 none 以外的值；
  • 元素设置绝对定位：position (absolute、fixed)；
  • display 值为：inline-block、table-cell、table-caption、flex等；
  • overflow 值为：hidden、auto、scroll；

BFC的特点：

  • 垂直方向上，自上而下排列，和文档流的排列方式一致。
  • 在BFC中上下相邻的两个容器的margin会重叠
  • 计算BFC的高度时，需要计算浮动元素的高度
  • BFC区域不会与浮动的容器发生重叠
  • BFC是独立的容器，容器内部元素不会影响外部元素
  • 每个元素的左margin值和容器的左border相接触

BFC的作用：

  • 解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
  • 解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
  • 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

9.元素层叠顺序

由上到下分别是：

（1）背景和边框：建立当前层叠上下文元素的背景和边框。

（2）负的z-index：当前层叠上下文中，z-index属性值为负的元素。

（3）块级盒：文档流内非行内级非定位后代元素。

（4）浮动盒：非定位浮动元素。

（5）行内盒：文档流内行内级非定位后代元素。

（6）z-index:0：层叠级数为0的定位元素。

（7）正z-index：z-index属性值为正的定位元素。

10.CSS3新特性

  • 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）

  • 圆角 （border-radius:8px）

  • 多列布局 （multi-column layout）

  • 阴影和反射 （Shadoweflect）

  • 文字特效 （text-shadow）

  • 文字渲染 （Text-decoration）

  • 线性渐变 （gradient）

  • 旋转 （transform）

  • 增加了旋转,缩放,定位,倾斜,动画,多背景

avatar
文章
阅读
粉丝