前端研发工程师面经——CSS

2. CSS

2.1 link和@import的区别

• link属于html标签。@import在css中使用表示导入外部样式表；
• 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
• import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
• link方式的样式的权重 高于@import的权重；
• link 支持使用javascript改变样式 （document.styleSheets），后者不可

2.2 flex布局

• Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。可以随着页面大小的改变自适应页面布局。
• 目前被所有浏览器所支持。

2.2.1 设置flex布局

• 块级元素： .box{ display:flex; }
• 行内元素也可以设置成flex布局: .box{ display:inline-flex; }
  • 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

2.2.2 常见属性

• flex-direction
  • 用于指定Flex主轴的方向，继而决定了Flex子项在Flex容器中的位置
• justify-content
  • 用于指定Flex子项在主轴方向上的对齐方式
• align-items
  • 用于指定侧轴上Flex子项的对齐方式
• flex-wrap
  • 用于指定Flex子项是否换行
• align-content
  • 该属性用于多行情况下，用于多行的对齐方式
  • align-content:stretch（默认值）| flex-start | flex-end | center | space-between | space-around
• align-self
  • 该属性用于单独指定某Flex子项的对齐方式
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;
• flex复合属性
  • flex-grow：用于弹性盒子的扩展比率，默认值为0
  • flex-shrink：指定了Flex元素的收缩规则，flex元素仅在默认宽度之和大于容器的时候才会发生收缩
  • flex-basis：用于设置或检索弹性盒子的伸缩基准值
• Flex布局常用在设置盒子垂直水平居中，这也是常考的一个内容，直接在父元素上面设置display：flex； justify-content:center； align-items:center;

2.3 盒模型

• CSS 盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
• 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素
• CSS 中组成一个块级盒子需要:
  • Content box（内容）: 这个区域是用来显示内容，大小可以通过设置 width 和 height
  • Padding box（内边距）: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置
  • Border box（边框）: 边框盒包裹内容和内边距。大小通过 border 相关属性设置
  • Margin box（外边距）: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置

2.4 BFC

• BFC 直译为"块级格式化上下文"它是一个独立的渲染区域，它规定了该区域的布局流向，BFC包含创建它的元素内部的所有内容，创建BFC元素里的子元素不会影响到外面的元素，不同的BFC在进行渲染时互不干扰。
• BFC对浮动元素与清除浮动都很重要。浮动和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。
• BFC的特点：
  • 创建BFC的元素隔绝了内部与外部的联系，内部元素不会影响到他的外部元素。
  • 创建BFC的元素会计算浮动元素的高度（不会出现高度塌陷问题）。
  • 创建BFC元素之间的margin不会合并。
• 下面这些属性元素会创建BFC：
  • 根元素()
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • overflow 值不为 visible 的块元素
  • 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）

2.5 CSS选择器的优先级

• 选择器的权重（优先级）
  • 内联样式、id选择器、类和伪类选择器、元素选择器、通配选择器、继承的样式 （没有优先级）