25.背景滚动视觉差效果
说明：可以滑动时候实现背景固定，页面图片切换的视觉差效果
CSS
/* 必须给祖先元素添加上才能生效 */ html,body{ height: 100%; } /* 定义盒子的高 */ div{ height: 100%; } .a{ /* 背景颜色：没有实现成功 */ /* 盒子图片，不平铺，背景固定 */ background: yellow; background: url(/图片/个人/杂物/小图片.png) no-repeat fixed; } .b{ background: rebeccapurple; background: url(/图片/个人/杂物/小图片2.png) no-repeat fixed; }
HTML 滚动覆盖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视觉差案例</title> <!-- 头部标签 --> <!-- 这是css的路径 --> <link rel="stylesheet" href="Test.css"> </head> <!-- 身体标签 --> <body> <div class="a"></div> <div class="b"></div> </body> </html>
滚动覆盖
26.CSS外边距（margin）
说明：这个边距可以设置任意模块与其他模块之间的边框距离
CSS
div{ /* 分别是上，右，下，左，一个顺时针方向 */ background-color: blueviolet; margin: 50px 20px 30px 40px; }
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>边框案例</title> <!-- 头部标签 --> <!-- 这是css的路径 --> <link rel="stylesheet" href="Test.css"> </head> <!-- 身体标签 --> <body> <div>生活就像一团火</div> </body> </html>
27.CSS内部边距，俗称模块内部宽高（padding）
说明：这个是模块内部的边距
PS：确实这个27例子和上面的26例子就这个属性值变了，其他的没有变
CSS
div{ /* 分别是上，右，下，左，一个顺时针方向 */ background-color: blueviolet; padding: 50px 20px 30px 40px; }
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>边框案例</title> <!-- 头部标签 --> <!-- 这是css的路径 --> <link rel="stylesheet" href="Test.css"> </head> <!-- 身体标签 --> <body> <div>生活就像一团火</div> </body> </html>
28.隐藏于显示属性
说明：每个元素在页面上面都有不同的显示值，大多数元素的显示值是block（块元素）或者inline（行内元素）
/* 块级元素，默认是block,如果修改为行内的默认值inline，这些就都会被挤到一行 */
/* 行元素，默认值是inlink,如果修改为块级的默认值block，显示样式就会发生变化 */
/* 隐藏起来元素，隐藏元素是隐藏起来了，该依旧占据着地方，只是我们看不见 */
/*移除了元素，移除元素就是移除了，后面的元素会向前补齐*/
块级元素与行元素
块元素（可以任意伸展）-----display:block
标题元素：
~
段落元素：
列表元素：
表格元素：
分块元素：
水平分割线：
预格式化：
图像映射：
表单元素：
行元素（内联元素）----display:inline
链接元素：
