前端面试笔记-CSS篇

前言，笔者目前已收到网易的offer，但由于学校与大环境的影响，目前拒掉了offer准备考研中，现在将面试准备的笔记上传到博客供大家学习交流，以后还会有补充。笔记来源丰富，转载都附上了链接，如有侵权请告知我删除

选择器的权重和优先级

CSS基础：谈谈选择器的权重和优先级

• 浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。

• 优先级是由匹配的选择器中每一种选择器类型的 数值 决定的。

• 当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

• 当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。

• 优先级

• 每一组选择器在判断优先级的时，是相加的关系
• !important 规则时，此声明将覆盖任何其他声明
• !important 是一个坏习惯，应该尽量避免
• 两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

盒模型

CSS基础：简述CSS盒模型

• 内边距 padding：包围在内容区域外部的空白区域
  • 内边距位于边框和内容区域之间，不能为负
  • 可以设置padding padding-top padding-right padding-bottom padding-left
  • 更改类.container的内边距,可以在容器和方框之间留出空间
• 外边距 margin:盒子和其他元素之间的空白区域
  • 外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。
  • 可以设置margin: 10px //等于 margin-top: 10px margin-right: 10px margin-bottom: 10px margin-left: 10px
  • 外边距折叠：如果有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。
• 边框 border：边框盒包裹内容和内边距
  • 它是在边距和填充框之间绘制的。
    • 如果您正在使用标准的盒模型，边框的大小将添加到框的宽度和高度。
    • 如果您使用的是替代盒模型，那么边框的大小会使内容框更小，因为它会占用一些可用的宽度和高度。
  • 可以设置：border-top border-right border-bottom border-left border-width border-style border-color
  • 还可以设置：border-top-width border-top-style border-top-color等

标准盒模型和替代模型（IE）

• 在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小，如果使用标准模型，则宽度 = 410px (300 + 50 + 50 + 5 + 5)，由margin之外的其他属性组成。

  

• 在替代模型中，内容宽度 = 该宽度 - border - padding。

• 默认浏览器会使用标准模型。如果需要使用替代模型，可以通过为其设置 box-sizing: border-box 来实现。
• 如果你希望所有元素都使用替代模式，而且确实很常用，设置 box-sizing 在 元素上，然后设置所有元素继承该属性

html {
   
  box-sizing: border-box;
}
*, *::before, *::after {
   
  box-sizing: inherit;
}

块级盒子与内联盒子

块级盒子：

特点：

• 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
• 每个盒子都会换行
• width 和 height 属性可以发挥作用
• 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”

常见的块级元素：

div, h1~h6, p, form, ul, li, ol, dl, address, hr, menu, table, fieldset

内联盒子：

特点：

• 盒子不会产生换行。
• width 和 height 属性将不起作用。
• 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
• 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

常见行内元素：

a, span, label, strong, em, br, img, input, select, textarea, cite

隐藏一个元素

css隐藏元素的方法(三种)

• 使用display:none;隐藏元素
  • 给元素的css属性中添加display:none;隐藏目标的同时还不占位置.
• 通过改变元素透明度隐藏元素
  • 当元素完全透明的时候就是隐藏了,opacity:0(取值范围0-1),0为完全透明,1为完全不透明.,这个方法会继承到子元素,使用的时候要看清了.
• 使用visibility:hidden;隐藏
  • 同样是给css属性添加,但是占位置

Position

CSS基础：浅谈position

文档流

• "文档流"是在对布局进行任何更改之前，在页面上显示"块"和"内联"元素的方式。通常是从上至下，从左到右的形式
• 一旦某部分脱离了"流"，它就会独立地工作

定位

定位的整个想法是允许我们覆盖上面描述的基本文档流行为

• 静态定位：position: static;

• 相对定位：position: relative

.positioned {
   
    position: relative;
    top: 30px;
    left: 40px;
    background: #E6F7FF;
}

<div class="box">
    <h2 class="positioned">二级标题</h2>
    <h3>副标题</h3>
    <p>我是段落1</p>
    <p>我是段落2，我包含了有意思的标签<span>我是span标签</span>,除了span标签还有它——<a href="https://www.baidu.com">我是a标签</a>,你看他们都不会导致新起一行
    </p>
</div>

使用position: relative，不会让元素脱离文档流，目标元素会基于自己原本的位置进行定位

• 绝对定位：position: absolute;

绝对定位将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

一般将absolute元素的父元素设为relative

这两个是配合使用的，A定义了relative后，B就会相对于A进行移动。

其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，

一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位

还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位，为什么一般都是用相对定位呢，因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来占的地方也不会让出来的，这样的好处是原来在它周围的其他元素不会因为它的离开而改变位置而使页面乱套，因为在你这个例子里我们只是要让A作为B的一个参照偏移位置，并不需要A元素以及它周围的元素有所改变，所以用相对定位是非常合适的（如果你另有其他需要，祖先元素绝对定位也不是不可以）

• 固定定位：position: fixed;

绝对定位固定元素是相对于元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。

• 粘性定位：position: sticky;

sticky允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。

z-index

一旦使用定位，就可能使元素重叠,使用z-index: 3;控制覆盖，值越大越在上面

浮动

CSS浮动