一.编程语言大纲
服务器后端编程语言:Java、Nodejs、C++、Go、Python等
客户端开发编程语言:
- Android端:Java、kotlin
- iPhone端:OC、Swift
- iPad端:
- 网页开发:HTML、CSS、JavaScript
- Win:C#
- mac os端:OC、Swift
二.开发工具选择
[webstorm]、[sublime Text]、[visual studio code]、[atom]、[HBuilder]、[Intellij IDEA]、[Dreamweaver]等
特点:智能提示、高亮识别、语法检测、集成环境、开发效率高
1. webstorm:优点 集成开发工具,包罗万象;缺点:重(占用系统资源多)收费
2. VSCode:优点 轻(相当于一个编辑器)免费;缺点 需要安装一些插件来辅助开发
- 用到的插件:
- 中文插件:Chinese
- 颜色主题:atom one dark
- 文件夹图标:VScode Great lcons
- 在浏览器中打开网页:open in browser、live sever(自动刷新浏览器)
- 自动重命名标签:auto rename tag
- 软件的配置:
- 自动保存:文件->自动保存
- 字体大小:文件->首选项->设置 控制字体大小(font size)
- 自动换行:设置->editor:word wrap改成on
- 空格渲染方式:render whitespace改成all
- 代码缩进方式:tab size由4个字符改成2个
3. 推荐安装的软件
- Chrome浏览器:开发必备浏览器
- VScode编辑器:开发推荐编辑器(编写代码)
- XMind:思维导图笔记软件
- Typora:markdown笔记软件
三.浏览器的作用
网页的组成部分:HTML+CSS+JavaScript
浏览器最核心的部分是:“浏览器内核”
浏览器最核心的部分是渲染引擎(Rendering Engine)一般称为“浏览器内核”
- 负责解析网页语法,并渲染(显示)网页
常见浏览器内核有:
- trident(三叉戟):IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器
- gecko(壁虎):Mozilla Firefox
- presto(急板乐曲):blink(眨眼):Opera
- webkit:safari、360极速浏览器、搜狗高速浏览器、移动端浏览器
- webkit->blink:Google Chrome,edge
不同的浏览器内核有不同的解析、渲染规则,所以同一网页在不同内核的浏览器中的渲染效果也可能不同
HTML元素
一.概要(html基础)
超文本标记语言(hypertext markup language,简称HTML)是一种用于创建网页的标记语言
html元素列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/element
vscode快速html结构: [!回车]
标签元素可分为: 单标签元素/双标签元素
双标签元素:html/body/head/h2/p/a等
单标签元素:br/img/hr/meta/input等
元素中也可以拥有属性:<p class="editor-note">我是一个段落</p>
class作为属性
1. 元素属性的分类
有些属性是公共的,每个元素都可以设置
比如:class/id/title
有些属性是元素特有的,不是每一个元素都可以设置
比如meta属性的charset属性/img元素的alt属性等
2. 元素的嵌套关系
<body>
<p class="editor-note">我是一个段落</p>
<ul>
<!--快速复制上一行alt+shift+向下箭头-->
<li>
<div>
<span>aaa</span>
<span>bbb</span>
</div>
</li>
<li></li>
</ul>
</body>
3. 注释的语法
ctrl+/ 快速写注释快捷键
<!-- 注释内容 -->
二.HTML常见的元素
1. HTML结构分析
HTML最上方第一行[<!DOCTYPE html>]文本我们称之为文档类型声明,用于声明文档类型
- HTML文档声明,告诉浏览器当前页面是HTML5页面
- 让浏览器用HTML5的标准去解析识别内容;
- 必须放在HTML文档的最前面,不能省略,省略了会出现兼容性问题
lang属性=设置的语言["en"表示英文;"zh-CN"表示简体中文]
1.1 haed元素
HTML haed元素 规定文档相关的配置信息[也称为元数据],包括文档的标题,引用的样式和脚本等; 可以理解为对整个页面的配置
- 常见设置的2个元素:[title]标题; [meta]元素-charset属性设置网页的字符编码 一般为[utf-8];
<meta charset="UTF-8">
1.2 body元素
html元素列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/element
常见的元素(90%的时间都在写这几个)
- p元素/h元素
- img元素/a元素/iframe元素
- div元素/span元素
其他元素:
- ul/ol/li元素
- button元素/input元素
- table/thead/tbody/thead/th/tr/td
HTML5新增元素: 后面讲解
2. h1-h6/p元素
- h1-h6 = 标题元素
- p = 段落元素
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<p>这是一个段落</p>
<br> = 段落换号符
3. img/a/iframe元素
3.1 img元素:两个属性(src="图片的地址" alt="1.资源加载不成功时以文本显示;2.给屏幕阅读器使用")
<img src="https://123.ka81.cn/2024pic/202403111526001.jpg" alt="秀人网模特">
3.2 a元素(超链接):两个常见属性
- href="指定要打开的url地址;也可以是本地地址"
- target="_self(默认值,当前窗口打开); _blank(在新窗口打开)"
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
a元素本页面的锚点链接:
- 在跳转到的元素上添加id
- 定义a元素,并且a元素的href属性指向id
<a href="#time01">跳转到一级标题</a>
<a href="#time02">跳转到二级标题</a>
<a href="#time03">跳转到三级标题</a>
<h1 id="time01">这是一级标题</h1>
<h2 id="time02">这是二级标题</h2>
<h3 id="time03">这是三级标题</h3>
a元素与img元素结合使用: a元素中嵌套img元素即可实现
<a href="https://www.baidu.com/" target="_blank">
<img width="330" src="https://123.ka81.cn/2024pic/202403111526001.jpg" alt="秀人网模特">
</a>
a标签指向其他协议地址: mailto
<a href="mailto:123@qq.com">发邮件给123@qq.com</a>
iframe元素: 在一个网页中嵌套其他网页
<iframe src="https://www.taobao.com/" width="800" height="600" frameborder="0"></iframe>
<!-- frameborder值0和1;开启或不开启 -->
a元素target的其他值: 需要和iframe结合使用(嵌套关系下使用)
_parent:在父窗口打开
_top:在顶层窗口中打开
4. div/span元素
(特殊的;无所用无所不用)
div/span区别:div和span元素都是"纯粹的"容器, 也可以把它们理解成"盒子",它们都是用来包裹内容的
div元素: 多个div元素包裹的内容会在不同的行显示
- 一般作为其他元素的父容器,把其他元素包住,代表一个整体
- 用于把网页分成多个独立的部分
span元素:多个span元素包裹的内容会显示在同一行
- 默认情况下 根普通文本几乎没区别
- 用于区分特殊文本和普通文本,比如用来显示一些关键字
5. 不常见元素
strong元素: 内容加粗
i元素: 内容斜体(开发中偶尔会用它来做字体图标)
code元素:用于显示代码(偶尔会使用用来显示等宽字体)
br元素:用于换行
html元素列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/element
6. HTML全局属性
全局数量列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/global_attributes
6.1 常见属性:
id: 定义唯一标识符(ID),该标识符在整个文档中必须是唯一的. 其目的是在链接(使用片段标识符), 脚本或样式(css)时标识元素
class: 一个以空格分隔的元素的类名(classes)列表, 它允许css和JavaScript通过类选择器或者DOM方法来选择和访问特定的元素
style: 给元素添加内联样式CSS
title: 包含表示与其所属元素相关信息的文本. 这些信息通常可以作为提醒呈现给用户,但不是必须的
三.额外知识点补充
1. 字符实体:
定义: 段落文本中有特别的字符 会影响浏览器的解析, 此时就要用字符实体包括该内容
html实体是一段以连字号(&)开头,以分号(;)结尾的文本
2. URL的规则和URI的区别
URL代表是统一资源定位符(Uniform Resource Locator). URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说,每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面,一个 CSS 文档,一幅图像,等等。
URL标准格式:
[协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]
和uri区别
uniform resource identifier 统一资源标志符,用于标识web技术使用的逻辑和物理资源
Uniform Resource Locator 统一资源定位符,俗称网络地址 相当于网络中的门牌号
3. 元素语义化
元素语义化: 用正确的元素做正确的事情
4. SEO优化
搜索引擎优化(Search Engine Optimization) 是通过了解搜索引擎的运作规则来调整网站,以提高网站在有关搜索引擎内排名的方式
5. 字符编码
最常见的编码是(UTF-8)
其他编码: https://www.runoob.com/w3cnote/charset-encoding.html
CSS样式
一.概要(CSS基础)
1. 认识css
CSS (Cascading Style Sheets,层叠样式表)是为网页添加样式的代码
2. 编写css样式
如何将CSS样式应用到元素上?
- 内联样式
内联样式表存在于HTML元素的style属性之中
<div style="color: red; font-size: 30px;">我是div元素</div>
<h1 style="font-size: 50px;">我是一级标题</h1>
- 内部样式表
内部样式表存在于HTML页面的head元素的尾部 添加style 通过选择器定位某元素
<head>
<style>
/* 通过元素选择 */
div {
color: red;
font-size: 30px;
background-color: orange;
}
/* 通过class选择 */
.h1-one {
color: aqua;
}
</style>
</head>
<body>
<div>我是div元素</div>
<h1 class="h1-one">我是一级标题</h1>
</body>
- 外部样式表
外部样式表是将css编写在一个独立的文件中[后缀为css],并且通过元素引入[写在head尾部]进来
扩展: 在css文件夹中创建名为index.css的文件,在中通过@import url(样式路径);
引入其他css文件; 后在html引入此文件即可实现css的全部引用
3. css注释
/* 注释文本 */
vscode可通过快捷键[ctrl+/]快速注释
4. 常见的css属性
官方文档:https://www.w3.org/TR/?tag=css
查询css属性的可用性(哪些浏览器支持的属性):https://caniuse.com/
最基础最常用的css属性:
- font-size: (文字大小)
- color: (前景色/文字颜色)
- background-color: (背景色)
- width: (宽度)
- height: (高度)
<style>
.title {
font-size: 24px;
color: red;
background-color: rgb(43, 40, 40);
width: 200px;
height: 200px;
}
</style>
-- 额外知识补充
1. link元素
link元素是外部资源链接元素,规范了文档与外部资源的关系
- link元素通常写在head元素中
最常用的链接是样式表CSS
- 此外也可以被用来创建站点图标(比如"favicon"图标)
<link rel="引入类型" href="地址">
link元素常见的属性:
- href: 此属性指定被链接资源的URL. URL可以是绝对的,也可以是相对的
rel: 指定链接类型, 常见的链接类型: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/rel
- icon: 站点图标;
- stylesheet: css样式
2. 计算机进制
计算机通常采用二进制/八进制/十六进制; 通常计算机底层逻辑只有0和1组成
通俗理解: 当数字达到某个值时,进一位(比如从1位变成2位)
理解一下十进制(人们通常采用10进制): 当数字到9的时候 到10,用1位已经表示不了了,那么就进一位变成2位
3. CSS颜色表示方法
90种表达色彩的单词指南: 英语学习 - 90 种表达色彩的单词指南 | 贝立兹 (berlitz.com)
RGB颜色:
- RGB是一种色彩空间,通过R(red,红色)、G(green,绿色)、B(blue,蓝色)三原色来组成了不同的颜色; 也就是通过调整这三个颜色不同的比例,可以组合成其他的颜色;
- RGB各个原色的取值范围是0~255;
RGB表示方法:
- RGB颜色可以通过以#为前缀的十六进制字符和函数(rgb()、rgba())标记表示
方式一:十六进制符号:#RRGGBB[AA]
- R(红)、G(绿)、B (蓝)和A (alpha)是十六进制字符(0–9、A–F);A是可选的。
- 比如,#ff0000等价于#ff0000ff;
方式二:十六进制符号:#RGB[A]
- R(红)、G(绿)、B (蓝)和A (alpha)是十六进制字符(0–9、A–F);
三位数符号(#RGB)是六位数形式(#RRGGBB)的减缩版。
- 比如,#f09和#ff0099表示同一颜色。
四位数符号(#RGBA)是八位数形式(#RRGGBBAA)的减缩版。
- 比如,#0f38和#00ff3388表示相同颜色。
方式三:函数符: rgb[a]--R, G, B[, A] ---不常用
- R(红)、G(绿)、B (蓝)可以是
(数字),或者 (百分比),255相当于100%。 - A(alpha)可以是0到1之间的数字,或者百分比,数字1相当于100%(完全不透明)。
4. Chrome调试工具
打开Chrome调试工具:
- 方式一:右键– 检查
- 方式二:快捷键– F12
其他技巧:
- 快捷键:ctrl+ 可以调整页面或者调试工具的字体大小
- 可以通过删除某些元素来查看网页结构;
- 可以通过增删css来调试网页样式
5. 浏览器渲染流程
二.CSS文本的属性
1.text-decoration[装饰]
text-decoration: 用于设置文字的装饰线
1.1 text-decoration常见取值:
none: 无任何装饰线
- 可以去除a元素默认的下划线
- underline: 下划线
- overline: 上划线
- line-through: 删除线
2.text-transform[变换]
text-transform: 用于设置文字的大小写转换
2.1 text-transform 常见取值:
- capitalize: 将每个单词的首字母变为大写
- uppercase: 将每个单词的所有字母大写
- lowercase: 将每个单词的所有字母小写
- none: 没有任何影响
[实际开发中用JavaScript代码转化的更多]
3.text-indent[缩进]
text-indent: 用于设置第一行内容的缩进
"[em]单位==相对于字体的大小"
text-indent: 2em ==首行缩进2字符
4.text-align(重要)[对齐]
text-align: 设置文本的对其方式 / 定义行内内容(例如文字)如何相对它的块 父元素对其;
4.1 常见的值:
- left: 左对其
- right: 右对其
- center: 正中间对齐
- justify: 两端对其
5.word/letter-spacing[单词/字母间距]
word-spacing/letter-spacing: 用于调整单词/字母间距
三.CSS字体的属性
1.font-size[尺寸]
font-size: 决定文字的大小
1.1 常见的设置
具体数值+单位
- 比如100px
- 也可以使用em单位(不推荐): 1em代表100%,2em代表200%
百分比
- 基于父元素的font-size计算,比如50%等于父元素font-size的一半
2.font-family[字体]
font-family: 用于设置文字的字体名称
- 可以设置1个或多个字体名称
- 浏览器会选择第一个该计算机中有安装的字体
- 或者是通过[@font-face] 指定的可以直接下载的字体
3.font-weight[加粗]
font-weight: 用于设置文字的粗细
常见的取值:
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 : 每一个数字表示一个重量(粗细程度)
- normal: 等于400 (默认值)
- bold: 等于700
4.line-height[行高]
line-height: 用于设置文本的行高
注意区分height 和 line-height 的区别
- height: 元素的整体行高
- line-height: 元素中每一行文字所占据的高度
应用实例: 假设div中只有一行文字, 如何让这行文字在div内部上下居中
- 让line-height等同于height
5.其他不常用的
5.1 font-variant[变形]
font-variant: 可以影响小写字母的显示形式
可以设置的值:
- normal: 常规显示
- small-caps: 将小写字母替换为缩小过的大写字母
5.2 font-style[样式]
font-style: 用于设置文字的常规/斜体显示
常见取值:
- normal: 常规显示
- italic(斜体): 用字体的斜体显示(通常会有专门的字体)
- oblique(倾斜): 文本倾斜显示(仅仅是让文字倾斜)
6.font缩写属性
当需要设置字体多个属性时, 可以缩写font: 跟上对应值 ; 简化书写流程
font是一个缩写属性:
- font 属性可以用来作为font-style, font-variant, font-weight, font-size, line-height 和font-family 属性的简写;
- 格式: font-style font-variant font-weight font-size/line-height font-family
书写规则:
- font-style、font-variant、font-weight可以随意调换顺序,也可以省略
- /line-height可以省略,如果不省略,必须跟在font-size后面
- font-size、font-family不可以调换顺序,不可以省略
四.CSS常见选择器
--其他选择器
通用选择器:
- [*]通配符 ; 将所有的元素全部选中
* {css属性}
注: 默认在没有设置任何样式的情况下, 浏览器会默认给HTML元素增加一些css属性; 这时我们想取消这些属性, 可以在样式内设置通配属性取消这些默认值; 例:
* { margin: 0; padding: 0; } 或--- body, p, div, h2, span { margin: 0; padding: 0; }
[重要]简单选择器: 前面学习过
- 元素选择器(type selectors), 使用[元素的名称]
- 类选择器(class selectors), 使用[.类名]
id选择器(id selectors), 使用[#id]
- 强调: 在同一个HTML文档中, id不要重复, 应该是唯一的
- id值如果由多个单词组成, 单词之间可以用中划线- / 下划线_连接, 也可以使用驼峰标识
- 最好不要用标签名 作为id值
1.属性选择器-了解
通过元素中的属性名 进行选择: 使用方式"[属性名/属性名="值"]" --例
<style>
[title] {
color: red;
}
/* 或是使用具体的值 */
[title="h2"] {
background-color: blue;
}
</style>
</head>
<body>
<div>我是div元素</div>
<div title="div">我也是div元素</div>
<p>我是p元素</p>
<h2 title="h2">我是h2元素</h2>
</body>
2.后代选择器
后代选择器一: 所有的后代(包括直接或间接的后代)
- 选择器直接以空格分隔
.属性值 元素
后代选择器二: 直接子代选择器(必须是直接子代)
- 选择器之间以 > 分隔
.属性值 > 元素
3.兄弟选择器
兄弟选择器 选择的 不包括自己
兄弟选择器一: 相邻兄弟选择器
- 使用符号[+]连接
.属性值 + 元素或属性名
兄弟选择器二: 全兄弟选择器
- 使用符号[~]连接
.属性值 ~ 元素或属性名
4.选择器组
4.1 选择器组-交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)
- 在开发者通常是为了精准的选择某一元素
<style> div.one { color: red; } </style> </head> <body> <div>我是div元素</div> <div class="one">我也是div元素</div> <p>我是p元素</p> <h2 class="two">我是h2元素</h2> </body>
4.2 选择器组-并集选择器: 符合任意一个选择器条件即可(选择器直接以[,]分隔)
- 在开发中通常为了给多个元素设置相同的样式
<style> .one, .two { color: red; } </style> </head> <body> <div>我是div元素</div> <div class="one">我也是div元素</div> <p>我是p元素</p> <h2 class="two">我是h2元素</h2> </body>
5.伪类选择器
伪类选择器(简称:伪类)通过冒号来定义; 它定义了元素的状态; 如点击按下,点击完成等,通过伪类可以为元素的状态修改样式。
常见的伪类有:
动态伪类
- :link / :visites / :hover / :active / :focus
目标伪类
- :target
语言伪类
- :lang()
元素状态伪类
- :enabled / :disabled / :checked
结构伪类
- :nth-child() / :nth-last-child() / :nth-of-type() / :nth-last-of-type()
- :first-child / :last-child / :first-of-type / :last-of-type
- :root / :only-child / :only-of-type / :empty
否定伪类
- :not()
所有的伪类: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
使用举例:
动态伪类
- a:link [未访问的链接]
- a:visited [已访问的链接]
- a:hover [鼠标挪动到链接上(重要)]
- a:active [激活的链接(鼠标在链接上长按未松开的状态)]
使用注意
- :hover必须放在:link和:visited后面才能完全生效
- :active必须放在:hover后面才能完全生效
- 建议编写顺序是: :link / :visited / :hover / :active
- 输了a元素, :hover / :active也能用在其他元素上
:focus指当前 拥有输入焦点的元素(能接受键盘输入的)
- 文本输入框一聚焦后.背景就会变红色
- 应为链接a元素可以 被键盘的tab键选中聚焦, 所以:focus也适用于a元素
动态伪类编写顺序建议为:
- :link 、 :visited 、 :focus 、 :hover 、 :active
直接给 a 元素设置样式,相当于给 a 元素的所有动态伪类都设置了
- 相当于 a:link 、 a:visited 、 a:hover 、 a:active 、 a:focus 的 color 都是 red
6.伪元素(重要)
伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式; 一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后
常见的伪元素有:
- ::sirst-line
- ::first-letter
- ::before
- ::after
为了区分伪元素和伪类,建议伪元素使用 2 个冒号,比如 ::first line
::sirst-line: 可以针对首行文本设置属性
::first-letter: 可以针对首字母设置属性
例:
p::first-line
{
color:#ff0000;
font-variant:small-caps;
}
::before: 向选定的元素前插入内容
::after: 向选定的元素后插入内容
::before 和 ::after 用来在一个元素的 内容之前或之后插入其他内容 (可以是文字、图片
常通过 content 属性 来为一个元素添加修饰性的内容。
位置不好看 --简单调整
position: relative; /* 相对定位 */
left: 5px;
top: 2px;
五.CSS属性的特性
1.CSS属性的继承
在默认情况下, 某元素的子代会继承父元素的
(有些CSS属性是不能被继承的)但可以强制继承; 定位继承的子代元素-属性写
border: inherit
即可强制继承父元素CSS
CSS中的某些属性具有继承性
- 如果一个 属性具备继承性 , 那么 在该元素上设置后 , 它的 后代元素都可以继承这个属性
- 当然 , 如果 后代元素自己有设置该属性 , 那么 优先使用后代元素自己的属性 不管继承过来的属性权重多高
如何知道一个属性具有继承性呢?
- 常见的font-size/font-family/font-weigth/line-heigth/color/text-aligen 这些都具有继承性
- 这些 不用刻意去记 , 用的多自然就记住了
- 另外可以查询文档
注意:继承过来的属性是计算值,而不是设置值
2.CSS属性的层叠
一个元素设置多个属性的情况下, 首先显示权重最大的值/相同权重情况下, 会被越后(梢)的样式覆盖
CSS的翻译是层叠样式表 , 什么是(层叠)呢?
- 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置; 那么属性就会被一层层覆盖上去; 但是最终只有一个生效;
那么多个样式属性覆盖上去, 哪个会生效呢?
- 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级
- 判断二: 先后顺序, 权重相同时 后面(梢)设置的生效;
如何知道权重呢? 按照经验, 为了方便比较CSS属性的优先级, 可以给CSS属性所处的环境定义一个权重(权值):
- !important: 10000(权重最大)
- 内联样式: 1000
- id选择器: 100
- 类选择器/属性选择器/伪类: 10
- 元素选择器/伪元素: 1
- 通配符: 0(权重最小)
MDN解释表格:
3.CSS属性的类型
块级元素(独占一行): h元素/p/div元素
行内级元素(一行有多个): span/a/img/strong/i元素
display属性可更改元素的特性(跨级与行内级变换) 值为block/inline(跨级/行内级)
在前面我们会经常提到div是块级元素 会独占一行 ,span是行内级元素 会在同一行显示; 那么到底什么是块级元素, 什么是行内级元素呢?
HTML定义元素类型的思路:
- HTML 元素有很多 , 比如 h 元素 /p 元素 /div 元素 /span 元素 img 元素 /a 元素等等;
- 当我们把这个元素放到页面上时 , 这个元素到底占据页面中一行多大的空间呢? 为什么我们这里 只说一行 呢 ? 因为垂直方向的高度通常是内容决定的;
- 比如我们的h1元素的标题, 我们必然是希望它独占一行的, 其他内容不应该和我的标题放在一起;
- 比如我们的p元素的段落, 必然应该独占一行, 其它内容不应该和我的段落放在一起;
- 而类似于img/span/a元素, 通常是对内容的某一个细节的特别描述, 没有必要独占一行;
所有, 为了区分哪些元素可以独占一行, 哪些元素不需要独占一行, HTML将元素区分成了两类(本质上是通过CSS实现的(浏览器赋予的))
- 块级元素 (独占一行)
- 行内级元素 (多个行内级元素可以在同一行显示)
div/h1/p元素之所以是块级元素是因为浏览器默认设置了display属性而已
那么就可以通过display来更改元素的特性
CSS中display属性有4个常见值:
- block: 让元素显示为块级元素
- inline: 让元素显示为行内级元素
- inline-block: 让元素同时预备行内级/块级元素的特性
- none: 隐藏元素
事实上display还有其他的值,比如flex , 后面专门学习
4.display属性
块级元素可以设置宽度和高度; 行内级元素不可设置宽度和高度(img/input除外,它是行内可替换元素)
inline-block: 作为行内级元素显示 ; 可以随意设置宽高
- 对外来说, 它是行内级元素
- 对内来说, 它是块级元素
可以通过display来更改元素的特性 ; 4个常见值:
- block: 让元素显示为块级元素
- inline: 让元素显示为行内级元素
- inline-block: 让元素同时预备行内级/块级元素的特性
- none: 隐藏元素
事实上display还有其他的值,比如flex , 后面专门学习
- [x] 编写HTML时的注意事项:
块级元素 | inline-block元素
- 一般情况下,可以包含其他任何元素(如块级元素/行内级元素/inline-block元素)
- 特殊情况, p元素不能包含其他块级元素的
行内级元素(如: a/span/strong等)
- 一般情况下, 只能包含行内级元素
5.元素的隐藏(display)
方法一: display设置为none
- 元素不显示, 并且不占据位置, 不站任何空间(和不存在一样)
方法二: visibility设置为hidden
- 设置为hidden, 虽然元素不可见, 但是会占据元素空间;
- 默认值为visible, 可见的
方法三: rgba设置颜色, 将a值设置为0
- rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;
方法四: opacity设置透明度, 设置为0
- 设置整个元素的透明度, 会影响所有的子元素;
CSS样式不生效技巧:
- 选择器的优先级太低
- 选择器没选中对应的元素
CSS属性使用的形式不对
- 元素不支持此CSS属性, 比如span默认不支持width和height的
- 浏览器不支持此css属性, 比如旧版本的浏览器不支持一些css module3的某些属性
- 被同类型CSS属性覆盖, 比如font覆盖font-size
建议: 充分利用浏览器的开发者工具进行调试(增加/修改样式) 查错
6.overflow属性
如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为;
- overflow: visible (默认) -->溢出的内容照样可见
- overflow: hidden -->溢出的内容直接裁剪
- overflow: scroll -->溢出的内容被裁剪, 但可以通过滚动条查看(会一直显示滚动条区域, 滚动条区域占用的空间属于width/height)
- overflow: auto -->自动根据内容是否溢出决定是否提供滚动条
菜鸟文档: CSS overflow 属性 | 菜鸟教程 (runoob.com)
六.CSS的盒子模型
1.认识盒子模型
盒子有四个边, 所有margin(外边)/padding(内边)/border(边框)都包括top/right/bottom/left(上/右/下/左)四个边
2.内容width/heigth
HTML的内容是通过宽度和高度设置的:
- 宽度设置: width:
- 高度设置: height
注意: 对于行内级非替换元素来说, 设置宽高是无效的
另外还可以设置以下属性:
- min-width: 最小宽度
- max-width: 最大宽度
移动端适配是,可以设置最大/最小宽度
下面这两个属性不常用的:
- min-height: 最小高度
- max-height: 最大高度
3.内边距padding
内边距padding是设置内容至边框直接的间距;
包括四个值:
- padding-top :上内边距
- padding-right :右内边距
- padding-bottom :下内边距
- padding-left :左内边距
padding单独编写是一个缩写属性:
- 缩写属性是从0点钟开始顺时针转动360度, 也就是上右下左
padding并非四个值, 也可以是其他值:
4.边框/圆角border
边框相对于content/padding/margin来说特殊一些: 有三个值
- 具备宽度width
- 具备样式style
- 具备颜色color
边框宽度:
- border-top-width / border-right-width / border-bottom-width / border-left-width
- border-width 是上面的简写属性
边框颜色:
- border-top-color/ border-right-color/ border-bottom-color/ border-left-color
- border-color 是上面的简写属性
边框样式:
- border-top-style/ border-right-style/ border-bottom-style/ border-left-style
- border-style 是上面的简写属性
总简写属性: border 是宽度/颜色/样式的简写属性, 顺序随意(样式不能省)
边框样式设置值:
- solid/dashed/dotted/double/insert/outset/groove/ridge
如果我们相对某一边同时设置 宽度 样式 颜色 , 可以进行如下设置:
- border-top
- border-right
- border-bottom
- border-left
- border: :统一设置 4 个方向的边框
盒子圆角 border-radius: 常见的值:
- 数值: 通常用来设置小的圆角; 如比6px;
- 百分比: 通常用来设置一定的弧度或者圆形
border-radius 事实上是一个缩写属性:
- 将这四个属性 border-top-left-radius 、 border-top-right-radius 、 border-bottom-right-radius ,和 border-bottom-left-radius 简写为一个属性。
- 开发中比较少见一个个圆角设置
如果一个元素是正方形, 设置border-radius大于或等于50%时,就会变成一个圆
4.1.外轮廓: outline
特点: 不占用空间, 默认显示在border的外面
相关属性:
- outline-width: 外轮廓的宽度
- outline-style:取值跟border的样式一样,比如solid、dotted等
- outline-color: 外轮廓的颜色
- outline:outline-width、outline-style、outline-color的简写属性,跟border用法类似
应用实例:
- 去除a元素/input元素的focus轮廓效果(即tab标记状态)
5.外边距margin
上下两个元素同时设置margin时会出现折叠现象(如设置30px,间距应该是60,折叠后还是30); 左右不会折叠.
margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;
margin包括四个方向, 所以有如下的取值:
- margin-top:上内边距
- margin-right:右内边距
- margin-bottom:下内边距
- margin-left:左内边距
margin单独编写是一个缩写属性:
- margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左
margin也并非必须是四个值, 也可以有其他值:
上下margin的传递:
- margin-top传递: 如果块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素
- margin-bottom传递: 如果块级元素的底部线和父元素的底部线重叠,并且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素
如何防止出现传递问题?
- 给父元素设置padding-top\padding-bottom
- 给父元素设置border
- 触发BFC: 设置overflow为auto
@建议:
- margin一般是用来设置兄弟元素之间的间距
- padding一般是用来设置父子元素之间的间距
上下margin的折叠:
垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin,这种现象叫做collapse(折叠)
水平方向上的margin(margin-left、margin-right)永远不会折叠
折叠后最终值的计算规则:
- 两个值进行比较, 取较大的值
如何防止margin折叠?
- 只设置其中一个元素的margin
块级元素水平居中问题?
在一些需求中,需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block)
行内级元素(包括inline-block元素)-->水平居中:在父元素中设置text-align: center
块级元素-->水平居中:margin: 0 auto
6.盒子/文字阴影
6.1.盒子阴影: box-shadow
box-shadow属性可以设置一个或者多个阴影
- 每个阴影用
表示 - 多个阴影之间用逗号,隔开,从前到后叠加
5px 5px 5px 5px color insert
- 第1个
:offset-x, 水平方向的偏移,正数往右偏移 - 第2个
:offset-y, 垂直方向的偏移,正数往下偏移 - 第3个
:blur-radius, 模糊半径 - 第4个
:spread-radius, 延伸半径 :阴影的颜色,如果没有设置,就跟随color属性的颜色 - inset:外框阴影变成内框阴影
在线测试网站: https://html-css-js.com/css/generator/box-shadow/
6.2.文字阴影: text-shadow
text-shadow 用法类似于box-shadow ,用于给文字添加阴影效果
相当于box-shadow, 它没有spread-radius(延伸半径)的值;
在线测试网站: https://html-css-js.com/css/generator/box-shadow/
7.box-sizing
box-sizing用来设置盒子模型中 盒子宽高的行为
包含值:
- content-box(默认): 内边距+边框在盒子宽高之外
- border-box: 内边距+边框在盒子宽高之内
--额外知识点:
1.行内非替换元素的注意事项:
以下属性对行内级非替换元素不起作用
- width、height、margin-top、margin-bottom
以下属性对行内级非替换元素的效果比较特殊
- padding(内边距)上下会撑起来, 但是不占空间
- border(边框)上下会撑起来, 但是不占空间
- margin(外边框)上下的margin是不生效的