search

Rain120 / Web-Study

日常学习，工作写的笔记
66 stars 108 forks source link

CSS - 从入门到放弃 #2

Open Rain120 opened 5 years ago

Rain120 commented 5 years ago

CSS笔记，欢迎大佬提意见!!!

快速导航

Q1 | Q2 | Q3 | Q4 | Q5 | Q6 | Q7 | Q8 |

Q1. CSS盒模型问题？

当对一个文档进行布局(layout)的时候，浏览器的渲染引擎会根据标准之一的CSS 基础框盒模型(CSS basic box model)，将所有元素表示为一个个矩形的盒子(box)。它封装周围的HTML元素，它包括：边距(margin)，边框(border)，填充(padding)，和实际内容(content)。

其实盒子模型有两种，分别是IE盒子模型和标准W3C盒子模型。它们之间的区分主要是由属性box-sizing来决定的，content-box代表标准盒子模型，border-box代表IE盒子模型。下面让我们来看看它们之间的区别吧。

标准盒子模型 image

IE盒子模型 image

从上面结果看，我们知道标准盒子模型和IE盒子模型的区别就是两者的计算方式不一样

MDN - CSS基础框盒模型介绍

Q2. 常见的定位方式

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative（相对定位）：生成相对定位的元素，通过top, bottom, left, right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　

3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过top, bottom, left, right属性进行规定。可通过z-index进行层次分级。

4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 top, bottom, left, right属性进行规定。可通过z-index进行层次分级。

Position属性四个值：static、fixed、absolute和relative的区别和用法

MDN - 定位

回到顶部

Q3. position和float的异同

相同点：相应模块都会脱离文档流 不同点：position相应的块级元素会覆盖下面的内容（文字，） 而float只会覆盖块级元素，里面的文字会脱离出来

前端笔试之HTML+CSS+JS NO.1

回到顶部

Q4. BFC相关问题？

素质三连：什么是BFC? 它是作用是什么？如何触发它？

1. 什么是BFC?

块格式化上下文(Block Formatting Context，BFC)是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单的说就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。它与其他的块框类似，但是不同之处是：

  1. 可以阻止元素被浮动元素覆盖；
  2. 可以包含浮动元素；
  3. 可以阻止margin重叠。(原因： 所有同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding 或 Border 分隔的两个或多个盒元素的 margin 将会合并为一个 margin 共享。)
2. 它是作用是什么？
  1. 防止元素坍塌;
  2. 清除内部包含浮动元素。
3. 如何触发它？

满足以下条件之一就可以触发BFC：

  1. 根元素，即HTML元素;
  2. float 不为none`;
  3. overflow不为visible -> hidden，auto，scroll;
  4. display为inline-block，table-cell，table-caption;
  5. position为absolute或fixed.
  6. 表格标题（display:table-caption, html表格标题默认属性）
  7. 弹性盒flex boxes -> display：flex / inline-flex

MDN - 块格式化上下文

回到顶部