标签：box 知识点 元素 flex auto 常见 height css

本文总结下面试中常被问到的 css 问题。

BFC

盒模型中对一个元素设置css需要元素是block类型还是inline类型。BFC就是用来格式化块级（block）盒子，还有管理inline类型的盒子IFC，以及其他的FC。FC（Formatting Context)指页面中的一个渲染区域并且拥有一套渲染规则（决定了其他子元素如何定位以及与其他元素的相互关系和作用）。BFC即块级格式化上下文，指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局且与区域外部无关。

BFC的生成

css2.1中规定满足下列css声明之一的元素便会生成BFC：

• float的值不为none

• overflow的值不为visible

• display的值为inline-block、table-cell、table-caption（display为table也可以生成，但在于Table会默认生成一个匿名的table-cell）

• position的值为absolute或fixed

BFC的约束规则

浏览器对BFC区域的约束规则：

• 生成BFC元素的子元素会一个接一个的放置，垂直方向上它们的起点是一个包含块的顶部，两个相邻子元素之间垂直距离取决于元素margin特性。在BFC中相邻的块级元素外边距会折叠。

• 生成BFC元素的子元素中，每一个子元素的外边距和包含块的左边界相接触（对于从右到左的格式化右外边距和右边界相接触），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

详细说明：

• 内部的Box会在垂直方向上一个接一个的放置

• 垂直方向上的距离由margin决定（属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关）

• 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此（说明BFC中的子元素不会超过它的包含块，而position为absolute的元素可以超过它的包含块边界）

• BFC的区域不会与float的元素区域重叠

• 计算BFC的高度时，浮动子元素也参与计算。

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

类似css规则：

• Block元素会扩展到与父元素同宽，所有block元素会垂直排列

• 垂直方向上两个相邻div的margin会重叠，而水平方向可能不会

• 浮动元素会尽量往左上方（或右下方）

• 为父元素设置overflow：hidden或浮动父元素，则会包含浮动元素

BFC在布局中的应用

• 防止margin相互重叠

  同一个BFC中两个相邻的Box才会发生重叠，与方向无关。阻止margin重叠只要将两个元素别放在一个BFC中即可（可以让相邻元素其中一个生成BFC），我们甚少看到水平方向的margin重叠，但可以设置writing-mode（文本水平或垂直排布以及块级元素中文本的行进方向）使其水平排列的时候可能会出现margin水平方向重叠，水平方向外边距合并 demo bfc 解决外边距合并 demo

• 浮动相关问题

  为了使父元素包含子浮动元素，常见的方式是父元素设置overflow：hidden或浮动父元素。根本原因在于将父元素变为BFC，子浮动元素就会参与其高度计算（即不会产生高度塌陷问题），overflow：hidden与正常流最接近。bfc 解决高度塌陷 demo

• 多栏布局的一种方式

  与浮动元素相邻的已生成BFC元素不能与浮动元素相互覆盖，可以实现多栏布局，demo

 

水平居中

• 文本、行内元素、行内块级元素：text-align（text-align只控制行内内容如何相对他的块父元素对齐）

  简单快捷，容易理解，兼容性好，但只对行内内容有效，属性会继承影响到后代行内内容，当子元素宽度大于父元素宽度则无效。

• 单个块级元素：利用margin中auto，在margin有节余的同时如果左右margin设置了auto，将会均匀分配剩余空间。如果上下的margin设置了auto，其计算值为0。

  缺点是必须定宽，并且值不能为auto，宽度要小于父元素（否则无效）。

• 多个块级元素：将块级元素display属性指定为行内或者行内块级形式，然后利用text-align控制行内块级元素来控制块级元素的水平居中。但块级元素改为inline-block换行、空格会产生元素间隔。

• 使用绝对定位：子元素绝对定位，父元素相对定位，top、right、bottom、left的值是相对于父元素尺寸的，margin和transform是相对于自身尺寸，组合使用达到水平居中。可以将left设为50%（父元素宽度的一半），然后将子元素向右平移50%（自身宽度的一半）。

  不管是块级元素还是行内元素都可以实现，但是脱离了文档流。

• 任意个元素：flex，设置当前主轴的对齐方式为居中即justify-content:center

对于水平居中首先应该考虑哪些元素有自带的居中效果，即考虑行内元素或者行内块级元素，一般都以text-align:center，其次去考虑可不可以使用margin:0 auto，还是不行的话可以使用绝对定位或者flex布局，移动端能用flex就用flex。

