css篇-简化版

【CSS篇】简化版

(1)     CSS盒模型

CSS盒模型

题目：谈谈你对CSS盒模型的认识

1)       基本概念：标准模型+IE模型

2)       标准模型和IE模型的区别

计算宽度和高度的不同

3)       CSS如何设置这两种模型

4)       JS如何设置获取盒模型对应的宽和高？

JS怎么写才能拿到盒模型对应的宽和高呢？

5)       实例题(根据盒模型解释边距重叠)

6)       BFC(边距重叠解决方案) 或者IFC

详细解读：

1)       基本概念：标准模型+IE模型

2)       标准模型和IE模型的区别

标准模型的宽度指的就是content的宽度，不包含padding 和 border。

IE模型的宽高是计算padding和border的。如果设置宽度为200px，那么对于IE模型来说，它的200px是包含padding和border。

3)       CSS如何设置这两种模型？

box-sizing: content-box;

4)       JS如何设置获取盒模型对应的宽和高？

dom.style.width/height

dom.currentStyle.width/height(这个属性只有IE支持)

window.getComputedStyle(dom).width/height(这个属性所有浏览器都支持)

dom.getBoundingClientRect().width/height(计算绝对位置)

5)       实例题(根据盒模型解释边距重叠)

6)       BFC(边距重叠解决方案) 或者IFC

6-1)BFC的基本概念

块级格式化上下文

6-2)BFC的原理

在BFC的垂直方向的边距会发生重叠

BFC的区域不会与清除浮动的区域发生重叠

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

BFC不与float重叠

BFC子元素即使是float也会参与高度计算

6-3)如何创建BFC

overflow: hidden;

float的值不为none

position的值不是 static

display的是table

6-4)BFC的使用场景

* 什么是 BFC

BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

* 形成 BFC 的条件

* 浮动元素，float 除 none 以外的值

* 定位元素，position（absolute，fixed）

* display 为以下其中之一的值 inline-block，table-cell，table-caption

* overflow 除了 visible 以外的值（hidden，auto，scroll）

* BFC 的特性

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

* 垂直方向上的距离由 margin 决定

* bfc 的区域不会与 float 的元素区域重叠。

* 计算 bfc 的高度时，浮动元素也参与计算

* bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

(2) 面试总结【css篇】- css选择器以及优先级

优先（优先级为）： !important > 内联样式 > #id > .class > tag > * > 继承  > 默认 。

当选择器的权重相同时，它将应用于就近原则。

权重的计算方式：

-----------------------------------------------------

来源： MDN web docs

不同种类的CSS选择器：

选择器可以被分为以下类别：

- 简单选择器 （Simple selectors）：通过元素类型、class 或 id 匹配一个或多个元素。

- 属性选择器 （Attribute selectors) : 通过 属性 / 属性值 匹配一个或多个元素。

- 伪类 (Pseudo-classes) ：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，

或元素是DOM树中一父节点的第一个子节点。

- 伪元素（Pseudo-elements) : 匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。

- 组合器（Combinators) ：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。

例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。

- 多重选择器（Multiple selectors) ：这些也不是单独的选择器； 这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面，

以将一组声明应用于由这些选择器选择的所有元素。

-----------------------------------------------------

属性选择器：

(1) 存在和值 (Presence and value)属性选择器

这些属性选择器尝试匹配精确的属性值：

- [attr] : 该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。

- [attr=val] : 该选择器仅选择 attr 属性被赋值为  val 的所有元素。

- [attr~=val] : 该选择器仅选择具有 attr 属性的元素， 而且要求 val 值 是 attr 值包含的被空格分隔的取值列表里中的一个。

让我们看一个特别的例子，下面是它的HTML代码：

我的食谱配料： <i lang="fr-FR">Poulet basquaise</i>

<ul>

<li data-quantity="1kg" data-vegetable>Tomatoes</li>

<li data-quantity="3" data-vegetable>Onions</li>

<li data-quantity="3" data-vegetable>Garlic</li>

<li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>

<li data-quantity="2kg" data-meat>Chicken</li>

<li data-quantity="optional 150g" data-meat>Bacon bits</li>

<li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>

<li data-quantity="25cl" data-vegetable="liquid">White wine</li>

</ul>

和一个简单的样式表：

/* 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 */

[data-vegetable] {

color: green;

}

/* 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 */

[data-vegetable = "liquid"] {

background-color: goldenrod;

}

/* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素，

即使元素的属性中还包含其他属性值， 都会被应用红色的文本颜色 */

[data-vegetable~="spicy"] {

color: red;

}

结果如下：

(2) 子串值 （Substring value) 属性选择器

这种情况的属性选择器也被称为"伪正则选择器"，因为它们提供类似 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式）：

-  [attr |= val] ：选择 attr 属性的值是 val 或值以 val- 开头的元素（注意，这里的 "-" 不是一个错误，这是用来处理语言编码的）。

-  [attr ^= val] :  选择 attr 属性的值以 val 开头（包括 val）的元素。

-  [attr $= val] :  选择 attr 属性的值以 val 结尾 （包括 val)  的元素。

-  [attr *= val] :  选择 attr 属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如， "cat" 是字符串 "caterpillar" 的子字符串）。

让我们继续我们前面的例子，并添加以下CSS规则：

/* 语言选择的经典用法 */

[lang |= "fr"] {

font-weight: bold;

}

/* 具有"data-vegetable"属性含有值"not spicy"的所有元素，都变回绿色*/

[data-vegetable*="not spicy"] {

color: green;

}

/* 具有"data-quantity"属性其值以"kg"结尾的所有元素 */

[data-quantity$="kg"] {

font-weight: bold;

}

/* 具有属性"data-quantity"其值以"optional"开头的所有元素 */

[data-quantity^="optional"] {

opacity: 0.5;

}

-----------------------------------------------------

伪类（Pseudo-class)

一个CSS伪类（Pseudo-class)是一个以冒号 （：）作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，

你可以往元素的选择器后面加上对应的伪类（pseudo-class)。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，

或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在DOM树中父元素的第一个子元素时。

:active            :indeterminate         :only-of-type

:any               :in-range                  :optional

:checked       :invalid                     :out-of-range

:default          :lang()                      :read-only

:dir()              :last-child                 :read-write

:disabled       :last-of-type              :required

:empty          :left                           :right

:enabled       :link                          :root

:first              :not()                        :scope

:first-child      :nth-child()               :target

:first-of-type   :nth-last-child()       :valid

:fullscreen     :nth-last-of-type()    :visited

:focus            :nth-of-type()

:hover           :only-child

一个伪类（Pseudo-class)的例子：

<a href="#" target="_blank">百度一下</a>

一些样式：

/* 这些样式将在任何情况下应用于我们的链接 */

a {

color: blue;

font-weight: bold;

}

/* 我们想让被访问过的链接和未被访问的链接看起来一样 */

a:visited {

color: blue;

}

/* 当光标悬停于链接，键盘激活或锁定链接时，我们让链接呈现高亮 */

a:hover, a:active, a:focus {

color: darkred;

text-decoration: none;

}

-----------------------------------------------------

组合器和选择器组

虽然一次使用一个选择器就很有用，但在某些情形中却可能效率低下。 CSS选择器在你开始组合他们进行细粒度选择的时候变得更具使用价值。基于元素之间的相互关联关系，CSS提供了几种方法来对元素进行选择。下表使用连接符展示了这些关联关系(A和B代表前文所述的任意选择器):