前言

这是我加入前端青训营的第6篇学习笔记

CSS发展历史

CSS3之后的模块化集合统称为CSS3

基础知识

层叠规则,优先级

作用:解决冲突
如下图:当HTML写入的<style>与index.css的color发生冲突时,优先级就会解决冲突

需要遵循的层叠三大规则:

选择器优先级(这里引用我前端语言串讲中的表格):

选择器	示例
元素选择器	p
id选择器	#p1
类选择器	.span
后代选择器	.content p
子代选择器	.content > p
兄弟选择器	#p1～p
相邻选择器	#p1+#p2
群组选择器	p,span
全局选择器	* body
属性选择器	查找type=text 元素 input[type=＂text＂]
伪类选择器	:content

优先级排序:

！important>行间样式>ID选择器>属性选择器&&伪类选择器&&类选择器>元素选择器
举例:
回到刚才那个问题,按照HTML的执行规则,最终的结果是蓝色.因为后执行的index.css覆盖了之前<style>里的color.

CSS层叠的使用建议:

继承

CSS中并不是所有属性都可以继承．大部分只有与文字有关的属性可以继承　如下图所示：

HTML代码:

<h1>I am a Tittle</h1> 
<div class = "card">
    <h1> I am a inside Tittle</h1>
</div>

CSS代码:

h1 {
    font-size: 20px;
}
.card{
    font-size:24px;
}
.card h1{
    font-size: inherit;
}

inherit : 指定一个属性从其父元素继承

CSS的值和单位

盒模型

盒模型是指 HTML 元素在呈现时所采用的盒子模型，它由 content（元素内容）、padding、border 和 margin 四个部分组成。盒模型指定了每个 HTML 元素所占据的空间及其边界。

对于盒模型来说，有一些重要的参数：

width 和 height：表示元素本身的宽度和高度，不包括 padding、border 和 margin 的部分；
padding：是元素的内边距，表示元素 border 和 content 之间的空白区域；
border：是元素的边界，表示元素的边框；
margin：是元素的外边距，表示元素与其他元素的间隔。

盒模型可以实现对页面元素的精确布局和定位。在 CSS 中，可以通过 box-sizing 属性来控制盒模型的计算方式，有两种选项：content-box（默认方式）和 border-box。其中，content-box 表示盒模型只包括元素的 content 部分，而 border-box 则包括了元素的 content、padding 和 border 部分，使得盒模型更加灵活和实用。

注意:在padding,margin和border中,只有margin可以使用负值,margin负值减少的是外界可感知的宽高,不提倡高频使用

布局和定位

常规流布局

常规流布局（Normal Flow layout）是默认的页面布局方式，也称为文档流或普通流。在常规流布局中，HTML元素按照其在HTML代码中出现的先后顺序，从上到下以垂直方向排列，并且在水平方向占据父容器的全部宽度。

在常规流布局中，每个元素最初被当做一个矩形框处理，它们相互排列并遵循以下特性：

块状元素（display: block）：独占一行，从上至下排列。

块级元素默认的宽度为其父容器的宽度，高度取决于其内容。
常见的块级元素有：<div>、<p>、<h1>、<ul>、<ol>、<li>等。

行内元素（display: inline）：与文本内容一起排列，同行排列，从左至右排列。

<span>、<a>、<strong>、<em>、<img> 、<input>、<label>、<select>、 <textarea>、<button>

行内块元素（display: inline-block）：与文本类似，但可以设置宽度和高度。

<input type="checkbox">、 <input type="radio">、 <button>、<img>、<select>、<label>

格式化上下文

格式化上下文（Formatting Context）是指在文档中一块渲染区域，用来决定块级盒子的布局及其内部元素排列的规则。具体来说，格式化上下文是由浏览器按照特定的渲染规则计算出来的。每个格式化上下文都有自己特定的渲染行为。常见的格式化上下文包括块格式化上下文（Block Formatting Context，BFC）、行内格式化上下文（Inline Formatting Context，IFC）和表格格式化上下文（Table Formatting Context，TFC）等。

BFC（块级格式化上下文）

BFC（块级格式化上下文）是CSS中一个重要的概念，它是一个独立的渲染区域，决定了自己内部子元素的布局规则。一个元素的BFC特性主要是由它的position属性、float属性、display属性、overflow属性等来决定的。在一个BFC中，盒子从顶端开始垂直地一个接一个地排列，俗称“块状化”，并且在这个BFC区域内部不会与浮动元素重叠，同时也不会让其子元素溢出父元素。在解决一些页面布局问题时，比如处理浮动元素、防止margin重叠等问题时，我们可以运用BFC的特性来实现。同时，BFC也是提高网页性能的关键因素之一，通过使用BFC的特性，可以减少浏览器的回流和重绘操作，提高渲染性能和用户体验。

BFC的触发方式:

display 属性值为 block、inline-block、table、table-cell、table-caption 等；
position 属性值为 absolute 或 fixed；
float 属性值不为 none；
overflow 属性值不为 visible。

BFC的应用:

防止垂直方向margin重叠

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

IFC:行级格式化上下文

行级格式化上下文（Inline Formatting Context，IFC）是一个网页的渲染结果的一部分，它负责管理行内元素的布局和渲染。与块级格式化上下文（Block Formatting Context，BFC）不同，IFC 中的元素按照顺序依次排列，而不是像 BFC 中的元素一样按照块级框依次排列。

在 IFC 中，元素内部的内容会被视为一行，然后再根据文本方向和文本对齐方式等属性将这些行进行排列。在水平书写模式中，行内框从左往右依次排列；在垂直书写模式下，则从上向下排列。如果行内框的大小超过了 IFC 的大小，它们就会从 IFC 中“溢出”，并会影响相邻元素的布局和渲染。

深入理解CSS｜青训营学习笔记

前言