垂直居中

• 单行文本、行内元素、行内块级元素：line-height（与height等值）。line-height最终表现是通过inline box实现，无论inline box所占的高度是多少其占据的空间都是与文字内容公用水平中垂线。设置父元素中line-height等于height的值。缺点是只能作用于单行行内内容，并且需要知道高度的值。

• 多行文本、行内元素、行内块级元素：通过用span把所有文字包裹起来，设置display：inline-block将其转化为行内块级元素解决。

• 图片：可以在图片上设置vertical-align:middle（默认为基线对齐），然后在父元素中设置line-height与height相等，并设置font-size为0后才可以完全垂直居中。如果是块级元素也可同样设置，但需要对这个块级元素设置宽高，并display:inline-block 使其具有行内特性。

• position：父元素非 static，子元素绝对定位，top 为 50%，margin-top 为 -50%或者 transform:translateY(-50%)

• flex：父元素 display:flex，align-item:center。

css 中可以继承的属性

• 字体：font、font-family、font-size、font-weight、font-style

• 文本：text-align、work-spacing、line-height、letter-spacing、color

• 元素可见性：visibility

• 光标属性：cursor

• box-sizing

css 作用域（选择器）权重

1. 第一等：代表内联样式，如: style=””，权值为1000。

2. 第二等：代表ID选择器，如：#content，权值为0100。

3. 第三等：代表类，伪类和属性选择器，如.content，:hover，:not（否定选择器、条件选择器），权值为0010。

4. 第四等：代表类型选择器和伪元素选择器，如div p,::before，权值为0001。

5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

6. 继承的样式没有权值。

权重是 256 进制数，1,0,0,0 > 0,99,99,99，也就是说从左往右逐个等级比较，前一等级相等才往后比，每一级都有自己的最大值（最大数目255），超出时就会应用其最大值（最大数目），超过255仍用最大值。!important的权重是正无穷（有界，可计算）。权重相同后面覆盖前面。

z-index 有什么属性会影响

设置元素的堆叠顺序。该属性设置一个定位元素沿 Z轴的位置，Z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

层叠顺序表：（1-7，最底层-最外层）

1. 形成层叠上下文环境的元素的背景与边框

2. 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）

3. 正常流式布局，非 inline-block，无 position 定位（static除外）的子元素

4. 无 position 定位（static除外）的 float 浮动元素

5. 正常流式布局,inline-block元素,无 position 定位（static除外）的子元素（包括 display:table 和display:inline ）

6. 拥有 z-index:0 的子堆叠上下文元素

7. 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

元素一旦成为定位元素，其z-index就会自动生效，此时其z-index就是默认的auto，也就是0级别，根据上面的层叠顺序表，就会覆盖inline或block或float元素。 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文，父元素的z-index 低于父元素另一个同级元素，子元素 z-index再高也没用。

面试题：如何防止父元素的z-index小但是子元素的z-index大？

参考

position属性常用的取值和它们的基本行为

• static

  static是position属性的默认值，定位方式为静态文档流。

• relative：对文档流位置偏移

• absolute：根据第一个非 static 的父节点进行定位

• fixed：根据 viewport 定位

• sticky：static+fixed 的组合。粘性定位，需要配合 top、bottom、left、right 中的任意一种，只有达到指定的阈值才会被固定。

  sticky 的兼容性问题处理的解决方案？

% 相对于什么

• font-size：把 font-size 设置为基于父元素的一个百分比值。

• line-height：基于当前字体尺寸的百分比行间距。

• width：正常文档流中和设置浮动的情况下，相对于父元素content-box的宽度；绝对定位时，相对于包含块padding-box的宽度。

• height：和width还是有一个明显的区别是当父元素width属性为auto时，子元素宽度仍然可以使用百分比设置。但是对于height，只要子元素还是在正常文档流当中的，如果父元素的height属性为auto，则子元素height设置为百分比会被忽略。规范中指出：如果包含块的高度没有显式指出（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。而auto*100/100=NaN。

• margin、padding：无论是垂直或水平方向，均是相对于父元素的宽度，正常文档流中和设置浮动的情况下，相对于父元素content-box的宽度；绝对定位时，相对于包含块padding-box的宽度。

• left、right、top、bottom： top,bottom设置百分比定位是按包含块padding-box的高度来计算的，同样left,right,设置百分比定位是按包含块padding-box的宽度来计算的。

