HTML + CSS

一、设置背景-background-position background-position 用于设置背景图片在水平、垂直方向上的具体位置，可以设置具体的值，如 20px 30px，水平和垂直方向上还

一、设置背景-background-image 在开发中，为了让网页更加美观，我们经常会设置各种各样的背景，比如 background-image 属性用于设置元素的背景图片，这个背景图片会盖在 ba

一、实现 B 站首页的视频 item 补充01：当标题内容较多的时候隐藏超出的内容 当描述内容很多时，我们需要设置多余的内容在一行或者两行显示，并且多处的内容使用省略号来代替，我们可以先给视频的描述信

一、实现 B 站首页的视频 item 除了电商网站商品列表中的一个商品可以看做一个盒子外，许多视频网站首页上的一个个视频也可以看做是一个盒子，比如 B 站首页上的一个视频： 接下来我们就来实现这个 i

一、实现小米官网首页的商品 item 第五步：增加商品描述并设置样式 商品标题下面是商品的描述信息，这里我们使用 p 元素来表示，在 HTML 页面中添加 p 元素，具体 HTML 页面的代码如下：

一、实现小米官网首页的商品 item 在前面学习完了 HTML 的盒子模型之后，我们可以尝试实现一些实际的案例，在电商系统的商品展示页面上的商品，我们可以将它们看做一个盒子，比如小米商城官网上的商品列

一、盒子属性在行内非替换元素中的特殊性 盒子模型的一些属性如 内容宽度 width、高度 height、上外边距 margin-top、和 下外边距 margin-bottom 对于行内非替换元素如

一、盒子模型-外轮廓 outline outline 表示元素的外轮廓属性，元素的外轮廓属性不占据空间，默认显示在 border 边框的外边，与 border 属性类似，outline 属性也是一个缩

一、盒子模型-margin的折叠 垂直方向上相邻的两个 margin（margin-top、margin-bottom）有可能会合并成为一个 margin，这种现象叫做 collapse 折叠；水平方

一、盒子模型-外边距 margin CSS 的 margin 属性用于设置盒子的外边距，通常用于设置元素和元素之间的间距，和 padding 类似 margin 也有四个方向的间距值，分别是： mar

一、CSS 盒子模型-边框 border 属性用于设置盒子的边框，盒子边框在 HTML 页面中的应用非常多 border 边框相对于 content、padding 和 margin 来说特殊一些，b

一、CSS 盒子模型 HTML 中的每一个元素都可以看做是一个盒子，这个盒子具备以下四个属性： 内容（content）：元素的内容 width/height 内边距（padding）：内容和元素之间的

一、HTML 元素编写的注意事项 对于块级元素和 inline-block 元素，可以包含其他任何元素，包括块级元素、行内级元素、inline-block 元素，一个特殊的情况是，p 元素作为块级元素

一、HTML 元素类型 前面我们经常提到 div 是块级元素会独占一行，span 元素是行内级元素会在同一行显示。那么到底什么是块级元素什么是行内级元素？ HTML 是如何定义元素类型的？ HTML

一、CSS 属性的特性-继承性 CSS 的某些属性具有继承性，如果一个 CSS 属性具备继承性，那么在该元素上设置可继承的属性后，他的后代元素都可以继承这个属性，如果后代们元素也设置该属性，那么优先使

一、伪类 Pseudo-classes 即 伪类，伪类也是选择器的一种，它用于选择处于特定状态的元素，比如当鼠标放在一个元素上时，元素的文本会变色或者图片会变大等。 当鼠标放到任何一个 div 元素上

一、CSS 常见选择器 属性选择器 当使用属性选择器定位元素时，首先要确定目标元素拥有的属性，使用 [attr] 来表示具有某个属性，使用 [attr=val] 表示元素的属性名和属性值，例如 [ti

一、CSS 选择器 在前面的开发中我们已经通过 CSS 选择器为一些元素设置样式，CSS 选择器就是按照一定的规则筛选出符合条件的元素，为之添加 CSS 样式。 CSS 选择器有非常多的种类，大概分为

一、CSS 字体属性 CSS 字体属性包含以下几个常用的属性，包含了： font-size：设置文字的大小 font-family：设置字体形式 font-weight：设置字体的宽度 font-st

一、CSS 文本属性 CSS 中的文本属性的名称都是 text-*，常见的 CSS 文本属性包含以下几个： text-decoration text-transform text-indent tex