【前端】相信你会用到的一篇笔记---CSS篇（1）

个人博客：smile小站
欢迎来访，欢迎互换友链

1.什么是 CSS ？ CSS有什么用？

css 是层叠样式表，用于改变网页的布局。例如字体，颜色，大小，间距等

2. CSS语法

CSS是一种基于规则的语言，您可以定义规则来指定应应用于网页上特定元素或元素组的样式组

选择器 {
    属性名1: 属性值1;
    属性名2: 属性值2;
}

css 声明包括：选择器和属性组（属性名:属性值）

3. CSS 是如何工作的？

1. 浏览器加载HTML
2. 将HTML转换为DOM
3. 浏览器将获取HTML文档链接的大多数资源，例如嵌入式图像和视频…以及链接的CSS
4. 浏览器解析提取的CSS，并根据选择器类型将不同的规则分类为不同的“存储桶”，例如元素，类，ID等。根据找到的选择器，它确定应将哪些规则应用于DOM中的哪些节点，并根据需要向其附加样式（此中间步骤称为渲染树）。
5. 将渲染树放置在规则应用到其后应出现的结构中
6. 页面的视觉显示在屏幕上显示（此阶段称为绘画）

4. CSS 如何使用

CSS应用于文档的三种方法：使用外部样式表，内部样式表和内联样式。

5. CSS 选择器

CSS选择器是CSS规则的第一部分。它是元素和其他术语的一种模式，它告诉浏览器应选择哪些HTML元素以将规则内的CSS属性值应用于它们。

选择器类型：
1、ID　　#id
2、class　　.class
3、标签　　p
4、通用　　*
5、属性　　[属性名=“属性值”]
6、伪类　　：hover
7、伪元素　　::first-line
8、子选择器、相邻选择器

选择器权重：
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。

6.什么是 CSS 盒子模型

完整的CSS盒模型适用于块盒，内联盒仅使用盒模型中定义的某些行为。该模型定义了框的不同部分（边距，边框，填充和内容）如何共同创建一个可以在页面上看到的框。
盒子组成：

• 内容框 content
• 填充框 padding
• 边框 border
• 边距框 margin

标准盒子模型： 实际宽/高 = width/height + padding + border
IE盒子模型： 实际宽/高 = width/height

7. CSS 浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

元素浮动的特性：

1. 浮动的元素脱离了标准文档流，摆脱块级元素和行内元素的限制
2. 浮动的元素存在相互贴靠的效果，当宽度不够的时候，会出现自动换行
3. 浮动的元素虽然脱离了标准文档流，但是没有脱离文本流，可以出现被字包围的效果
4. 浮动之后的元素会存在收缩的效果，当一个块级元素没有设置宽度的时，当块级元素浮动之后，就会失去高度
5. 当父元素不设置高度的时候，多个子元素的高度和撑起了父元素的高度；当设置浮动后，子元素最高的高度撑起了父元素的高度。
6. 浮动元素能挡住盒子，但挡不住盒子里面的文字

浮动的弊端：

1. 导致高度塌陷，当子元素同时设置浮动后，父元素失去支撑，父元素的高度消失，缩成一条线。
   • 解决办法：在父元素失去高度，发生塌陷之后，可以给父元素添加高度或者设置overflow:hidden的方法进行解决高度塌陷的问题。
2. 页面结构的不稳定性，子元素浮动，导致标准文档流出现空白区域。
   • clear:both; 去进行解决，这也是称之为隔墙法。

清除浮动：

1. 父级添加overflow: hidden；
   • 子元素浮动了，会造成父元素的高度坍塌。只要给父元素添加overflow: hidden;属性，就可以解决浮动带来的影响。
2. 通过属性clear:both;达到清除浮动的目的；
   • 元素浮动后，只需要在浮动元素添加多一个块级元素，并添加clear: both;属性，便可以达到清除浮动的目的。
3. 通过给父级元素添加伪类after，达到清除浮动的目的；
   • 这种方式也是使用clear: both;的方式达到效果，只是变相的使用了伪类after，使得页面结构更简洁，也是常用的清理浮动的方式。
4. 给父级元素加高度（不推荐使用，它只适合高度固定的布局，一般父盒子都是为由内容撑起来）
5. 给父级元素添加overflow:auto（缺点：内部宽高超过父级div时，会出现滚动条，不推荐）
6. 给父级元素添加浮动（缺点：会产生新的浮动问题，不推荐）
7. 给父级元素添加display:table;（不推荐）