padding-box、content-box、border-box：这三种都表示的是盒模型中盒子宽度的大小，从里向外依次增大，即 content-box < padding-box < border-box。box-sizing 只有 content-box、border-box、innitial、inherit、unset 几种，但本质上还是两种即 标准盒模型和IE盒模型。

参考

sass、less 相较于 css 有哪些优点

1、Less：

是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。

Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。

2、Sass：

是一种动态样式语言，Sass语法属于缩排语法，

比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

3、Sass与Scss是什么关系?

Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

共同点：

1、混入(Mixins)——class中的class；

2、参数混入——可以传递参数的class，就像函数一样；

3、嵌套规则——Class中嵌套class，从而减少重复的代码；

4、运算——CSS中用上数学；

5、颜色功能——可以编辑颜色；

6、名字空间(namespace)——分组样式，从而可以被调用；

7、作用域——局部修改样式；

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

不同：

• 用 Less 可以满足大多数场景的需求，但相比另外两者，基于 Less 开发类库会复杂得多，实现的代码会比较脏，能实现的功能也会受到 DSL 的制约。比 Stylus 语义更清晰、比 Sass 更接近 CSS 语法，使得刚刚转用 CSS 预编译的开发者能够更平滑地进行切换。Less 支持浏览器端编译。

• 当初 Sass 并不支持 SCSS 语法，使得转投 Sass 成本较高，后来引入支持 css 语法的 scss 。从功能上来说 Sass 大而全，语义明晰但是代码很容易显得累赘。主项目基于 Ruby 可能也是一部分人不选择它的理由

flex 布局（flexible box，弹性布局）常用属性

父元素上

• flex-direction：决定主轴方向（项目的排列方向）

  • row（默认起点为水平左端）

  • row-reverse（起点为水平右端）

  • column（起点为垂直上沿）

  • column-reverse（起点为垂直下沿）

• flex-wrap：一条轴线排不下如何换行

  • nowrap（默认不换行）

  • wrap（换行，第一行在上方）

  • wrap-reverse（换行，第一行在下方）

• flex-flow：flex-direction 和 flex-wrap 的合并

• justify-content：项目在主轴上的对齐方式（默认情况下即水平方向的对齐方式）

  • flex-start（默认左对齐）

  • flex-end（右对齐）

  • center（居中）

  • space-between（两端对齐，项目之间间隔相等）

  • space-around（每个项目两侧间隔相等，项目之间的间隔时项目与边框间隔的两倍）

• align-items：项目在交叉轴上如何对齐（默认情况下即垂直方向上的对齐方式）

  • flex-start （交叉轴起点对齐）

  • flex-end（交叉轴终点对齐)

  • center（交叉轴中点对齐）

  • baseline（项目第一行文字的基线对齐）

  • stretch（默认项目未设置高度或者 auto 时将会占满整个容器的高度）

• align-content：多根轴线的对齐方式

  • flex-start（与交叉轴起点对齐）

  • flex-end（与交叉轴终点对齐）

  • center（与交叉轴中点对齐）

  • space-between（与交叉轴两端对齐，轴线之间的间隔平均分布）

  • space-around（每根轴线两侧间隔相等）

  • stretch（轴线占满整个交叉轴）

子元素

• order：项目的排列顺序，数值越小排列越靠前

• flex-grow：项目的放大比例，默认0

• flex-shrink：项目的缩小比例，默认1

• flex-basis：项目占据主轴的空间（同 width、height），默认为 auto（项目本来大小），另外还可设置为 content、长度或百分比值。auto 时查看当前项有无设置宽度，如果有则使用该宽度，否则以包含的内容决定宽度；content 一律以内容决定宽度；百分比则是相对于容器而言，如果包含块注尺寸未定义，则计算结果和 auto 一样。

