CSS知识点梳理(1)

Chapter 1

---

元素

• 可替换元素：展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS .元素内容被外部的内容所替换，根据元素的标签和属性来决定元素的具体显示的内容；替换元素可用 height 和 width 属性进行缩放；如<img>，本身没具体内容，被文档外部的图像替换。<input>，由一个单选按钮、复选框、文本输入框替换。
• 不可替换元素：元素内容由浏览器在元素本身生产的框中显示。如<span>、<h1>、<td>、<li>
• 块级元素：默认地生成一个元素框，它会填充起父元素的内容区，且独占一行，旁边不能有其它元素。替换元素可以是块级元素，但通常都不是。如p、div、li
• 行内元素：在一个文本行内生成元素框，且不会破坏该行的流。
• HTML、CSS 都有块级元素、行内元素的概念，但存有一个重要差别。HTML 中，块级元素不能继承自行内元素。CSS 中，对显示角色如何嵌套不存在任何限制。

CSS 与 HTML 的结合

• 外部样式：使用 link 标签来链接样式表和 HTML 文档。
• 文档样式
  • 用<style>元素包裹，且一定要是用 type 属性type="text/css"
  • 使用@import指令，必须放在样式表开头。

    <style type="text/css">
    @import url(other.css) print, projection;
    h1 {
      color:red;
    }
    </style>

• 行内/内联样式：使用style属性为单个元素指定样式。

浏览器供应商前缀

浏览器供应商 标记 CSS 属性、值作为实验或专有的一中方法

Prefix	Vendor
-epub-	epub 格式
-moz-	firefox
-ms-	IE
-o-	Opera
-webkit-	基于 webkit 内核，Safari、Chrome 等

媒体查询

可用地方：

• link 元素中 media 属性
• style 元素中 media 属性
• @import 声明中，媒体描述部分
• @media 声明中，媒体描述部分

<link type="text/css" ref="sheetstyle" href="bar.css" media="screen, print">
<style type="text/css" media="screen, print"></style>

@import url(bar.css) screen, print;
@media screen, print {
  h1 {
    color: red;
  }
}

特性查询

在某个 CSS 特性支持下应用 CSS 规则。例如，此样式块仅应用于支持、特性查询和网格布局的浏览器中，若不支持，则完全跳过样式块。

@supports (display: grid) {
  #main {
    display: grid;
  }
}