元素与元素框
- 概念：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-
媒体查询
使用方式：
语法举例：
/* 局部媒体查询,当屏幕宽度小于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前面
总结：媒体查询的作用就是同一个文档根据媒体、设备类型的不同（宽高的不同）加载出不同的内容