Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:你是10期学员吗? 作业很多
类型 | 内容 | 举例 |
---|---|---|
置换元素 | 元素框内容由外部资源提供 | <img> <input>... |
非置换元素 | 元素框内容由用户提供,浏览器生成 | <p> <h1> <span>... |
种类 | 特征 | 举例 |
---|---|---|
行内元素 | 默认在一行文本内生成元素框,不打断所在行 | <span> <a> |
块级元素 | 默认生成一个填满父级内容区的元素框,且二侧不能有其它元素 | <p> <div> |
行内块元素 | 默认在一行文本内生成元素框,不打断所在行,但支持宽高 | <img> |
<span style="display:block">
常用的 display 属性值
值 | 含义 |
---|---|
block | 块级元素 |
inline | 行内元素 |
inline-block | 行内块元素 |
list-item | 列表元素(块级) |
table | 表格元素(块级) |
flex | 弹性元素 |
grid | 网格元素 |
元素与元素类型转换代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>元素与转换</title>
<style>
* {
outline: 1px dashed red;
}
</style>
</head>
<body>
<!-- 非置换元素是双标签 -->
<p>p标签是一个非置换元素(双标签)</p>
<!-- 置换元素单双标签都有 -->
<a href="demo1.html">a标签是一个置换元素(双标签)</a>
<img src="img/1.png" />
<hr />
<!-- 行内元素不能设置宽高,与其他元素共存于一行
块级元素和行内块元素能设置宽高,区别在于能否与其他元素共存一行 -->
<h1>h1标签定义的是一个块元素</h1>
<span>span定义的行内元素会跳转到下一行</span>
<!-- img是一个行内块元素,可以设置宽高,与span共存于一行 -->
<img src="img/2.jpg" style="width: 150px;" />
<hr />
<!-- 使用display属性转换元素类型 span转化为块级 p转化为行内块 -->
<span style="display: block;">span转化为块级元素</span>
<span>这是一个行内元素</span>
<p style="display: inline-block; height: 100px;">p转化为行内块元素</p>
</body>
</html>
html 文档中导入 css 样式有四方法:
| 方法 | 使用 |
| —————————- | ——————————————————————- |
| import 导入外部样式 | @import 'demo.css'
或@import url(demo.css)
|
| link 导入外部样式 | <link rel="stylesheet" href="demo.css"/>>
|
| 内部样式 | 使用<style>...</style>
定义的样式 |
| 内联样式 | 写在标签内部<tag style="xxx">
|
selector {property: value;...}
选择器 | 使用方法 |
---|---|
标签选择器 | p{color:red; } |
类选择器 | .class{padding: 0;} |
id 选择器 | #id{border: 1px;} |
css 样式规则与使用方法代码示例
/* css1 */
/* 导入外部样式 */
@import "2.css";
ul {
border: 1px solid black;
padding: 10px 25px 10px;
background: #b9ffff;
}
ul > li {
color: blueviolet;
}
/* css2 */
h2 {
color: #ff0000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css样式规则与使用方法</title>
<!-- 外部样式 -->
<link rel="stylesheet" href="css/1.css" />
<!-- 内部样式 -->
<style>
ul :first-child {
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2>css样式规则与使用方法</h2>
<ul>
<!-- 使用内联样式 -->
<li style="color: royalblue;">标签选择器 p{color:red; }</li>
<li style="color: sandybrown;">类选择器 .class{padding: 0;}</li>
<li style="color: springgreen;">id 选择器 #id{border: 1px;}</li>
</ul>
</body>
</html>
厂商前缀:各浏览器厂商用来测试专属规则的,具有实验性和先进性
得到用户广泛认可的厂商前缀规则, 是有可能进入 W3C 标准的
常用厂商前缀:
序号 | 前缀 | 描述 |
---|---|---|
1 | -moz- |
基于Mozilla 的浏览器,如FireFox (火狐) |
2 | -ms- |
基于微软Internet Explorer 的浏览器 |
3 | -o- |
基于Opera (欧朋)的浏览器 |
4 | -webkit- |
基于WebKit 内核的浏览器,如Chrome ,Safari |
5 | -epub- |
基于国际数字出版论坛制定的格式 |
/* 注释内容 */
序号 | 场景 | 描述 |
---|---|---|
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: 500px
print and (color)
and
和 not
and
表示多个”媒体描述符”必须同时满足, 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="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>媒体查询</title>
<style>
.nav {
height: 50px;
background-color: #eee;
display: flex;
align-items: center;
}
.nav ul {
display: flex;
list-style: none;
}
.nav ul a {
color: #666;
text-decoration: none;
padding: 0 15px;
}
body {
background-color: #ffff80;
}
@media screen and (max-width: 600px) and (min-width: 400px) {
body {
background-color: #59ffff;
}
}
@media screen and (max-width: 400px) {
.nav > ul {
display: none;
}
}
</style>
</head>
<body>
<div class="nav">
<div class="log">LOGO</div>
<ul>
<li>
<a href="">首页</a>
<a href="">视频</a>
<a href="">问答</a>
<a href="">下载</a>
</li>
</ul>
</div>
<h1>
这是一个媒体查询案例,在页面宽度为400px,600px时背景色发生变化,导航菜单在宽度小于400px时消失
</h1>
</body>
</html>