css学习笔记

css基础

1、CSS 实际上如何工作？

当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：

浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。

浏览器显示 DOM 的内容

2、

关于 DOM

DOM是一种树形结构. 标记语言中的每个元素,属性,文本片段都变为一个 DOM 节点。这些节点由它们与其它 DOM 节点的关系来定义。有的元素是某些子节点的父节点，且这些子节点有兄弟（节点）

3、css写法

内联样式 

内部样式表

外部样式表

4、CSS 的属性和属性值都是区分大小写的

5、

CSS 规则是样式表的主要组成块 —— 是你在 CSS 中最常见的块。但这有一些其它类型的块，你以后偶尔会碰上 —— CSS 规则只是被称为 CSS 语句中的一种。其它类型如下：

• @-规则(At-rules)在CSS中被用来传递元数据、条件信息或其它描述性信息。它由（@）符号开始，紧跟着一个表明它是哪种规则的描述符，之后是这种规则的语法块，并最终由一个半角分号（;）结束。每种由描述符定义的@-规则，都有其特有的内部语法和语义。一些例子如下：
  • @charset 和 @import （元数据）
  • @media 或 @document （条件信息，又被称为嵌套语句，见下方。)
  • @font-face （描述性信息）
  具体语法示例：

  @import 'custom.css';

  该@-规则向当前 CSS 导入其它 CSS 文件
• 嵌套语句 是@-规则中的一种，它的语法是 CSS 规则的嵌套块，只有在特定条件匹配时才会应用到文档上。特定条件如下：
  • @media 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容；
  • @supports 只有浏览器确实支持被测功能时才会应用该@-规则的内容；
  • @document 只有当前页面匹配一些条件时才会应用该@-规则的内容。
  具体语法示例

  @media (min-width: 801px) {
    body {
      margin: 0 auto;
      width: 800px;
    }
  }

  上述的嵌套语句只有在页面宽度超过801像素时才会应用。

你将会在本门课程的适当位置学习@-规则/嵌套语句的其他一些类型。

重要：任何不是规则集或@-规则或嵌套语句的 CSS 语句都是无效的，并会因此被忽略。

6、简写 font，background，padding，border，和 margin

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

和以下这些做了相同的事：

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

7.  flex

在弹性盒对象的 <div> 元素中的各项周围留有空白：

div { display: flex ; justify-content: space-around ; }