认识前端--CSS(三)

这是我参与「第四届青训营」笔记创作活动的第4天

CSS选择器的优先级

浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

选择器权值单个的话有以下顺序

id > class=属性=伪类 > 标签=伪元素

同时这些权值可以叠加的，叠加计算可以参考下图：

CSS的盒子模型

基本概念

盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图，盒模型分为标准模型和 IE 模型。

IE模型：

标准模型：

测试一下：

标准模型：

<div class="box"></div>

.box {
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 5px solid blue;
    margin: 5px;
}

IE模型：

<div class="box"></div>

.box {
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 5px solid blue;
    margin: 5px;
    box-sizing: border-box;
}

标准模型和 IE 模型的区别

区别在于盒模型大小的计算方式：

IE模型：

width = content + padding * 2 + border * 2; //如上图为100px

height = content + padding * 2 + border * 2; //如上图为100px

标准模型

width = content; //如上图为100px，盒子实际大小 > 100px

height = content; //如上图为100px，盒子实际大小 > 100px

BFC介绍及使用示例

据MDN文档介绍，BFC是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

常见触发BFC情况

<html> 根元素
float的值不为none
overflow的值为 auto 、 scroll 或 hidden
display的值为 table-cell、table-caption 和 inline-block 中任意一个
position的值不为 relative 和 static

包含内部浮动

让浮动内容和周围的内容等高。

<section>
  <div class="box">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the container.</p>
  </div>
</section>
<section>
  <div class="box" style="overflow:auto">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the <code>overflow:auto</code> container.</p>
  </div>
</section>
<section>
  <div class="box" style="display:flow-root">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the <code>display:flow-root</code> container.</p>
  </div>
</section>

section {
  height: 150px;
}
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
}
.box[style] {
  background-color: aliceblue;
  border: 5px solid steelblue;
}
.float {
  float: left;
  width: 200px;
  height: 100px;
  background-color: rgba(255, 255, 255, .5);
  border:1px solid black;
  padding: 10px;
}

清楚外部浮动

下面的例子中，我们使用 display: flow-root 和浮动实现双列布局，因为正常文档流中建立的 BFC 不得与元素本身所在的块格式化上下文中的任何浮动的外边距重叠。

<section>
  <div class="float">Try to resize this outer float</div>
  <div class="box"><p>Normal</p></div>
</section>
<section>
  <div class="float">Try to resize this outer float</div>
  <div class="box" style="display:flow-root"><p><code>display:flow-root</code><p></div>
</section>

section {
  height:150px;
}
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
}
.box[style] {
  background-color: aliceblue;
  border: 5px solid steelblue;
}
.float {
  float: left;
  overflow: hidden; /* required by resize:both */
  resize: both;
  margin-right:25px;
  width: 200px;
  height: 100px;
  background-color: rgba(255, 255, 255, .75);
  border: 1px solid black;
  padding: 10px;
}

外边距重叠

创建新的 BFC 避免两个相邻的 div 之间外边距重叠。

<div class="box1"></div>
<div class="box2">
    <div class="box2_child">inner</div>
</div>

.box1,
.box2_child {
	height: 50px;
	margin: 20px 0;
}
.box1 {
	background: #FF9966;
}
.box2 {
	overflow: hidden;
	background: #CCCC00;
}

参考文章

developer.mozilla.org/zh-CN/docs/… segmentfault.com/a/119000001…

认识前端--CSS｜ 青训营笔记