码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift

  • 前端知识大全之CSS

    目录

     一、概念讲解

    学习CSS之前必学的HTML （超链接）

    二、正文代码

    1.行内样式

     2.内部样式（选择器）

    3.外部样式

     4.样式的优先级

    5.简单选择器之定义单个标签（id）

    6.简单选择器之定义多个标签（class）

    7.简单选择器之全部选择(*)

     8.组合选择器（div 标签）

    9.选择器之鼠标行为（link、visited、hover、active）

     10.伪元素选择器

     11.属性选择器（精确查找）

    12.文本大小写的转换与颜色设置（transform ）

    13.文字水平对齐

    14.图片与文字之间垂直对齐（vertical-align）

    15.文字和文字与行和行的间距 

     16.文字之线条样式（text-decoration）

    17.字体的样式与大小（font-family、font-size） 

    18.字体倾斜和粗细的样式（ font-style、font-weight）

    19.谷歌字体和Icon图标

    20.各种小图标的网站(Icon)

     21.选择器的优先级

    22.文本的边框（border） 

    23.无序列表和有序列表和图片标记 （list-style-type、ist-style-image）

     24.CSS背景属性设置(background)

    25.背景滚动视觉差效果 

     26.CSS外边距（margin）

     27.CSS内部边距，俗称模块内部宽高（padding）

    28.隐藏于显示属性

    29.内容溢出处理方式(overflow)

    30.悬浮样式（float）

    31.避开浮动样式 （clear）

     32.CSS布局之宽高自适应

    33.数学函数calc 

    三、前端学习查文档网站

    四、JavaScriipt大全

    前言必读👇！！！

    读者手册（必读）_云边的快乐猫的博客-CSDN博客

     一、概念讲解

    学习CSS之前必学的HTML （超链接）

    1.CSS（Cascading Style Sheets）

    CSS是前端的一个重要的组成部分，可以给HTML这个进行化妆起到美化的作用。

    二、正文代码

    1.行内样式

    说明：这样定义也叫内联样式，这种方式不推荐

    	<h1 style="color:red; text-align:center;">我是标签h1>

     2.内部样式（选择器）

    弊端：只能作用与一个页面，页面多了还要不断的上下滚动代码进行修改

    说明：这样设计是为了html标签结构和css样式相分离，容易整体操控

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>测试title>
    9. 	
    10. 	<style>
    11. 		body{background-color:darkturquoise;}
    12. 		h1{color: khaki;}
    13. 	style>
    14. head>
    15. <body>
    16. 	<h1>王者荣耀h1>
    17. 	<p>今天是个好日子p>
    18. body>
    19. html>

    3.外部样式

    说明：外部样式把css放在一个独立的文件中，使html和css样式独立开来

    优点：可以把这个css样式给多个html页面使用

    CSS

    1. /* 该文件名为QQ.css */
    2. body {
    3.     background-color:darkturquoise;
    4.     }
    5.     
    6.     h1 {
    7.         color:khaki;
    8.     }

    HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>测试title>
    9. <link rel="stylesheet" href="D:\前端\练习包\标签练习\QQ.css">  
    11. head>
    12. <body>
    13. 	<h1>王者荣耀h1>
    14. 	<p>今天是个好日子p>
    15. body>
    16. html>

     4.样式的优先级

    就近原则，哪个距离最近就使用哪个的样式

    5.简单选择器之定义单个标签（id）

    ID选择器给每个标签都自定义样式

     说明：先在要被修饰的伸腿标签里面定义一个唯一的id，然后在头部标签的style中#id设置样式

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>测试title>
    9.  
    10. <style>
    11. 	#para1{
    12. 	text-align:center;
    13. }
    14.  
    15. #para2{
    16. 	color:red;
    17. }
    18. style>  
    19. head>
    20.  
    22. <body>
    23. 	<h1 id="para1">王者荣耀h1>
    24. 	<p id="para2">今天是个好日子p>
    25. body>
    26. html>

    6.简单选择器之定义多个标签（class）

    说明：在身体body里面的多个标签里面批量添加class=自定义名字，然后在头部head里面.自定义名字进行设置样式

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>测试title>
    9.  
    10. <style>
    11. .cpdd{
    12. 	color: red;
    13. }
    14. style>  
    15. head>
    16.  
    18. <body>
    19. 	<h1 class="cpdd">王者荣耀h1>
    20. 	<p class="cpdd">今天是个好日子p>
    21. body>
    22. html>

    7.简单选择器之全部选择(*)

    说明：这个应用在头部标签的最开头，一个*号就好了，然后在括号里面定义全部标签的语句

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>测试title>
    9. <style>
    10. 	*{
    11. 		text-align: center;
    12. 	}
    13. style>  
    14. head>
    15.  
    17. <body>
    18. 	<h1 class="cpdd">王者荣耀h1>
    19. 	<p class="cpdd">今天是个好日子p>
    20. body>
    21. html>

     8.组合选择器（div 标签）

    说明，在css样式里面选择div盒子里面要定义的标签，进行定义就好了

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>测试title>
    9. <style>
    10. div h1 {
    11. 	color: blueviolet;
    12. }
    13. style>
    14. head>
    15.  
    17. <body>
    18. 	<div>
    19. 		<h1 class="cpdd">王者荣耀h1>
    20. 		<p class="cpdd">今天是个好日子p>
    21. 	div>
    22.  
    23. body>
    24. html>

    9.选择器之鼠标行为（link、visited、hover、active）

    说明：别称叫伪类选择器。主要应用在超链接上，偶尔也会用在其他标签上。冒号和鼠标后面的行为，没有空格，必须连接在一起

    ps：其他标签只能用hover、active

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>测试title>
    9. <style>
    10. /* 鼠标点击前 */
    11. a:link{
    12. 	color: red;
    13. }
    14. /* 鼠标点击后，再移除鼠标 */
    15. a:visited{
    16. 	color: green;
    17. }
    18. /* 鼠标放上去时候 */
    19. a:hover{
    20. 	color: yellow;
    21. }
    22. /* 鼠标点击瞬间 */
    23. a:active{
    24. 	color: skyblue;
    25. }
    26. style>
    27. head>
    28.  
    30. <body>
    31. <a href="#">这是超链接a>
    32. body>
    33. html>

     10.伪元素选择器

    说明：可以设置元素的指定部分的样式，主要用来设置元素内文本的首行、首字母、在元素之前或者之后插入其他内容

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>CSS伪元素选择器title>
    9. <style>
    10. 	
    11. h1::first-letter{
    12. 	/*1. 这是定义标签的首字母的样式 */
    13. 	color: red;
    14. }
    15.  
    16. h2::first-line{
    17. 	/*2. 定义文本的首行样式 */
    18. 	color: blue;
    19. }
    20.  
    21. h3::before{
    22. 	/*3. 向文本前插入内容样式，必须配合content使用 */
    23. 	content: "我是向前添加的！！";
    24. }
    25.  
    26. h3::after{
    27. 	/*4. 向文本后插入内容样式，必须配合content使用 */
    28. 	content: "我是向后添加的！！";
    29. }
    30. style>
    31. head>
    32.  
    34. <body>
    35. <h1>用来实现元素内的第一个字符添加样式声明h1>
    36. <h2>这是用来实现文本第一行的样式声明的h2>
    37. <h3>王者荣耀h3>
    38. body>
    39. html>

     11.属性选择器（精确查找）

    说明：可以精确定义要设置的属性进行定义。在头部的标签中定义该属性的定位就可以了

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>属性选择器title>
    8.     
    9.     
    10.     <style>
    11.         [class="s"]{
    12.             color: blueviolet;
    13.         }
    14.     style>
    15. head>
    17. <body>
    18.     <h1 class="s">我是h1h1>
    19.  
    20.     <h2>我是h2h2>
    21.  
    22.     <p class="s">我是p标签p>
    23. body>
    24. html>

    12.文本大小写的转换与颜色设置（transform ）

    说明使用transform可以设置文本的大小写与首字母转换，前提是只能转换英文的，中文的转换不了

    CSS

    1. /* 示例：设置h1标签的颜色 */
    2. p{
    3.     color: blueviolet;
    4. }
    5. /* 示例：仅对英文生效!!! */
    6. p.transform{
    7.     /* 把p标签英文变成大写 */
    8. text-transform: uppercase;
    9.  
    10.     /*把p标签英文变成小写   */
    11. text-transform: lowercase;
    12.  
    13.     /* 把p标签首字母变成大写 */
    14. text-transform: capitalize;
    15. }

     HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>文本转换大小写title>
    8.     
    9.     
    10.     <link rel="stylesheet" href="Test.css">
    11. head>
    13. <body>
    14.     <p class="transform">我是aa<p>
    15.  
    16.     <p class="transform">我是BB<p>
    17.  
    18.     <p class="transform">我是ccp>
    19. body>
    20. html>

    13.文字水平对齐

    说明：可以使文字向左、右、居中、水平两侧对齐

    CSS

    1. /* 文本对比方式 */
    2. p.a{
    3.     /* 左 */
    4.     text-align: left;
    5. }
    6. p.b{
    7.     /* 中 */
    8.     text-align: center;
    9. }
    10. p.c{
    11.     /* 右 */
    12.     text-align: right;
    13. }
    14. p{
    15.     /* 左右两侧都对齐 */
    16.     text-align: justify;
    17. }

    HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>文本转换大小写title>
    8.     
    9.     
    10.     <link rel="stylesheet" href="Test.css">
    11. head>
    13. <body>
    14.     <p class="a">p标签一号<p>
    15.  
    16.     <p class="b">p标签二号<p>
    17.  
    18.     <p class="c">p标签三号p>
    19.  
    20.     <p>p标签四号,大家可以加一下我的公众号，”云边的快乐猫“p>
    21. body>
    22. html>

     

    14.图片与文字之间垂直对齐（vertical-align）

    说明：主要用来设置文字的垂直对齐，一般有图片对照看着才更直观

    有顶部、底部、上角标、下角标对齐

    CSS

    1.  
    2. img.a{
    3.     /* 基于图片顶部对齐 */
    4.     vertical-align: text-top;
    5. }
    6.  
    7. img.b{
    8.     /* 基于图片底部对齐 */
    9.     vertical-align: text-bottom;
    10. }
    11.  
    12. img.c{
    13.     /* 基于图片上角标对齐 */
    14.     vertical-align: sub;
    15. }
    16.  
    17. img.d{
    18.     /* 基于图片下角标对齐 */
    19.     vertical-align: super;
    20. }

    HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>文本转换大小写title>
    8.     
    9.     
    10.     <link rel="stylesheet" href="Test.css">
    11. head>
    13. <body>
    14.     <p ><img src="/图片/壁纸/111.jpg" alt="width=50" height="50" class="a">  p标签一号<p>
    15.  
    16.     <p  class="b"><img src="/图片/壁纸/111.jpg" alt="width=50" height="50" class="b">p标签二号<p>
    17.  
    18.     <p class="c"><img src="/图片/壁纸/111.jpg" alt="width=50" height="50" class="c">p标签三号p>
    19.  
    20.     <p class="d"><img src="/图片/壁纸/111.jpg" alt="width=50" height="50" class="d">p标签四号,大家可以加一下我的公众号，”云边的快乐猫“p>
    21. body>
    22. html>

    15.文字和文字与行和行的间距 

    CSS

    1. h1{
    2.     /* 示例：字体间距 */
    3.     letter-spacing: 10px;
    4. }
    5.  
    6. /* 示例：行与行的间距 */
    7. p{
    8.     line-height: 100px;
    9. }

    HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>行间距title>
    8.     
    9.     
    10.     <link rel="stylesheet" href="Test.css">
    11. head>
    13. <body>
    14.     <h1>我是h1标签h1>
    15.     <p>p标签一号p>
    16.     <p>p标签二号p>
    17. body>
    18. html>

     16.文字之线条样式（text-decoration）

    说明：

    （必须有）线条种类：实线----solid、双实线----double、圆点线----dotted、虚线----dashed、波浪线----wavy

    （根据需求可有可无）线条位置：上划线---overline、删除线---line-through、下划线---underline

    （根据需求可有可无）线条颜色：自定义

    （根据需求可有可无）线条大小：自定义

    CSS

    1. /* 线条种类 实线----solid、双实线----double、圆点线----dotted、虚线----dashed、波浪线----wavy*/
    2. h1{
    3.     /*overline:上划线  可设置线条颜色  双实线  线条大小*/
    4.     text-decoration: overline blueviolet double  5px;
    5. }
    6.  
    7. h2{
    8.     /*  line-through：删除线  可设置线条颜色  虚线 线条大小*/
    9.     text-decoration: line-through blueviolet dashed 2px;
    10. }
    11.  
    12. h3{
    13.     /* underline：下划线  可设置线条颜色  波浪线 线条大小*/
    14.     text-decoration: underline blueviolet wavy 5px;
    15. }

    HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>行间距title>
    8.     
    9.     
    10.     <link rel="stylesheet" href="Test.css">
    11. head>
    13. <body>
    14.     <h1>我是h1标签h1>
    15.     <h2>我是h2标签h2>
    16.     <h3>我是h3标签h3>
    17. body>
    18. html>

    17.字体的样式与大小（font-family、font-size） 

    说明：要看支持什么字体可以在浏览器的右上角的三个小点--设置--外观--自定义字体里面查看

    字体样式

    /* 带头角----serif、现代简约----sans-serif、等宽字体--monospace、草书字体---cursive、装饰性字体----fantasy、草书字体---BrushScript MT*/

    /* 常用：微软雅黑--Microsoft Yahei、苹方简---PingFang SC其他：浏览器查看*/

    字体大小

    /* 字体大小px是静态的，不会随着网页的拉伸而变化，em是随着网页的拉伸动态变化的，推荐使用px */

    CSS

    1.  
    2. /* 带头角----serif、现代简约----sans-serif、等宽字体--monospace、草书字体---cursive、装饰性字体----fantasy、草书字体---BrushScript MT*/
    3. /* 常用：微软雅黑--Microsoft Yahei、苹方简---PingFang SC其他：*/
    4. /* 字体大小px是静态的，不会随着网页的拉伸而变化，em是随着网页的拉伸动态变化的，推荐使用px */
    5. h1{
    6.     font-family: sans-serif;
    7. }
    8. h2{
    9.     /* 当后面的字体不生效，双引号里面的备份字体才生效 */
    10.     font-family: "BrushScript MT",Cursive;
    11. }
    12. h3{
    13.     font-family: 宋体;
    14. }
    15. h4{
    16.     font-family: 隶书;
    17. }
    18. h5{
    19.     font-family: 仿宋体;
    20.     font-size: 1em;
    21. }
    22. h6{
    23.     font-family: 微软雅黑;
    24.     font-size: 20px;
    25. }

     HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>字体样式title>
    8.     
    9.     
    10.     <link rel="stylesheet" href="Test.css">
    11. head>
    13. <body>
    14.     <h1>I'm a handsome guyh1>
    15.     <h2>mydafafa am a beautiful womanh2>
    16.     <h3>I would like to have dinnerh3>
    17.     <h4>我是一个大帅哥h4>
    18.     <h5>我是一个大美女h5>
    19.     <h6>我想吃饭h6>
    20. body>
    21. html>

    18.字体倾斜和粗细的样式（ font-style、font-weight）

    说明：

    /* 字体样式 正常字体---normal、倾斜---italic、倾斜（部分浏览器不支持）---oblique*/

    /* 字体粗细,注意，这里使用100~900或者后面的英文都可以  细体----lighter、正常字体---normal、加粗字体---bold、更粗字体---bolder */

    1. /* 字体样式 正常字体---normal、倾斜---italic、倾斜（部分浏览器不支持）---oblique*/
    2. /* 字体粗细,注意，这里使用100~900或者后面的英文都可以  细体----lighter、正常字体---normal、加粗字体---bold、更粗字体---bolder */
    3.  
    4. p.p1{
    5.     font-style: normal;
    6.     font-weight: 100;
    7. }
    8.  
    9. p.p2{
    10.     font-style: italic;
    11.     font-weight: 500;
    12. }
    13.  
    14. p.p3{
    15.     font-style: oblique;
    16.     font-weight: bolder;
    17. }

     HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>字体样式title>
    8.     
    9.     
    10.     <link rel="stylesheet" href="Test.css">
    11. head>
    13. <body>
    14.     <p class="p1">我是p1标签p>
    15.     <p class="p2">我是p2标签p>
    16.     <p class="p3">我是p3标签p>
    17. body>
    18. html>

    19.谷歌字体和Icon图标

    说明：为什么要使用谷歌字体，因为谷歌字体是免费的，有1000+的种类,介于这个比较花里胡哨，就用的时候再查就好了

    20.各种小图标的网站(Icon)

    说明：这个网站有各种需要的小图标，可以直接去下载使用

    Find the Perfect Icon for Your Project | Font Awesome

     21.选择器的优先级

    行内样式>ID选择器>类选择器>元素选择器>通用选择器

    对应的权重值分别是1000>100>10>1>0

    22.文本的边框（border） 

    说明：可以定义文本的边框，默认是定义是个边框的，如果需要单独定义那就要分别设置上下左右的边框属性。线条类型的属性是必须要定义的，颜色和大小可以根据需求要不要定义都可以

    线条的类型：点状的边框---dotted、虚线边框---dashed、实线边框---solid、双倍边框--double、无边框---none、隐藏的边框--hidden

    CSS

    1. /* 线条的类型：点状的边框---dotted、虚线边框---dashed、实线边框---solid、双倍边框--double、无边框---none、隐藏的边框--hidden */
    2. p.p1{
    3.     /* 边框粗细  必需：边框的线条类型  边框的颜色 */
    4.     border: 5px solid rebeccapurple;
    5. }
    6.  
    7. p.p2{
    8.     border: 10px dashed yellow;
    9. }
    10.  
    11. p.p3{
    12.     border: 5px dotted rebeccapurple;
    13. }

    HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>字体样式title>
    8.     
    9.     
    10.     <link rel="stylesheet" href="Test.css">
    11. head>
    13. <body>
    14.     <p class="p1">我是p1标签p>
    15.     <p class="p2">我是p2标签p>
    16.     <p class="p3">我是p3标签p>
    17. body>
    18. html>

    23.无序列表和有序列表和图片标记 （list-style-type、ist-style-image）

    说明：可以给文字列表定义顺序

    无序有序列表：list-style-type:定义

    图片列表：list-style-image:定义

    删除列表标记：list-style: none;

    无序列表： 空心圆点---circle、实心圆点---disc、实心方块----square

    有序列表 阿拉伯数字--decimal、罗马数字---upper-roman、英文小写字母---lower-alpha

    CSS 

    1. /*无序列表： 空心圆点---circle、实心圆点---disc、实心方块----square */
    2. ul.a{
    3.     list-style-type: disc;
    4. }
    5.  
    6.  
    7. /* 有序列表 阿拉伯数字--decimal、罗马数字---upper-roman、英文小写字母---lower-alpha */
    8. ol.b{
    9.     list-style-type: decimal;
    10. }
    11.  
    12. /* 图片列表标记 url里面放图片路径*/
    13. ul.c{
    14.     list-style-image: url(/图片/壁纸/111.jpg )  ;
    15.     
    16. }
    17.  
    18. /* 删除定义的列表 */
    19. ul.c{
    20.     list-style: none;
    21. }

    HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>列表title>
    8.     
    9.     
    10.     <link rel="stylesheet" href="Test.css">
    11. head>
    13. <body>
    14.     
    15.     <ul class="a">
    16.         <li>大哥li>
    17.         <li>二哥li>
    18.         <li>三哥li>
    19.     ul>
    20.     
    21.     <ol class="b">
    22.         <li>刘备li>
    23.         <li>关羽li>
    24.         <li>张飞li>
    25.     ol>
    26.     
    27.     <ul class="c">
    28.         <li>三国li>
    29.         <li>真好玩li>
    30.     ul>
    31. body>
    32. html>

     24.CSS背景属性设置(background)

    说明:可以用这个设置页面的背景图片

        /* 背景颜色：rgba是设置颜色的透明度，最后面那个值越小越透明0~1*/

        /* 背景图片：url里面填写图片路径 */

        /*铺满还是不铺满页面： 铺满--repeat、不铺满---no-repeat */

        /*图片位置： right和bottom是设置图片的位置 水平样式：左--left、中间--center、右--right  垂直样式：顶--top、中--center、底部--bottom */

        /* 鼠标滚动：同时滚动---scroll、背景固定---fixed */

    CSS

    1. html,body{
    2.     /* 背景颜色：rgba是设置颜色的透明度，最后面那个值越小越透明0~1*/
    3.     /* 背景图片：url里面填写图片路径 */
    4.     /*铺满还是不铺满页面： 铺满--repeat、不铺满---no-repeat */
    5.     /*图片位置： right和bottom是设置图片的位置 水平样式：左--left、中间--center、右--right  垂直样式：顶--top、中--center、底部--bottom */
    6.     /* 鼠标滚动：同时滚动---scroll、图片固定---fixed */
    7.     background: rgba(0, 255, 0, 0.1) 
    8.     url(/图片/个人/杂物/小图片.png) 
    9.     no-repeat
    10.     right bottom
    11.     scroll 
    12.     ;
    13. }

    HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>列表title>
    8.     
    9.     
    10.     <link rel="stylesheet" href="Test.css">
    11. head>
    13. <body>
    14.     <p>人生不能重来，遇到的人请务必去珍惜p>
    15.     <p>人生不能重来，遇到的人请务必去珍惜p>
    16.     <p>人生不能重来，遇到的人请务必去珍惜p>
    17.     <p>人生不能重来，遇到的人请务必去珍惜p>
    18.     <p>人生不能重来，遇到的人请务必去珍惜p>
    19.     <p>人生不能重来，遇到的人请务必去珍惜p>
    20.     <p>人生不能重来，遇到的人请务必去珍惜p>
    21.     <p>人生不能重来，遇到的人请务必去珍惜p>
    22.     <p>人生不能重来，遇到的人请务必去珍惜p>
    23.     <p>人生不能重来，遇到的人请务必去珍惜p>
    24.     <p>人生不能重来，遇到的人请务必去珍惜p>
    25.     <p>人生不能重来，遇到的人请务必去珍惜p>
    26.     <p>人生不能重来，遇到的人请务必去珍惜p>
    27. body>
    28. html>

    25.背景滚动视觉差效果 

    说明：可以滑动时候实现背景固定，页面图片切换的视觉差效果

    CSS

    1. /* 必须给祖先元素添加上才能生效 */
    2. html,body{
    3.     height: 100%;
    4. }
    5. /* 定义盒子的高 */
    6. div{
    7.     height: 100%;
    8. }
    9. .a{
    10.     /* 背景颜色：没有实现成功 */
    11.     /* 盒子图片，不平铺，背景固定 */
    12.     background: yellow;
    13.     background: url(/图片/个人/杂物/小图片.png) no-repeat
    14.      fixed;
    15. }
    16.  
    17. .b{
    18.     background: rebeccapurple;
    19.     background: url(/图片/个人/杂物/小图片2.png) no-repeat
    20.      fixed;
    21. }

    HTML 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>视觉差案例title>
    8.     
    9.     
    10.     <link rel="stylesheet" href="Test.css">
    11. head>
    13. <body>
    14.     <div class="a">div>
    15.     <div class="b">div>
    16. body>
    17. html>

    滚动覆盖 

     26.CSS外边距（margin）

    说明：这个边距可以设置任意模块与其他模块之间的边框距离

    CSS

    1. div{
    2.     /* 分别是上，右，下，左，一个顺时针方向 */
    3.     background-color: blueviolet;
    4.     margin: 50px 20px 30px 40px;
    5. }

    HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>边框案例title>
    8.     
    9.     
    10.     <link rel="stylesheet" href="Test.css">
    11. head>
    13. <body>
    14.     <div>生活就像一团火div>
    15. body>
    16. html>

     27.CSS内部边距，俗称模块内部宽高（padding）

    说明：这个是模块内部的边距

    PS：确实这个27例子和上面的26例子就这个属性值变了，其他的没有变

    CSS

    1. div{
    2.     /* 分别是上，右，下，左，一个顺时针方向 */
    3.     background-color: blueviolet;
    4.    padding: 50px 20px 30px 40px;
    5. }

    HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>边框案例title>
    8.     
    9.     
    10.     <link rel="stylesheet" href="Test.css">
    11. head>
    13. <body>
    14.     <div>生活就像一团火div>
    15. body>
    16. html>

    28.隐藏于显示属性

    说明：每个元素在页面上面都有不同的显示值，大多数元素的显示值是block（块元素）或者inline（行内元素）

    /* 块级元素，默认是block,如果修改为行内的默认值inline，这些就都会被挤到一行 */

    /* 行元素，默认值是inlink,如果修改为块级的默认值block，显示样式就会发生变化 */

    /* 隐藏起来元素，隐藏元素是隐藏起来了，该依旧占据着地方，只是我们看不见 */

    /*移除了元素，移除元素就是移除了，后面的元素会向前补齐*/

    块级元素与行元素

    块元素（可以任意伸展）-----display:block

    标题元素：

    ~

    段落元素：

    列表元素：

         
           
      •    
           
           
         

        表格元素：

                   

        分块元素：

        水平分割线：

        预格式化：

         
 
        图像映射：
         
 
        表单元素：
         
 

        行元素（内联元素）----display:inline
         

         
 
        链接元素：
         
 
        文本修饰元素：              
         
 
        换行元素：
         
 
        图片元素：
         
 
        范围元素：
         
 
        输入框元素：
         
 
        表格元素：
         
 
        矢量图元素：
         
 
        内联框架：