CSS简介

什么是CSS

CSS（Cascading Style Sheets）是一种用于控制网页样式和布局的标记语言，它为网页添加了丰富的视觉效果，使网页呈现出更加美观和专业的外观。本文将深入探讨CSS的一些重要概念和高级技巧，帮助读者更好地掌握CSS，并在前端开发中运用自如。

CSS选择器

在CSS中，选择器用于定位HTML文档中的元素，从而为它们应用样式。CSS选择器的类型有很多，例如：类选择器、ID选择器、后代选择器、伪类和伪元素选择器

选择器的特异度

CSS中可以写很多选择器，可以根据id更改内容的样式，也可以改整个标签内容的样式。当多个选择器作用在同一个元素的时候，元素样式将根据选择器特异度变化。这里特异度指的是越特殊的选择器，优先级越高。

布局

在实际前端开发中，CSS的布局是最常用的技巧之一。布局是确定内容的大小和位置的算法，依据元素、容器、兄弟节点和内容等信息来计算

盒子模型

盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构（往往是padding）；二是理解多个盒子之间的相互关系。

属性	说明
content	内容，可以是文本或图片
padding	内边距，用于定义内容与边框之间的距离
margin	外边距，用于定义当前元素与其他元素之间的距离
border	边框，用于定义元素的边框

图片.png

content
- 只有块元素才可以设置width和height，行内元素是无法设置width和height的。
- display 是否/如何显示元素。 none 隐藏元素，页面将显示为好像该元素不在其中，如 script 。 block 块级元素，如 div inline 行内元素，如 span
- overflow 当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方式。 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
margin

外边距指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。

继承

继承属性

在 CSS 中，每个CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值当元素的一个继承属性（inherited property）没有指定值时，则取父元素的同属性的计算值 computed value。只有文档根元素取该属性的概述中给定的初始值（initial value）（这里的意思应该是在该属性本身的定义中的默认值）。控制继承：CSS 为控制继承提供了五个特殊的通用属性值，每个 CSS 属性都接收这些值。

inherit 设置该属性会使子元素属性和父元素相同。
initial 将应用于选定元素的属性值设置为该属性的初始值。
revert 将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。
revert-layer 将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
unset 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样

浮动

float left 元素向左浮动 right 元素向右浮动
clear left 清除左浮动 right 清除右浮动 both 同时清除左浮动和右浮动（常用）
我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义clear:both来清除浮动。说白了，前面小弟干了太多坏事，后面得大哥出面才能解决。在实际开发中，凡是用了浮动之后发现有什么不对劲的地方，首先应该检查的是有没有清除浮动。事实上，清除浮动不仅仅只有clear:both，还有overflow:hidden，以及更为常用的伪元素。当然，这些都是后话了。作为初学者，我们只需要掌握clear:both就可以了。

行级vs块级

块级不和其他盒子并列摆放，适用所有的盒模型属性
行级和其他盒子一起放在一行或拆开成多行，盒模型中的width、height不适用

display属性

block 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none 排版时完全被忽略

行级排版上下文

简称IFC 只包含行级盒子的容器会创建一个IFC IFC内的排版规则：盒子在一行内水平摆放，一行放不下会换行，text-align决定一行盒子内的水平对齐，vertical-align垂直对齐，会避开浮动元素。

块级排版上下文

简称BFC BFC内的排版规则：盒子从上到下摆放，垂直margin合并，BFC内盒子的margin不会与外面的合并，BFC不会和浮动元素重叠

对于CSS学习

、理解 CSS 的概念

我们都知道：网页是由 HTML、CSS 和 JavaScript 组成的。而 CSS 又分为样式和布局两部分。对于想要学好 CSS 的初学者来说，首先必须了解 CSS 的概念。

样式 CSS 是 Cascading Style Sheets（层叠样式表）的简称，是一种用来控制网页显示样式的语言，它能更好地美化网页，并使网页排版更整齐、美观。通过给 HTML 元素设置不同的属性来实现相应的样式效果。

布局 CSS 是指通过一定的布局方式，控制网页中元素的排列位置和大小。CSS 布局技术可以实现响应式设计、固定宽度、自适应宽度等布局方式。

学习 CSS 的基础知识

1.了解基本的 CSS 语法

如果你已经掌握了 HTML 的基本语法，草草地学习 CSS 语法，当然是不行的。要学好 CSS，就必须掌握基本的 CSS 语法。CSS 语法非常简单，基本的语法格式如下：

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

这个语法非常容易理解：选择器指的是需要样式化的 HTML 元素，后面用花括号里面的属性和属性值来控制该元素的样式。

2.学习 CSS 的选择器

CSS 选择器是指可以用来匹配 HTML 元素或者文档树的某一部分的一组规则。可以将 CSS 选择器看作是网页中元素的姓氏。在一个 HTML 文档中，通过给每个元素设置一个 "class" 或 "id" 号，可以把这些元素组织成为不同的集合，然后通过 CSS 选择器来选择这些集合，进而选择元素并对其进行样式化。

3.学习常用的 CSS 属性和值

良好的设计和排版必需要掌握一些 CSS 基本属性，包括文字、边框、背景、颜色、定位等。下面是一些最常用的 CSS 属性和值。

文字：font、color、text-align、text-indent、line-height 等。
边框：border、border-radius 等。
背景：background-color、background-image 等。
颜色：color、background-color、border-color 等。
定位：position、top、left、right、bottom 等。

提高 CSS 技能

1.掌握 CSS3 的新特性

CSS3 是 CSS 的最新版本，包含了大量的新特性，能够实现更复杂、更丰富的样式效果。掌握 CSS3 的新特性，对于提高 CSS 技能非常重要。

2.学习 CSS 预处理器

如果你希望在开发网页时更加快速和高效，就可以尝试学习使用 CSS 预处理器，比如 Sass 和 Less。 CSS 预处理器是一种新兴的技术，它能够简化 CSS 的编写、管理和维护，并提供给开发者更好的开发体验。

3.深入理解 CSS 布局

CSS 布局是网页设计最重要的一部分，要想成为一名优秀的前端开发者，就必须掌握在线布局、浮动布局、弹性布局、定位布局等常用的布局方式。在学习 CSS 布局时，最好逐步深入学习，从简单的布局开始，逐渐转向更为复杂的布局。

总结

以上是我查阅资料后，筛选总结出的一些学习方法思路，计算机学习之路漫长，内容之多，希望大家坚持学下去，始终怀抱着计算机是人发明的，我也一定能搞懂它的信仰坚持到底！！！

深入CSS｜ 青训营