web复习（三）

一、用 CSS 设置图片效果

1. 设置图片边框

1.1 基本属性

可以使用 border 属性为图片添加简单的边框。

示例：

1.2 为不同的边框设置不同的样式

可以分别为图片的上、下、左、右边框设置不同的样式。

示例：

2. 图片缩放

可以通过设置图片的 width 和 height 属性来缩放图片，同时使用 transform 属性的 scale() 函数。

示例：

HTML

预览

复制

3. 图文混排

3.1 文字环绕式

使用 float 属性使文字环绕图片。

示例：

3.2 设置图片与文字的间距

通过 margin 属性设置图片与文字的间距。

示例：

4. 设置图片与文字的对齐方式

4.1 横向对齐

使用 margin 属性使图片水平居中。

示例：

4.2 纵向对齐

使用 vertical-align 属性设置图片与文字的纵向对齐。

示例：

二、盒子模型

1. 盒子与模型的概念探究

CSS 盒子模型是一个矩形布局模型，用于描述元素在页面上的表现。每个元素都是一个矩形框，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

2. 设置图片边框

设置边框样式

使用 border 属性设置边框的样式，包括宽度、样式和颜色。

示例：

属性值的简写形式

可以使用简写形式同时设置边框的宽度、样式和颜色。

示例：

3. 设置图片内边距

使用 padding 属性设置图片内边距。

示例：

4. 设置图片外边距

使用 margin 属性设置图片外边距。

示例：

5. 盒子之间的关系

HTML 与 DOM

HTML 元素在 DOM 中形成树状结构，每个元素都是一个节点，拥有自己的盒子模型。

标准流

元素按照文档顺序在页面上依次排列，块级元素独占一行，行内元素依次排列。

 标记与  标记

是块级元素，用于分组和布局； 是行内元素，用于文本和小部分样式。

HTML

    这是一个 span 元素

6. 盒子在标准流中的定位原则

行内元素之间的水平外边距

行内元素之间的水平外边距会合并。

块级元素之间的竖直外边距

块级元素之间的竖直外边距可能会合并。

嵌套盒子之间的外边距

嵌套盒子之间的外边距不会合并。

margin 属性可以设置为负数

负外边距可以用来重叠元素。

7. 盒子模型相关的常用样式属性

背景

使用 background 属性设置元素背景。

示例：

HTML

圆角

使用 border-radius 属性设置元素圆角。

示例：

阴影

使用 box-shadow 属性设置元素阴影。

示例：

渐变

使用 background 属性设置渐变背景。

示例：