元素框知识+CSS文件和媒体查询的语法及引用方式

元素与元素框

• 概念：html 由很多的元素组成，元素显示在元素框中，即由浏览器分配一个默认的宽高；使用样式：* {outline: 1px dashed red} 查看所有的（“*”匹配所有元素标签, 虚线dashed、实线solide）元素框宽高，

• 分类：按元素框内容分类

  • 非置换元素：

    • 内容用户提供；
    • 元素框大小由浏览器分配，没有属性：width、height，默认高度自动匹配，宽度占满设备宽度，
    • 虽然可以通过样式style改变宽高，但下一个元素会从头排列在该文档中，即下一个元素垂直排列在此元素的下面；
    • 一定是双标签；

  • 置换元素：

    • 内容由外部资源提供，元素框就是占位符
    • 宽高由内容资源（如<img>的src）提供，可以设置宽高，如<img>、<input>、<a>、<strong>
    • 有单标签，也有双标签
    • 多个置换元素默认水平排列

总结：置换和非置换只是排列方式不同；元素无内容元素框宽高都为 0

元素类型

• 块级元素：默认生成一个填满父级内容区的元素框,且二侧不能有其它元素,如<div>,<p>…
• 行内元素：默认在一行文本内生成元素框,不打断所在行,如<a>,<span>…
• 行内块元素：默认在一行文本内生成元素框,不打断所在行,但支持宽高,如<img>…

浏览器根据元素类型生成不同的元素框: “块级元素框” 和 “行内元素框”

总结：非置换元素 对应 块级元素，置换元素 对应 行内元素和行内块元素

元素属性：display

• 每个元素都可以通过style="display:type控制它的显示类型,即生成什么样的”元素框”
• 每个元素有自己的默认的display值,可以重置此值来改变默认的元素框宽高

序号	属性值	描述
1	inline默认	行内元素,<span>, <a>
2	block	块级元素,<div>,<p>
3	inline-block	行内块级元素,<img>
4	list-item	块级: 列表元素,<li>
5	table	块级: 表格元素,<table>
6	flex	弹性元素
7	grid	网格元素

CSS 的基础知识

• 名词解释：Cascading Style Sheets的英文缩写：层叠样式表；
• 作用：能改变一个或一组元素、文档（包括但不限于 html 文档）的表现样式

引用 css ：

• link标签 ： 外部样式，<link rel="stylesheet" href="..." />，引用外部 css 文件；
• @import指令：外部样式，@import url(...) | @import '...' ：可以在外部 css 文件中使用（嵌套另一个外部样式文件，样式重复时会被后面的覆盖），也可在内部样式<style>元素中使用；
• <style>元素：内部样式，在 html 中使用；
• style=""属性：行内样式，元素中直接使用 sytle 属性；

css 的使用：

• 语法:

/* selector ：选择器: 元素选择器、类选择器、id选择器 */
selector {
  /* property 属性，多个关键字时, 必须使用空白符分开； value： 值 */
  property: value;
  ...;
}

厂商前缀

• -moz-、 -ms- 、-o- 、-webkit-、-epub-

媒体查询

• 使用方式：

  • <link>：<link media="screen,print">
  • <style> ：<style media="screen,print">
  • @import：@import url(...) screen,print;
  • @media: @media screen,print {...}

• 语法举例：

/* 局部媒体查询,当屏幕宽度小于400px,不要显示菜单了 */
@media screen and (max-width: 400px) {
  .nav ul {
    display: none;
  }
}
/* 总结语法： */
@media type, ..., type not (媒体描述符 : 值) and (媒体描述符 : 值)｛
    selector｛
     property: value;
     ...;
    }
｝

• 设置浏览器使用指定的样式表的媒体

• 分类：

  • all：所有媒体类型,即不限制；
  • print：打印机,预打印预览使用
  • screen：屏幕,如浏览器等用户代理
  • projection: 幻灯片

  多种媒体类型之间使用逗号分隔: @media screen, print

媒体描述符

• 配合媒体类型使用：达到精准限制的目的

• 类型：

---

序号	媒体描述符	描述
1	width	显示区域宽度
2	min-width	显示区域最小宽度
3	max-width	浏览器显示区域的最大宽度,通常用于 PC 端
4	device-width	设备显示区域宽度
5	min-device-width	设备显示区域最小宽度
6	max-device-width	设备分辨率的最大宽度,通常用于移动端
7	height	显示区域高度
8	min-height	显示区域最小高度
9	max-height	显示区域最大高度
10	device-height	设备显示区域高度
11	min-device-height	设备显示区域最小高度
12	max-device-height	设备显示区域最大高度

• 多个媒体描述符使用“逻辑关键字”：and、not;一起使用时，not写在and前面
  总结：媒体查询的作用就是同一个文档根据媒体、设备类型的不同（宽高的不同）加载出不同的内容