• flex：flex-grow、flex-shrink、flex-basis 的合并简写

  • 可以赋值为三个值

  • 可以赋值为 auto，表示 flex-grow、flex-shrink 均为 1，flex-basis 为 auto

  • 可以赋值为 none，表示 flex-grow、flex-shrink 均为 0，flex-basis 为 auto

  • 可以赋值为非负数，该数字表示 flex-grow，flex-shrink ，flex-basis 取 0%

  • 可以赋值为一个长度（px）或百分比，该数字表示 flex-basis，flex-grow 与 flex-shrink 取 1

  • 可以赋值为两个非负数，分别表示 flex-grow 与 flex-shrink，flex-basis 取 0%

  • 可以赋值为一个非负数和一个长度（px）或百分比，分别设为 flex-grow 与 flex-basis 的值，flex-shrink 取 1。

  举一个不同的值之间的区别：

  <div class="parent">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
  </div>
  ​
  <style type="text/css">
  .parent {
  display: flex;
  width: 600px;
  }
  .parent > div {
  height: 100px;
  }
  .item-1 {
  width: 140px;
  flex: 2 1 0%;
  background: blue;
  }
  .item-2 {
  width: 100px;
  flex: 2 1 auto;
  background: darkblue;
  }
  .item-3 {
  flex: 1 1 200px;
  background: lightblue;
  }
  </style>

  主轴上父容器总尺寸为 600px; 子元素的总基准值是：0% + auto + 200px = 300px，其中

  - 0% 即 0 宽度
  - auto 对应取主尺寸即 100px

  故剩余空间为 600px - 300px = 300px 伸缩放大系数之和为： 2 + 2 + 1 = 5 剩余空间分配如下:

  - item-1 和 item-2 各分配 2/5，各得 120px
  - item-3 分配 1/5，得 60px

  各项目最终宽度为:

  - item-1 = 0% + 120px = 120px
  - item-2 = auto + 120px = 220px
  - item-3 = 200px + 60px = 260px

  • 当 item-1 基准值取 0% 的时候，是把该项目视为零尺寸的，故即便声明其尺寸为 140px，也并没有什么用，形同虚设

  • 而 item-2 基准值取 auto 的时候，根据规则基准值使用值是主尺寸值即 100px，故这 100px 不会纳入剩余空间

  参考简书 flex 基础、felx-basis 解析

• align-self：允许单个项目有和其他项目不一样的对齐方式，可覆盖 align-items 属性，默认 auto（继承父元素 align-items，没有父元素等同与 stretch）

如何实现下划线

• border

• text-decoration:underline或给要加上下划线的部分用 <u></u> 包裹，必须要有文本内容，否则不会显示下划线，而且只有文字部分有下划线

• 利用 css 伪类配合 scale 完成???

• 利用伪元素 after before：创建一个块元素，使其位于当前元素底部，并设定高宽和颜色

  0.5px 的边框

  安卓手机无法识别 0.5px 的 border：对于浮点型数据会进行四舍五入，这个时候采用的方法一般是通过 transform:scale(0.5)将其缩小一半，可以是普通的 boder: 1px solid，或者通过伪元素，设置width: 200%; height: 1px

计数器实现目录结构

css counter-reset定义一个计数器后面跟一个名字，这个属性在哪个元素上设置则标示遇到这个元素我就重新开始计数。

    <div class="list2">
        <ul>
            <li>gdfg
                <ul>
                    <li>content</li>
                    <li>content</li>
                    <li>content</li>
                </ul>
            </li>
            <li>dfs</li>
            <li>sdaf
                <ul>
                    <li>content</li>
                    <li>content</li>
                    <li>content</li>
                </ul>
            </li>
            <li>dsfa</li>
            <li>fsda</li>
        </ul>
    </div>

    .list2{
        padding: 10px;
        border: 1px solid #ccc;
    }
    .list2 li{
        list-style: none;
    }
// 遇到ul就重新计数（添加一个新的计数器，原计数器不受影响）。
    .list2 ul{
        counter-reset: xuhao;
    }
// counters,第一参数接收计数器，第二参数指明新的计数值以什么字符链接在上一级计数值得后面
    .list2 li::before{
        counter-increment: xuhao;
        content: counters(xuhao, ".") " ";
    }

参考

常用伪类伪元素

伪类：像类选择器一样给某个已存在的DOM元素添加额外样式，一个冒号隔开。常见伪类有：

• link（鼠标点击之前）、active（鼠标点击时）、visited（鼠标点击后）、hover

• :first-child、:last-child、nth-child(n/odd/even)（n表示给第n个元素添加样式、odd 奇、even偶）

  nth-last-child，传递参数为 n 时表示匹配属于其元素的第 n 个子元素（从最后一个子元素开始计数），使用公式 an+b，n为计数器（从0开始），也可以传递 odd 或 even 表示奇数个或偶数个

伪元素：给出一个虚拟元素，给这个虚拟元素添加样式，两个冒号隔开。常用伪元素：

• ::before，::after，content 属性必须设置，可以设置为空（伪元素不存在于 DOM 但可以添加内容原因）。

高度、宽度

获取元素的大小和相对于视口的位置：Element.getBoundingClientRect()

设置页面元素显隐

