收藏
天蓬老师批改状态：合格
老师批语：完成的很好, 很认真
[toc]
| 序号 | 内容 | 描述 |
|---|---|---|
| 1 | 文档流的结构 | 把页面分为一行一行的，其中块元素单独占一行，而相邻的行内元素则从左到右排成一行直到该行排满 |
| 2 | 脱离文档流 | 将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位 |
| 3 | 如何脱离文档流 | 1）float 浮动：浮动会脱离文档流而不会脱离文本流，其他盒模型中的文字还是会为其让出位置，> 环绕在其周围；<br> 2）absolute/fixed 绝对定位：绝对定位会使元素脱离文档流同时脱离文本流，其他盒模型元素和其中的文字的排列都会忽略它 |
| 4 | 文本流 | 文本流和文档流的定义本质是相同的，文档流是相对于盒子模型讲的，而文本流是相对于 HTML 中的文字段落来讲的。概括的说就是文档对一系列字符的读取和输出的顺序，和文档流一样自上而下，从左至右排列 |
| 序号 | 类型 | 特点 | 例子 |
|---|---|---|---|
| 1 | 块级元素 | 1.形状：以块的形式显示为一个矩形区域<br>2.空间：新起并独占一行<br>3.排列：自上而下<br>4.宽高设置：自定义<br>5.内外边距设置：自定义<br>6.囊括：可以包含行内元素和其他块级元素 | <div>、<p>等 |
| 2 | 行内元素 | 1.形状：无形状<br>2.空间：和其他行内元素同处一行<br>3.排列：并排，从左至右<br>4.宽高设置：无法自定义，宽高由内容决定<br>5.内外边距设置：仅左右内外边距可以设置<br>6.囊括：只能嵌套内联元素，不能嵌套块元素 | <a>、<input>等 |
| 3 | 行内块元素 | 1.形状：以块的形式显示为一个矩形区域<br>2.空间：和其他行内元素同处一行<br>3.排列：并排，从左至右<br>4.宽高设置：自定义内外边距设置：自定义 | <img> 等 |
| 序号 | 值 | 描述 |
|---|---|---|
| 1 | inline |
行内元素 |
| 2 | block |
块级元素 |
| 3 | inline-block |
行内块元素 |
| 4 | list-item |
会当做列表显示的元素 |
| 5 | table |
块级表格显示 |
| 6 | flex |
弹性伸缩盒 |
| 7 | grid |
块级网格显示 |
| 序号 | 选择器 | 描述 | 格式 |
|---|---|---|---|
| 1 | * |
选择所有元素 | * |
| 2 | element |
选择指定元素名称的元素 | element |
| 3 | > |
选择所有父级是元素 1 的元素 2 元素 | ele1 > ele2 |
| 序号 | 内容 | 描述 | 分类 |
|---|---|---|---|
| 1 | <link> |
使用 link 标签导入 | 外部导入 |
| 2 | @import |
使用 import 指令导入 | 外部导入 |
| 3 | <style> |
使用 style 标签编辑 | 当前页面编辑，只有当前页面有效 |
| 4 | style |
使用 style 属性编辑 | 当前元素编辑，只有当前元素有效 |
| 序号 | 场景 | 描述 |
|---|---|---|
| 1 | <link> |
<link media="screen,print"> |
| 1 | <style> |
<style media="screen,print"> |
| 1 | @import |
@import url(...) screen,print; |
| 1 | @media |
@media screen,print {...} |
媒体类型是不同媒体的标识符
| 序号 | 类型 | 描述 |
|---|---|---|
| 1 | all |
所有媒体类型,即不限制 |
| 2 | print |
打印机,预打印预览使用 |
| 3 | screen |
屏幕,如浏览器等用户代理 |
| 4 | projection |
幻灯片 |
多种媒体类型之间使用逗号分隔:
@media screen, print
min-width: 500pxprint and (color)and 和 notand表示多个”媒体描述符”必须同时满足, not则是整个查询取反,且必须写在and前面常用 “媒体描述符”(显示区域相关)
| 序号 | 媒体描述符 | 描述 |
|---|---|---|
| 1 | width |
显示区域宽度 |
| 2 | min-width |
显示区域最小宽度 |
| 3 | max-width |
显示区域最大宽度 |
| 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 |
设备显示区域最大高度 |
max-width与max-device-width区别:
max-width: 浏览器显示区域宽度,与设备无关,通常用于 PC 端max-device-width: 设备分辨率的最大宽度,通常用于移动端
<!DOCTYPE html><html lang="zh_hans"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>行内、块级和行内块元素</title><style>#box {width: 700px;height: 300px;background-color: antiquewhite;margin: 0 auto;}p {background-color: aquamarine;}a {background-color: cornflowerblue;}img {width: 100px;height: 60px;}</style></head><body><div id="box"><p>p标签：这是一个块级元素</p><a href="#">链接1</a><a href="#">链接1</a><a href="#">a标签是一个行内元素</a><a href="#">后面的img标签是一个行内块元素</a><imgsrc="https://img.php.cn/upload/image/633/168/482/1586144841178242.png"/></div></body></html>
<!DOCTYPE html><html lang="zh_hans"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>媒体查询</title><style>body {background-color: cornsilk;}/*宽度大于或等于414px有效*/@media screen and (min-width: 414px) {body {background-color: pink;}h1 {color: rosybrown;}}</style></head><body><h1>你好，世界</h1></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
