• CSS核心知识点

    目录

    1、什么是CSS

    1.1 快速入门

    1.2 CSS 导入三种方式

    2、选择器

    2.1、基本选择器

     2.2、层次选择器

     2.3、结构伪类选择器

    2.4、属性选择器（常用）

    3、美化网页元素

    3.1、为什么要美化网页

     3.2、字体样式

    3.3、文本样式

     3.4、文本，阴影和超链接伪类

    3.6、列表ul li

    3.7、背景

    3.8渐变

    四.盒子模型

    4.1什么是盒子模型

    4.2、边框

     4.3、外边距----妙用：居中

    4.4、圆角边框----border-radius

    4.5盒子阴影

     5、浮动

    5.1标准文档流

    5.2 display

    5.3、float

    5.4、overflow及父级边框塌陷问题

    5.5、display与float对比

    6、定位

    6.1 默认

    6.2、相对定位

    6.3、绝对定位-absolute

    6.4、固定定位-fixed

    6.5、z-index

    7.动画

    1、什么是CSS

    • CSS 指层叠样式表 (Cascading Style Sheets)
    • 样式定义如何显示 HTML 元素
    • 样式通常存储在样式表中
    • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
    • 外部样式表可以极大提高工作效率
    • 外部样式表通常存储在 CSS 文件中
    • 多个样式定义可层叠为一个

    1.1 快速入门

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <!--规范，<style>可以编写CSS的代码，每一个声明最好以“;”结尾
    7. 	语法：
    8. 		选择器{
    9. 				声明1;
    10. 				声明2;
    11. 				声明3;
    12. 			}
    13.  
    14. -->
    15.     <style>
    16.         h1{
    17.             color: crimson;
    18.         }
    19.     </style>
    20.  
    21. </head>
    22. <body>
    23.     <h1>CSS 核心知识点</h1>
    24. </body>
    25. </html>

    1.2 CSS 导入三种方式

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Titletitle>
    6.  
    7.     
    8.     <style>
    9.         h1{
    10.             color: green;
    11.         }
    12.     style>
    13.  
    14.     
    15.     <link rel="stylesheet" href="css_one.css" />
    16. head>
    17. <body>
    18.  
    21. <h1 style="color: red">H1 标签h1>
    22. body>
    23. html>

    css_one.css

    1. h1{
    2.             color: yellow;
    3.    }
    • 链接式
    1.     
    2.     <link rel="stylesheet" href="css_one.css" />
    • 导入式

    温馨提示：@import是CSS2.1特有的 

    2.     <style>
    3.         @import url("css_one.css");
    4.     style>

    2、选择器

    作用：选择页面上的某一个后者某一类元素

    2.1、基本选择器

    1、标签选择器：选择一类标签 标签{}

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <style>
    7.         h1{
    8.             color: orange;
    9.             background: blue;
    10.             border-radius: 10px;
    11.         }
    12.     </style>
    13. </head>
    14. <body>
    15. <h1>标签选择器</h1>
    16. </body>
    17. </html>

     2、类 选择器class：选择所有class一致的标签，跨标签，格式：.类名{}

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.  
    7.     <style>
    8.         /*类选择器的格式 .class的名称{}
    9.             好处：可以多个标签归类，是同一个class，可以复用
    10.         */
    11.         .demo1{
    12.             color: blue;
    13.         }
    14.         .demo2{
    15.             color: red;
    16.         }
    17.         .demo3{
    18.             color: aqua;
    19.         }
    20.     </style>
    21. </head>
    22. <body>
    23. <h1 class = "demo1">类选择器：demo1</h1>
    24. <h1 class="demo2">类选择器：demo2</h1>
    25. <h1 class="demo3">类选择器：demo3</h1>
    26. </body>
    27. </html>

    3、id 选择器：全局唯一，格式：#id名{}

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <style>
    7.         /*id选择器：id必须保证全局唯一
    8.             #id名称{}
    9.             不遵循就近原则，优先级是固定的
    10.             id选择器 > 类选择器  >  标签选择器
    11.         */
    12.         #demo1{
    13.             color: aqua;
    14.         }
    15.         .demo2{
    16.             color: red;
    17.         }
    18.         #demo2{
    19.             color: orange;
    20.         }
    21.         h1{
    22.             color: blue;
    23.         }
    24.     </style>
    25. </head>
    26. <body>
    27.  
    28. <h1 id="demo1">id选择器：demo1</h1>
    29. <h1 class="demo2" id = "demo2">id选择器：demo2</h1>
    30. <h1 class="demo2">id选择器：demo3</h1>
    31. <h1>id选择器：demo4</h1>
    32. <h1>id选择器：demo5</h1>
    33. </body>
    34. </html>

    知识拓展：优先级：id > class > 标签

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Titletitle>
    6.  
    7.     
    8.     <style>
    9. 	    #one{
    10. 			color: red;
    11. 		}
    12. 		.one{
    13. 			color:blue;
    14. 		}
    15.         h1{
    16.             color: green;
    17.         }
    18.     style>
    19. head>
    20. <body>
    21.  
    23. <h1 id="one" class="one">H1 标签h1>
    24. body>
    25. html>

     2.2、层次选择器

    • 后代选择器：在某个元素的后面
    1. /*后代选择器*/
    2. <style>
    3. body p{
    4. 	background:red;
    5. }
    6. </style>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Title</title>
    6.  
    7.     <!--内部样式-->
    8.     <style>
    9. 		body p{
    10. 			background:red;
    11. 		}
    12. 	</style>
    13. </head>
    14. <body>
    15. <p>P标签一</p>
    16. <p>P标签二</p>
    17. </body>
    18. </html>
    • 子选择器，一代
    1. /*子选择器*/
    2. <style>
    3. body>p{
    4. 	background:orange;
    5. }
    6. </style>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Title</title>
    6.  
    7.     <!--内部样式-->
    8.     <style>
    9. 		body>p{
    10. 			background:orange;
    11. 		}
    12. 	</style>
    13. </head>
    14. <body>
    15. <p>P标签一</p>
    16. <p>P标签二</p>
    17. </body>
    18. </html>
    • 相邻的兄弟选择器 同辈
    1. /*相邻兄弟选择器：只有一个，相邻（向下）*/
    2. <style>
    3. .active+p{
    4. background: red
    5. }
    6. </style>
    7.  
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Title</title>
    6.  
    7.     <!--内部样式-->
    8.     <style>
    9. 		.active+p{
    10. 			background:orange;
    11. 		}
    12. 	</style>
    13. </head>
    14. <body>
    15. <p class="active">P标签一</p>
    16. <p>P标签二</p>
    17. </body>
    18. </html>
    • 通用选择器
    1. <style>
    2. /*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
    3. 	.active~p{
    4. 	background:red;
    5. }
    6. </style>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Title</title>
    6.  
    7.     <!--内部样式-->
    8.     <style>
    9. 		.active~p{
    10. 			background:red;
    11. 		}
    12. 	</style>
    13. </head>
    14. <body>
    15. <p class="active">P标签一</p>
    16. <p>P标签二</p>
    17. </body>
    18. </html>

     2.3、结构伪类选择器

    伪类:

    1.     <style>
    2.         /*ul的第一个子元素*/
    3.         ul li:first-child{
    4.             background: aqua;
    5.         }
    6.  
    7.         /*ul的最后一个子元素*/
    8.         ul li:last-child{
    9.             background: blue;
    10.         }
    11.         /*选中p1：定位到父元素，选择当前的第一个元素
    12.             选择当前p元素 的父级元素，选中父级元素的第一个，并且是当前元素才生效！
    13.         */
    14.         p:nth-child(1){
    15.             background: orange;
    16.         }
    17.  
    18.  
    19.         /*选中父元素下的，第2个p元素*/
    20.         p:nth-of-type(2){
    21.             background: red;
    22.         }
    23.     style>

    实例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Title</title>
    6.  
    7.     <style>
    8.         /*ul的第一个子元素*/
    9.         ul li:first-child{
    10.             background: aqua;
    11.         }
    12.  
    13.         /*ul的最后一个子元素*/
    14.         ul li:last-child{
    15.             background: blue;
    16.         }
    17.         /*选中p1：定位到父元素，选择当前的第一个元素
    18.             选择当前p元素 的父级元素，选中父级元素的第一个，并且是当前元素才生效！
    19.         */
    20.         p:nth-child(1){
    21.             background: orange;
    22.         }
    23.  
    24.  
    25.         /*选中父元素下的，第2个p元素*/
    26.         p:nth-of-type(2){
    27.             background: red;
    28.         }
    29.     </style>
    30.  
    31.  
    32. </head>
    33. <body>
    34. 		<p>p0</p>
    35. 		<p >p1</p>
    36. 		<p>p2</p>
    37. 	
    38. 	
    39. 		<p>
    40. 			<h4>手机厂商列表：</h4>
    41. 			<ul>
    42. 			 <li>Apples</li>
    43. 			 <li>华为</li>
    44. 			 <li>小米</li>
    45. 			 <li>Opper</li>
    46. 			</ul> 
    47. 		</p>
    48. 		<p>
    49. 			<h4>电动厂商列表：</h4>
    50. 			<ul>
    51. 			 <li>比亚迪</li>
    52. 			 <li>长安</li>
    53. 			 <li>吉利</li>
    54. 			 <li>广汽</li>
    55. 			</ul> 
    56. 		</p>
    57. 	
    58. </body>
    59. </html>

    2.4、属性选择器（常用）

    ID + Class/标签 结合使用

    实例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <style>
    7.          .demo a{
    8.             display: block;
    9.             height: 50px;
    10.             width: 50px;
    11.             float:left;
    12.             border-radius: 10px;
    13.             background: blue;
    14.             text-align: center;
    15.             color: beige;
    16.             text-decoration: none;
    17.             margin-right: 5px;
    18.             font: bold 20px/50px Arial;
    19.         }
    20.          /*属性名，属性名=属性值（正则）
    21.          =表示绝对等于
    22.          *=表示包含
    23.          ^=表示以...开头
    24.          $=表示以...结尾
    25.          存在id属性的元素  a[]{}
    26.          */
    27.         /* a[id]{
    28.              background: red;
    29.          }*/
    30.  
    31.          /*id=first的元素*/
    32.        /* a[id=first]{
    33.             background: aqua;
    34.         }*/
    35.  
    36.         /*class中有links元素*/
    37.        /* a[class = "links item2 first2"]{
    38.             background: orange;
    39.         }*/
    40.         /*a[class*="links"]{
    41.             background: black ;
    42.         }*/
    43.         /*选中href中以http开头的元素*/
    44.         a[href^="http"]{
    45.             background: orange;
    46.         }
    47.     </style>
    48.  
    49. </head>
    50. <body>
    51. <p class="demo">
    52.     <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    53.     <a href="/adad/faf" class="links item2 first2" >2</a>
    54.     <a href="qwe123" class="links item3 first3" >3</a>
    55.     <a href="eweqe" class="links item4 first4" >4</a>
    56.     <a href="rrrrr" class="links item5 first5" >5</a>
    57.     <a href="ttt" class="links item6 first6" >6</a>
    58.     <a href="yyy" class="links item7 first7" >7</a>
    59. </p>
    60. </body>
    61. </html>

    3、美化网页元素

    3.1、为什么要美化网页

    1. 有效的传递页面信息
    2. 美化网页，页面漂亮才能吸引客户
    3. 凸显页面的主题
    4. 提高用户的体验

    span标签：重点要突出的字，使用span标签套起来

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <style>
    7.         #title1{
    8.             font-size: 50px;
    9.         }
    10.     </style>
    11. </head>
    12. <body>
    13.  
    14. 学习语言<span id="title1">JAVA</span>
    15. </body>
    16. </html>

    font-family：字体
    font-size：字体大小
    font-weight：字体粗细

    1.  <style>
    2. 	body{
    3. 		font-family:楷体;
    4. 		color：red;
    5. 	}
    6. 	h1{
    7. 		font-size： 50px;
    8.     }
    9.     .p1{
    10. 		font-weight：blod;
    11. 	
    12. 	}
    13. style>

     3.2、字体样式

    1. font-weight:bolder;/*也可以填px，但不能超过900,相当于bloder*/
    2. /*常用写法：*/
    3. font:oblique bloder 12px "楷体"

    3.3、文本样式

    • 颜色–>color
    • 文本对齐方式–>text-align：center
    • 首行缩进–>text-indent：2em
    • 行高–>line-height：300px；
    • 下划线–>text-decoration
    1. text-decoration:underline/*下划线*/
    2. text-decoration:line-through/*中划线*/
    3. text-decoration:overline/*上划线*/
    4. text-decoration:none/*超链接去下划线*/
    • 图片、文字水平对齐
    img,span{vetical-align:middle}

    实例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Title</title>
    6. <!--    颜色：
    7.             单词
    8.             RGB
    9.             RGBA A透明度 A:0-1
    10.             text-align:排版  。居中
    11.             text-indent:2em 段落首行缩进
    12.             height: 300px;
    13.             line-height:300px
    14.             行高，和 块的高度一直，就可以上下居中
    15. -->
    16.     <style>
    17.         h1{
    18.             color:  rgba(0,255,255,0.8);
    19.             text-align: center;
    20.         }
    21.         .p1{
    22.             text-indent:2em;
    23.         }
    24.         .p2{
    25.             background: crimson;
    26.             height: 300px;
    27.             line-height: 300px;
    28.         }
    29.         /*下划线*/
    30.         .l1{
    31.             text-decoration: underline;
    32.         }
    33.         /*中划线*/
    34.         .l2{
    35.             text-decoration: line-through;
    36.         }
    37.         /*上划线*/
    38.         .l3{
    39.             text-decoration: overline;
    40.         }
    41.         /*超链接去下划线*/
    42.         a{
    43.             text-decoration:none;
    44.         }
    45.     </style>
    46. </head>
    47. <body>
    48.  
    49. <a href="">123</a>
    50.  
    51. <p class="l1">123123</p>
    52. <p class="l2">123123</p>
    53. <p class="l3">123123</p>
    54.  
    55.  
    56. <h1>故事介绍</h1>
    57. <p class="p1">有一天，从城里来了一只野猫。动物们见了，一起围着问长问短，想请它说说城市的事情。野猫可得意啦。它摇晃着脑袋，东瞧瞧、西看看，然后皱着眉头说：“城市太大了，我怎么能用嘴巴讲得清楚呢?
    58. </p>
    59. <p>忽然，它拍拍脑门，“有了，让我来比划给你们看吧!” 野猫先让斑马躺在了地上。它告诉动物们，城市有许多马路，人们过马路要踩着斑马线走。接着，它就带领所有的动物从斑马的身上走了过去。斑马躺在地上觉得受不了，站起来踢踢脚，说：“看来城市是一个很疼的地方。”
    60. </p>
    61.  
    62. <p class="p2">Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or bends with the remover to remove:
    63. </p>
    64. </body>
    65. </html>

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Title</title>
    6. <!--水平对齐~ 参照物， a，b-->
    7.     <style>
    8.         img,span{
    9.             vertical-align: middle;
    10.         }
    11.     </style>
    12. </head>
    13. <body>
    14.  
    15.  
    16. <p>
    17.     <img src="1.png" alt="">
    18.     <span> 12345646</span>
    19. </p>
    20.  
    21.  
    22. </body>
    23. </html>

     3.4、文本，阴影和超链接伪类

    1. <style>
    2.         /*默认的颜色*/
    3.         a{
    4.             text-decoration: none;
    5.             color: #000000;
    6.         }
    7. 		/*按照顺序写link visited hover active*/
    8.         /*未访问链接*/
    9.         a:link{
    10.             color: cyan;
    11.         }
    12.         /*已访问链接*/
    13.         a:visited{
    14.             color: #e20a46;
    15.         }
    16.         /*鼠标悬浮的颜色状态 须记住*/
    17.         a:hover{
    18.             color: orange;
    19.             font-size:50px;
    20.         }
    21.         /*鼠标按住未释放的颜色状态*/
    22.         a:active{
    23.             color: #bf1be3;
    24.         }
    25.         /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
    26.         #price{
    27.             text-shadow: #4506bb 10px -10px 2px;
    28.         }
    29.     </style>

     阴影：

    1. /*	第一个参数：表示水平偏移
    2. 	第二个参数：表示垂直偏移
    3. 	第三个参数：表示模糊半径
    4. 	第四个参数：表示颜色
    5. */
    6. text-shadow:5px 5px 5px 颜色
    7.

     实例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Title</title>
    6.     <style>
    7.         /*默认的颜色*/
    8.         a{
    9.             text-decoration: none;
    10.             color: #000000;
    11.         }
    12. 		/*按照顺序写link visited hover active*/
    13.         /*未访问链接*/
    14.         a:link{
    15.             color: cyan;
    16.         }
    17.         /*已访问链接*/
    18.         a:visited{
    19.             color: #e20a46;
    20.         }
    21.         /*鼠标悬浮的颜色状态 须记住*/
    22.         a:hover{
    23.             color: orange;
    24.             font-size:50px;
    25.         }
    26.         /*鼠标按住未释放的颜色状态*/
    27.         a:active{
    28.             color: #bf1be3;
    29.         }
    30.         /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
    31.         #price{
    32.             text-shadow: #4506bb 10px -10px 2px;
    33.         }
    34.     </style>
    35. </head>
    36. <body>
    37.  
    38.  
    39. <a href="#">
    40.     <img src="text.png" alt="">
    41. </a>
    42. <p>
    43.     <a href="#">敏捷高效：Java开发手册</a>
    44. </p>
    45. <p>
    46.     <a href="">作者: ***</a>
    47. </p>
    48. <p id="price">
    49.   ￥99
    50. </p>
    51. </body>
    52. </html>

    3.6、列表ul li

    1. /*ul  li*/
    2. /*
    3. list-style:
    4. none; 去掉圆点
    5. circle 空心圆
    6. decimal 数字
    7. square 正方形
    8. */
    9. /*ul{*/
    10. /*    background: #e3c4c4;*/
    11. /*}*/
    12. ul li{
    13.     height: 30px;
    14.     list-style: none;
    15.     text-indent: 1em;
    16. }
    17. a{
    18. text-decoration: none;
    19.     font-size: 15px;
    20.     background: #d7a9e7;
    21. }
    22. a:hover{
    23.     color: orange;
    24.     text-decoration: underline;
    25. }

    实例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>列表样式</title>
    6.    <link href="style.css" rel="stylesheet" href="text/css">
    7. </head>
    8. <body>
    9.  
    10. <div id="nav">
    11.     <h2 class="title">全部商品分类</h2>
    12.     <ul>
    13.         <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
    14.         <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
    15.         <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
    16.         <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
    17.         <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
    18.         <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
    19.         <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
    20.         <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">【票务</a></li>
    21.     </ul>
    22. </div>
    23. </body>
    24. </html>

    style.css

    1. #nav{
    2. width: 300px;
    3.     background:#e3c4c4 ;
    4. }
    5. .title{
    6.     font-size: 20px;
    7.     font-weight:bold;
    8.     text-indent: 1em;
    9.     line-height: 35px;
    10.     background: red;
    11. }
    12. /*ul  li*/
    13. /*
    14. list-style:
    15. none; 去掉圆点
    16. circle 空心圆
    17. decimal 数字
    18. square 正方形
    19. */
    20. /*ul{*/
    21. /*    background: #e3c4c4;*/
    22. /*}*/
    23. ul li{
    24.     height: 30px;
    25.     list-style: none;
    26.     text-indent: 1em;
    27. }
    28. a{
    29. text-decoration: none;
    30.     font-size: 15px;
    31.     background: #d7a9e7;
    32. }
    33. a:hover{
    34.     color: orange;
    35.     text-decoration: underline;
    36. }

    3.7、背景

    • 背景颜色：background
    • 背景图片
    1. background-image:url("");/*默认是全部平铺的*/
    2. background-repeat:repeat-x/*水平平铺*/
    3. background-repeat:repeat-y/*垂直平铺*/
    4. background-repeat:no-repeat/*不平铺*/

    实例:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Title</title>
    6.     <style>
    7.         div{
    8.             width: 1000px;
    9.             height: 700px;
    10.             border: 1px solid red;
    11.             background-image: url("text.png");
    12.         /*默认是全部铺平*/
    13.         }
    14.         /*x轴方向全部平铺*/
    15.         .div1{
    16.             background-repeat: repeat-x ;
    17.         }
    18.         /*y轴方向全部平铺*/
    19.         .div2{
    20.             background-repeat: repeat-y;
    21.         }
    22.         /*不平铺*/
    23.         .div3{
    24.             background-repeat: no-repeat;
    25.         }
    26.     </style>
    27. </head>
    28. <body>
    29. <div class="div1"></div>
    30. <div class="div2"></div>
    31. <div class="div3"></div>
    32. </body>
    33. </html>
    • 综合使用
    1. background:red url("图片相对路劲") 270px 10px no-repeat
    2. background-position：/*定位：背景位置*/

    针对： 列表ul li 优化调整

    style.css 

    1. #nav{
    2. width: 300px;
    3.     background:#e3c4c4 ;
    4. }
    5. .title{
    6.     font-size: 20px;
    7.     font-weight:bold;
    8.     text-indent: 1em;
    9.     line-height: 35px;
    10.     background: red;
    11. 	/*颜色 图片 图片位置 平铺方式*/
    12.     background: red url("text.png") 270px 10px no-repeat;
    13. }
    14. /*ul  li*/
    15. /*
    16. list-style:
    17. none; 去掉圆点
    18. circle 空心圆
    19. decimal 数字
    20. square 正方形
    21. */
    22. /*ul{*/
    23. /*    background: #e3c4c4;*/
    24. /*}*/
    25. ul li{
    26.     height: 30px;
    27.     list-style: none;
    28.     text-indent: 1em;
    29. 	background-image: url("text.png");
    30.     background-repeat: no-repeat;
    31.     background-position: 230px 2px;
    32. }
    33. a{
    34. text-decoration: none;
    35.     font-size: 15px;
    36.     background: #d7a9e7;
    37. }
    38. a:hover{
    39.     color: orange;
    40.     text-decoration: underline;
    41. }

    3.8渐变

    1. background-color: #4158D0;
    2. background-image: linear-gradient(235deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

    四.盒子模型

    4.1什么是盒子模型

    1. margin：外边距
    2. padding：内边距
    3. border：边框

    4.2、边框

    border：粗细 样式 颜色

    1. 边框的粗细
    2. 边框的样式
    3. 边框的颜色

     实例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Title</title>
    6.  
    7.     <style>
    8.         /*body总有一个默认的外边距margin:0  常见操作*/
    9.         /*h1,ul,li,a,body{
    10.             margin:0;
    11.             padding: 0;
    12.             text-decoration: none;
    13.         */
    14.         /* border:粗细 样式  颜色*/
    15.         ul,h1,li,a,body{
    16.             margin:0;
    17.             padding: 0;
    18.             text-decoration: none;
    19.         }
    20.  
    21.         #box{
    22.             width: 300px;
    23.             border:1px solid red ;
    24.             
    25.         }
    26.         h2{
    27.             font-size: 16px;
    28.         background: cornflowerblue;
    29.         line-height:30px;
    30.             margin: 0;
    31.             color: white;
    32.         }
    33.         form{
    34.             background: coral;
    35.         }
    36.         div:nth-of-type(1)>input{
    37.             border: 3px solid blue;
    38.         }
    39.         div:nth-of-type(2) input{
    40.             border: 3px dashed green;
    41.         }
    42.         div:nth-of-type(3) input{
    43.             border: 3px dashed purple;
    44.         }
    45.     </style>
    46. </head>
    47. <body>
    48.  
    49. <div id="box">
    50.     <h2>会员登录</h2>
    51.     <form action="#">
    52.         <div>
    53.             <span>用户名</span>
    54.             <input type="text">
    55.         </div>
    56.         <div>
    57.             <span>密码</span>
    58.             <input type="text">
    59.         </div>
    60.         <div>
    61.             <span>邮箱</span>
    62.             <input type="text">
    63.         </div>
    64.  
    65. </form>
    66.  
    67.  
    68. </div>
    69. </body>
    70. </html>

     4.3、外边距----妙用：居中

    margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下

    1. margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
    2. /*例1：居中*/
    3. margin:0 auto /*auto表示左右自动*/
    4. /*例2：*/
    5. margin:4px/*表示上、右、下、左都为4px*/
    6. /*例3*/
    7. margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/

    示例：

     

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Title</title>
    6.     <!--外边距的妙用 ： 居中元素-->
    7.     <!-- margin: 0 auto; 居中-->
    8.     <style>
    9.  
    10.         #box{
    11.             width: 300px;
    12.             border:1px solid red ;
    13.             /*顺时针上右下左*/
    14.             margin: 0 auto;
    15.  
    16.         }
    17.         /*  margin: 0;
    18.             margin: 0 1px;   上下、左右
    19.             margin: 0 1px 2px 2px;  上右下左
    20.           */
    21.         h2{
    22.             font-size: 16px;
    23.             background: cornflowerblue;
    24.             line-height:30px;
    25.             margin: 0 1px 2px 2px;
    26.             color: white;
    27.         }
    28.         form{
    29.             background: coral;
    30.         }
    31.         input{
    32.             border: 1px solid red;
    33.         }
    34.         div:nth-of-type(1){
    35.             border: 1px solid red;
    36.             padding: 10px 2px;
    37.         }
    38.  
    39.     </style>
    40. </head>
    41. <body>
    42.  
    43. <div id="box">
    44.     <h2>会员登录</h2>
    45.     <form action="#">
    46.         <div>
    47.             <span>用户名</span>
    48.             <input type="text">
    49.         </div>
    50.         <div>
    51.             <span>密码</span>
    52.             <input type="text">
    53.         </div>
    54.         <div>
    55.             <span>邮箱</span>
    56.             <input type="text">
    57.         </div>
    58.  
    59.     </form>
    60.  
    61.  
    62. </div>
    63. </body>
    64. </html>

    盒子计算方式：

     margin+border+padding+内容的大小

    总结：
    body总有一个默认的外边距 margin:0
    常见操作：初始化

    1. margin:0;
    2. padding:0;
    3. text-decoration:none;

    4.4、圆角边框----border-radius

    border-radius有四个参数（顺时针），左上开始
    圆圈：圆角=半径

    示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Title</title>
    6.     <style>
    7.         div{
    8.             width: 100px;
    9.             height: 100px;
    10.             border: 10px solid red;
    11.             border-radius: 100px  100px 0px 0px;
    12.         }
    13.         img{
    14.             border-radius: 25px;
    15.         }
    16.     </style>
    17. </head>
    18. <body>
    19. 	<div></div>
    20.     <img src="text.png" alt="">
    21.  
    22. </body>

    4.5盒子阴影

    示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.      <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Title</title>
    6. <!--margin:0 auto;居中
    7. 要求： 块元素，块元素有固定的宽度
    8.     -->
    9.     <style>
    10.         div{
    11.             width: 100px;
    12.             height: 100px;
    13.             border: 10px solid red;
    14.             box-shadow: 10px 10px 1px yellow;
    15.  
    16.         }
    17.         img{
    18.             /*margin:0 auto;*/
    19.             border-radius:50px ;
    20.             box-shadow: 10px 10px 1px green;
    21.             vertical-align: center;
    22.         }
    23.     </style>
    24. </head>
    25. <body>
    26. <div style="width: 200px ;height: 100px">
    27.     <img src="text.png" alt="">
    28. </div>
    29.  
    30. </body>
    31. </html>

     5、浮动

    5.1标准文档流

    块级元素：独占一行

    h1~h6 p div 列表。。。

    行内元素：不占一行

    span a img strong…

    行内元素可以被包含块级元素中，反之不可以。

    5.2 display

    1. block：块元素
    2. inline：行内元素
    3. inline-block：是块元素，但是可以内联，在一行
    4. none:消失

    这是一种实现行内元素排列的方式，但是我们很多情况用float

    示例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Titletitle>
    7.     <style>
    8.         div{
    9.             width: 100px;
    10.             height: 100px;
    11.             border: 1px solid red;
    12.             display: inline;
    13.         }
    14.         span{
    15.             width: 100px;
    16.             height: 100px;
    17.             border: 1px solid red;
    18.             display: inline-block;
    19.         }
    20.     style>
    21. head>
    22. <body>
    23. <div>div块元素div>
    24. <span>span行内元素span>
    25. body>
    26. html>

     QQ会员导航页面

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>QQ会员</title>
    6.     <link rel="stylesheet" href="qq.css" />
    7. </head>
    8. <body>
    9. <div class="wrap">
    10.     <!--头部-->
    11.     <header class="nav-header">
    12.         <div class="head-contain">
    13.             <a href="" class="top-logo"><img src="logo.png" width="145" height="90" /></a>
    14.             <nav class="top-nav">
    15.                 <ul>
    16.                     <li><a href="">功能特权</a> </li>
    17.                     <li><a href="">游戏特权</a> </li>
    18.                     <li><a href="">生活特权</a> </li>
    19.                     <li><a href="">会员特权</a> </li>
    20.                     <li><a href="">成长体系</a> </li>
    21.                     <li><a href="">年费专区</a> </li>
    22.                     <li><a href="">超级会员</a> </li>
    23.                 </ul>
    24.             </nav>
    25.             <div class="top-right">
    26.                 <a href="">登录</a>
    27.                 <a href="">开通超级会员</a>
    28.             </div>
    29.         </div>
    30.     </header>
    31. </div>
    32. </body>
    33. </html>

     qq.css

    1. *{
    2.     padding:0;
    3.     margin: 0;
    4. }
    5. a{
    6.     text-decoration: none;
    7. }
    8. .nav-header{
    9.     height: 90px;
    10.     width: 100%;
    11.     background: rgba(0,0,0,.6);
    12. }
    13. .head-contain{
    14.     width: 1180px;
    15.     height: 90px;
    16.     margin: 0 auto;
    17.     text-align: center;
    18. }
    19. .top-logo,.top-nav,.top-nav li,.top-right{
    20.     height: 90px;
    21.     display: inline-block;
    22.     vertical-align: top;
    23. }
    24. .top-nav{
    25.     margin: 0 48px;
    26. }
    27. .top-nav li{
    28.     line-height: 90px;
    29.     width: 90px;
    30. }
    31. .top-nav li a{
    32.     display: block;
    33.     text-align: center;
    34.     font-size: 16px;
    35.     color: #fff;
    36. }
    37. .top-nav li a:hover{
    38.     color: blue;
    39. }
    40.  
    41. .top-right a{
    42.     display: inline-block;
    43.     font-size: 16px;
    44.     text-align: center;
    45.     margin-top: 25px;
    46.     border-radius: 35px;
    47. }
    48. .top-right a:first-of-type{
    49.     width: 93px;
    50.     height: 38px;
    51.     line-height: 38px;
    52.     color: #fad65c;
    53.     border: 1px #fad65c solid;
    54. }
    55. .top-right a:first-of-type:hover{
    56.     color: #986b0d;
    57.     background: #fad65c;
    58. }
    59. .top-right a:last-of-type{
    60.     width: 140px;
    61.     height: 40px;
    62.     font-weight: 700;
    63.     line-height: 40px;
    64.     background: #fad65c;
    65.     color: #986b0d;
    66. }
    67. .top-right a:last-of-type:hover{
    68.     background: #fddc6c;
    69. }
    70.

    图片资源：

    5.3、float

    float:left:左浮动

    flota:right:右浮动

    clear:both 清除左右浮动

    示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>浮动</title>
    6.     <style>
    7. 		div{
    8. 			margin: 10px;
    9. 			padding: 5px;
    10. 		}
    11. 		#father{
    12. 			border: 1px #000000 solid;
    13. 		}
    14. 		.layer01{
    15. 			border: 1px #FF0000 dashed;
    16. 			display: inline-block;
    17. 			float: right;
    18. 		}
    19. 		.layer02{
    20. 			border: 1px #0000FF dashed;
    21. 			display: inline-block;
    22. 			float: right;
    23. 		}
    24. 		.layer03{
    25. 			border: 1px #0000FF dashed;
    26. 			display: inline-block;
    27. 			float: right;
    28. 		}
    29. 		.layer04{
    30. 			border: 1px #0000FF dashed;
    31. 			font-size: 12px;
    32. 			line-height: 50px;
    33. 			display: inline-block;
    34. 			float: right;
    35. 			clear: both;
    36. 		}
    37.  
    38. 	</style>
    39. </head>
    40. <body>
    41. <div id="father" style="width:100%;height:140px;">
    42. 	<div class="layer01" style="width:120px; height:42px;">layer01</div>
    43. 	<div class="layer02" style="width:120px; height:42px;">layer02</div>
    44. 	<div class="layer03" style="width:120px; height:42px;">layer03</div>
    45. 	<div class="layer04" style="width:120px; height:42px;">layer04</div>
    46. </div>
    47. </body>
    48. </html>

    5.4、overflow及父级边框塌陷问题

    clear 属性取值范围

    1. /*
    2. clear:right 右侧不允许有浮动元素
    3. clear:left  左侧不允许有浮动元素
    4. clear:both  两侧不允许有浮动元素
    5. clear:none  不允许有浮动元素
    6. */

    解决塌陷问题方案：

    页面塌陷示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>浮动</title>
    6.     <style>
    7. 		div{
    8. 			margin: 10px;
    9. 			padding: 5px;
    10. 		}
    11. 		#father{
    12. 			border: 1px #000000 solid;
    13. 		}
    14. 		.layer01{
    15. 			border: 1px #FF0000 dashed;
    16. 			display: inline-block;
    17. 			float: right;
    18. 		}
    19. 		.layer02{
    20. 			border: 1px #0000FF dashed;
    21. 			display: inline-block;
    22. 			float: right;
    23. 		}
    24. 		
    25.  
    26. 	</style>
    27. </head>
    28. <body>
    29. <div id="father" style="width:100%;">
    30. 	<div class="layer01" style="width:120px;">
    31. 		<span>浮动文字</span>
    32. 	</div>
    33. 	<div class="layer02" style="width:140px;">
    34. 		<img src="text.png">
    35. 	</div>
    36. </div>
    37. </body>
    38. </html>


    方案一：增加父级元素的高度； 

    1. 		#father{
    2. 			border: 1px #000000 solid;
    3. 			height:200px; #解决塌陷问题之增加父级元素高度
    4. 		}

    方案二：增加一个空的div标签，清除浮动

    1. style 片段
    2.  
    3.         /*
    4. 		* 基于clear:both属性
    5. 		*/
    6. 		.clear{
    7. 			clear:both; 
    8. 			margin:0;
    9. 			padding:0;
    10. 		}
    11.  
    12. HTML 片段
    13.     <!-- 添加div，解决父级元素塌陷 -->
    14. 	<div class="clear"></div>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>浮动</title>
    6.     <style>
    7. 		div{
    8. 			margin: 10px;
    9. 			padding: 5px;
    10. 		}
    11. 		#father{
    12. 			border: 1px #000000 solid;
    13. 		}
    14. 		.layer01{
    15. 			border: 1px #FF0000 dashed;
    16. 			display: inline-block;
    17. 			float: right;
    18. 		}
    19. 		.layer02{
    20. 			border: 1px #0000FF dashed;
    21. 			display: inline-block;
    22. 			float: right;
    23. 		}
    24. 		/*
    25. 		* 基于clear:both属性
    26. 		*/
    27. 		.clear{
    28. 			clear:both; 
    29. 			margin:0;
    30. 			padding:0;
    31. 		}
    32. 	</style>
    33. </head>
    34. <body>
    35. <div id="father" style="width:100%;">
    36. 	<div class="layer01" style="width:120px;">
    37. 		<span>浮动文字</span>
    38. 	</div>
    39. 	<div class="layer02" style="width:140px;">
    40. 		<img src="text.png">
    41. 	</div>
    42. 	<!-- 添加div，解决父级元素塌陷 -->
    43. 	<div class="clear"></div>
    44. </div>
    45. </body>
    46. </html>

    效果截图：

     方案三：在父级元素中增加一个overflow：hidden

    1. 		#father{
    2. 			border: 1px #000000 solid;
    3. 			overflow:hidden; /*解决父级元素塌陷问题*/
    4. 		}

    方案四：父类添加一个伪类:after

    1.         #father:after{
    2. 			content:'';
    3. 			display:block;
    4. 			clear:both;
    5. 		}

    总结：

    1. 浮动元素增加空div----》简单、代码尽量避免空div
    2. 设置父元素的高度-----》简单，元素假设没有了固定的高度，就会超出
    3. overflow----》简单，下拉的一些场景避免使用
    4. 父类添加一个伪类:after（推荐）----》写法稍微复杂，但是没有副作用，推荐使用

    5.5、display与float对比

    1. display：方向不可以控制
    2. float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。

    6、定位

    6.1 默认

    示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>定位</title>
    6.     <style>
    7.         div{
    8.             margin: 10px;
    9.             padding:5px ;
    10.             font-size: 12px;
    11.             line-height: 25px;
    12.         }
    13.         #father{
    14.             border:1px solid #666666;
    15.             padding: 0;
    16.         }
    17.         #first{
    18.             background-color: #dc6b6b;
    19.             border:1px dashed #e32c2c;
    20.         }
    21.         #second{
    22.             background-color: #7edb87;
    23.             border:1px dashed #30d50b;
    24.         }
    25.         #third{
    26.             background-color: #3ed7c5;
    27.             border:1px dashed #3537c1;
    28.         }
    29.     </style>
    30. </head>
    31. <body>
    32. <div id="father">
    33.     <div id="first">第一个盒子</div>
    34.     <div id="second">第二个盒子</div>
    35.     <div id="third">第三个盒子</div>
    36.  
    37. </div>
    38. </body>
    39. </html>

    6.2、相对定位

    相对定位：positon：relstive；
    相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

    1. top:-20px;
    2. left:20px;
    3. bottom:-10px;
    4. right:20px;

    示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>定位</title>
    6.     <!--    相对定位相对于自己原来的位置进行偏移-->
    7.     <style>
    8.         body{
    9.             padding: 20px;
    10.         }
    11.         div{
    12.             margin: 10px;
    13.             padding:5px ;
    14.             font-size: 12px;
    15.             line-height: 25px;
    16.         }
    17.         #father{
    18.             border:1px solid #666666;
    19.             padding: 0;
    20.         }
    21.         #first{
    22.             background-color: #dc6b6b;
    23.             border:1px dashed #e32c2c;
    24.             position: relative;/*相对定位： 上下左右*/
    25.             top: -10px;
    26.             left: 20px;
    27.  
    28.         }
    29.         #second{
    30.             background-color: #7edb87;
    31.             border:1px dashed #30d50b;
    32.         }
    33.         #third{
    34.             background-color: #3ed7c5;
    35.             border:1px dashed #3537c1;
    36.             bottom: -10px;
    37.             right: 20px;
    38.         }
    39.     </style>
    40. </head>
    41. <body>
    42. <div id="father">
    43.     <div id="first">第一个盒子</div>
    44.     <div id="second">第二个盒子</div>
    45.     <div id="third">第三个盒子</div>
    46.  
    47. </div>
    48. </body>
    49. </html>

    练习题：连接卡 

    示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Title</title>
    6.     <style>
    7.         #father{
    8.  
    9.             padding: 10px;
    10.             border: 2px solid red;
    11.             width: 300px;
    12.             height:300px;
    13.         }
    14.        a{
    15.            width: 100px;
    16.            height: 100px;
    17.            text-decoration: none;
    18.            background: #f55fc2;
    19.            line-height: 100px;
    20.            text-align: center;
    21.            color: white;
    22.            display: block;
    23.        }
    24.        a:hover{
    25.            background-color: blue;
    26.        }
    27.        .second,.fourth{
    28.            position: relative;
    29.            left:200px;
    30.            top: -100px;
    31.  
    32.  
    33.        }
    34.        /*.fourth{*/
    35.        /*    position: relative;*/
    36.        /*    left: 200px;*/
    37.        /*    top: -100px;*/
    38.        /*}*/
    39.        .fifth{
    40.            position: relative;
    41.            left: 100px;
    42.            top: -300px;
    43.  
    44.        }
    45.     </style>
    46. </head>
    47. <body>
    48. <div id="father">
    49.     <a class="first" href="#">链接一</a>
    50.     <a class="second" href="#">链接二 </a>
    51.     <a class="third" href="#">链接三</a>
    52.     <a class="fourth" href="#">链接四</a>
    53.     <a class="fifth" href="#">链接五</a>
    54.  
    55. </div>
    56.  
    57. </body>
    58. </html>

    6.3、绝对定位-absolute

    定位：基于xxx定位，上下左右~
    1、没有父级元素定位的前提下，相对于浏览器定位
    2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
    3、在父级元素范围内移动
    总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>绝对定位</title>
    6.     <style>
    7.         div{
    8.             margin: 10px;
    9.             padding:5px ;
    10.             font-size: 12px;
    11.             line-height: 25px;
    12.         }
    13.         #father{
    14.             border:1px solid #666666;
    15.             padding: 0;
    16.             position: relative;
    17.         }
    18.         #first{
    19.             background-color: #dc6b6b;
    20.             border:1px dashed #e32c2c;
    21.         }
    22.         #second{
    23.             background-color: #7edb87;
    24.             border:1px dashed #30d50b;
    25.             position:absolute ;
    26.             right: 20px;
    27.             top: -10px;
    28.  
    29.  
    30.         }
    31.         #third{
    32.             background-color: #3ed7c5;
    33.             border:1px dashed #3537c1;
    34.         }
    35.     </style>
    36. </head>
    37. <body>
    38. <div id="father">
    39.     <div id="first">第一个盒子</div>
    40.     <div id="second">第二个盒子</div>
    41.     <div id="third">第三个盒子</div>
    42.  
    43. </div>
    44. </body>
    45. </html>

    6.4、固定定位-fixed

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>固定定位</title>
    6.     <style>
    7.         body{
    8.             height: 1000px;
    9.         }
    10.          div:nth-of-type(1){/*绝对定位：没有相对的父级元素，所以相对于浏览器*/
    11.              width: 100px;
    12.              height: 100px;
    13.              background:red;
    14.              position: absolute;
    15.              right: 0;
    16.              bottom: 0;
    17.          }
    18.         div:nth-of-type(2){
    19.             width: 50px;
    20.             height: 50px;
    21.             background: yellow;
    22.             position: fixed;
    23.             right: 0;
    24.             bottom: 0;
    25.         }
    26.     </style>
    27. </head>
    28. <body>
    29.  
    30. <div>div1</div>
    31. <div>div2</div>
    32. </body>
    33. </html>

    6.5、z-index

    图层~
    z-index：默认是0，最高无限~999

    示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    5.     <title>Z-index</title>
    6.     <link rel="stylesheet" href="css/style.css">
    7. </head>
    8. <body>
    9. <div id="app">
    10.     <ul>
    11.         <li><img src="logo.png" alt=""></li>
    12.         <li class="tipText">微服务，Spring Alibaba cloud</li>
    13.         <li class="tipBg"></li>
    14.         <li>时间：2022-11-12</li>
    15.         <li>地点：杭州</li>
    16.     </ul>
    17. </div>
    18. </body>
    19. </html>

    1. #content{
    2.     width: 380;
    3.     padding: 0px;
    4.     margin: 0px;
    5.     overflow: hidden;
    6.     font-size: 12px;
    7.     line-height: 25px;
    8.     border: 1px solid yellow;
    9. }
    10. ul,li{
    11.     padding: 0px;
    12.     margin: 0px;
    13.     list-style: none;
    14. }
    15. /*父级元素相对定位*/
    16. #content ul{
    17.     position: relative;
    18. }
    19. .tipText,.tipBg{
    20.     position: absolute;
    21.     width: 380px;
    22.     height: 25px;
    23.     top:216px
    24. }
    25. .tipText{
    26.     color: white;
    27.     z-index: 999;
    28. }
    29. .tipBg{
    30.     background: orange;
    31.     opacity: 0.5;/*背景透明度*/
    32.     filter: alpha(opacity=50);
    33. }

    7.动画

  • 相关阅读:
    FFmpeg 给视频增加黑边
    top(linux)——FIELDS/Columns含义
    LVGL基础教程 – LVGL 简介
    微信小程序API（详细 教程）
    基于unity的愤怒的小鸟设计
    Ansible之playbooks剧本
    flink理论干货笔记（6）
    Spring Security总体架构介绍
    因为内存溢出，我差点被优化
    Python通过Flask+pyecharts对房地产数据实现数据分析结果Web可视化（二）
  • 原文地址：https://blog.csdn.net/zhouzhiwengang/article/details/127726560