html及css易忘知识点

• html及css易忘知识点

• • 1.css溢出

• 2.背景（背景图像，属性）

• 3.Css组合器

• 4.不透明度

• 5.伪类（专门针对于链接属性设置）

• 6.阴影

• 7.box-shadow 属性

• 8.Flexbox

• 9.表单（input等）

• • input元素

1.css溢出

---

溢出overflow

2.背景（背景图像，属性）

---

背景background

3.Css组合器

---

组合器

4.不透明度

---

不透明度

img {

opacity: 0.5;

}

img:hover {

opacity: 1.0;

}

值越低，图像越透明

5.伪类（专门针对于链接属性设置）

---

伪类

/* 未访问的链接 */

注意：这些链接样式的设置，只在第一次设置起作用。如果你点击过后，继续刷新页面，是不会重新出现效果的。

如果想重新看到效果，必需重新打开浏览器才可以看到效果。

a:link {

color: #FF0000;

}

/* 已访问的链接 */

a:visited {

color: #00FF00;

}

/* 鼠标悬停链接 */

a:hover {

color: #FF00FF;

}

/* 已选择的链接 */

a:active {

color: #0000FF;

}

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

6.阴影

---

shadow

1.text-shadow 属性为文本添加阴影。

例如：

h1 {

text-shadow: 2px 2px 5px red;

}

参数依次代表：水平距离 垂直距离 模糊距离 阴影颜色

2.多个阴影

如需在文本中添加多个阴影，您可以添加以逗号分隔的阴影列表。

h1 {

text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

}

7.box-shadow 属性

---

div {

box-shadow: 10px 10px 5px grey;

}

参数依次代表：水平距离 垂直距离 模糊距离 阴影颜色

8.Flexbox

---

flexbox

CSS Flexbox 布局模块

在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：

块（Block），用于网页中的部分（节）

行内（Inline），用于文本

表，用于二维表数据

定位，用于元素的明确位置

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

示例代码：