• display:none

  脱离文档流，如果重新显示需要回流。

  修改其中子元素 display 属性不会重新显示出来

  元素上面添加的 click 事件不会触发

• opacity:0

  占据原来位置，不会进行回流，可能会进行重绘。因为具有 transition 或 animation 的 opacity 元素，渲染层被提升为合成层，translateZ(0) 或 translate3d(0,0,0) 可以认为强制创建合成层。元素提升为合成层后，transform 和 opacity 不会触发重绘，GPU可以改变之前画好页面的透明值

  修改其中子元素 opacity 属性不会重新显示出来

  元素上面的 click 事件仍可以触发

• visibility:hidden

  占据原来位置，不会进行回流，会进行重绘

  修改其中子元素 visibility 的值可以重新显示出来

  元素上面的 click 事件不能触发

css 轮播图 实现思路

首先图片全部显示出来，排成一行，图片外包裹 div，绝对定位，white-space: nowrap 不换行，这个 div 外再包裹一层，overflow: hidden。定时改变图片外包裹 div 的left值。

关于无限循环到最后一个元素时跳到第一个元素的动画方向问题：这里采用的解决方法在开头第一张图前加上最后一张图，在滚动到最后一个元素时，自动将动画效果去除并跳到开头第一张图前面的那张图，然后再开始循环。

例子

写个小图标

• 三角箭头：首先三角形可以使用 css 的 border 来绘制，即设置四个方向的颜色，将三面设置为透明就可以显示出一个三角形。将一个有颜色的三角形和一个白色的三角形以一定间距叠加，就可以显示出一个箭头符号

• 圆形进度条：圆形加载可以先通过 border 构建一个圆形边框，边框上 1/4 部分有不同颜色，然后让这个圆形边框动起来，通过 animation 和 keyframes，keyframes 中 transform 从 rotate 0deg 到 360deg，设置一下动画循环次数 animation-iteration-count 为 infinite 让其无限旋转下去

实现 demo

link 和 @import 的区别

• link属于XHTML标签，而@import完全是css提供的一种方式。link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。

• 加载顺序的差别：当一个页面被夹在的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。

• 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。

• 使用dom控制样式时的差别。当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的（不支持）。

• @import可以在css中再次引入其他样式表，比如创建一个主样式表，在主样式表中再引入其他的样式表

css 文本省略

text-overflow: ellipsis

多行文字，特定行截断

• 可以通过 -webkit-line-clamp 使文字不超过指定行，它需要和 display、-webkit-box-orient 和 overflow 结合使用：

  • display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

  • -webkit-box-orient; 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式

  • text-overflow: ellipsis; 可选属性，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

  缺点是兼容性（该属性是 webkit 私有属性，只支持 webkit 内核浏览器）、开发点击展开交互不是很方便（不知道是否有超出）

  demo

• float 模拟实现：有个三个盒子 div，粉色盒子左浮动，浅蓝色盒子和黄色盒子右浮动，

  1. 当浅蓝色盒子的高度低于粉色盒子，黄色盒子仍会处于浅蓝色盒子右下方。

  2. 如果浅蓝色盒子文本过多，高度超过了粉色盒子，则黄色盒子不会停留在右下方，而是掉到了粉色盒子下。

  demo

  参考：纯 css 实现多行文字截断

高度优先级问题

max-height、min-height、height 同时使用

当 height、max-height 同时使用时，小的生效。

• max-height < height，元素高度 max-height

• height < max-height，元素高度 height

当 height、max-height、min-height 同时使用时，

• height > max-height > min-height，元素高度 max-height

• height > min-height > max-height，元素高度 min-height

• min-height > height > max-height，元素高度 min-height

css Module 与 css in js

css in js ： 用 js 对象来封装 css 样式使用，作为行内样式插入 css Module： 使用一个独一无二的 class 名字，不会与其他选择器重名。通常对一个类名进行哈希编码，html 中在引入的时候以对象属性的方式引入，构建工具会进行编译处理

border 与 outline 的区别

• border 占用空间，outline 不占用空间，不影响元素的位置和尺寸

• border 适用于所有有形的 html 元素，outline 针对链接、表单控件等设计，如 input 元素自带 outline，在 focus 时显示 outline，在 blur 不显示。可以用 outline 来做悬停的动态效果，且没有 hover 添加 border 影响元素定位和大小。

标签：box,知识点,元素,flex,auto,常见,height,css
来源： https://www.cnblogs.com/EGBDFACE/p/16227064.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。