CSS

@author：伏月廿柒

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动……

CSS发展史

CSS 1.0

CSS 2.0 DIV（块） + CSS，HTML与CSS结构分离的思想，网页变得简单，利于SEO

CSS 2.1 浮动，定位

CSS 3.0 圆角，阴影，动画…… 浏览器兼容性

CSS的优势

1、内容和表现分离

2、网页结构表现统一，可以复用

3、样式十分丰富

4、建议使用独立于html的css文件

5、利于SEO，容易被搜索引擎收录！

style

  1. <!DOCTYPE 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>Demo01</title>
  9.     <!--
  10.         <style>语法：
  11.             选择器 {
  12.                 声明1;
  13.                 声明2;
  14.                 ……
  15.             }
  16.      -->
  17.     <style>
  18.         h1 {
  19.             color: red;
  20.         }
  21.     </style>
  23.     <!-- css外部引用，建议使用此方法 -->
  24.     <link rel="stylesheet" href="../css/Demo01.css">
  26. </head>
  27. <body>
  29.     <h1>标题1</h1>
  30.     <h2>标题2</h2>
  32. </body>
  33. </html>
  1. /*Demo01.css*/
  2. h2 {
  3.     color: blue;
  4. }

CSS导入方式

  1. <!DOCTYPE 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>Demo02</title>
  9.     <!-- 内部样式 -->
  10.     <style>
  11.         h1 {
  12.             color: green;
  13.         }
  14.     </style>
  16.     <!-- 外部样式，链接引用 -->
  17.     <link rel="stylesheet" href="../css/Demo02.css">
  18.     <!-- 导入引用 -->
  19.     <style>
  20.     	@import url("../css/Demo02.css");
  21.     </style>
  23. </head>
  24. <body>
  26.     <!-- 优先级：就近原则 -->
  28.     <!-- 行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
  29.     <h1 style="color: red;">标题1</h1>
  31. </body>
  32. </html>
  1. /*Demo02.css*/
  3. /* 外部样式 */
  4. h1 {
  5.     color: blue;
  6. }

拓展：外部样式两种写法

  • 链接式

    1. <link rel="stylesheet" href="XXX.css">

  • 导入式(css 2.1)

    1. <style>
    2. 	@import url("XXX.css");
    3. </style>

选择器

选择页面上的某一个或者某一类元素

基本选择器

  1. 标签选择器
  2. 类 选择器 class
  3. Id 选择器
  1. <!DOCTYPE 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>Demo03</title>
  9.     <style>
  10.         /* 标签选择器，会选择到页面上所有的这个标签的元素 */
  11.         h1 {
  12.             color: aqua;
  13.         }
  15.         /* 类选择器 */
  16.         /*
  17.             格式：.XXX {}
  18.             特点：跨标签，可以多个标签归类
  19.         */
  20.         .h1_set_class {
  21.             color: aquamarine;
  22.         }
  24.         /* id选择器 */
  25.         /*
  26.             格式：#XXX {}
  27.             特点：id必须保证全局唯一
  28.         */
  29.         #h1_set_id {
  30.             color: bisque;
  31.         }
  33.         #h2_set {
  34.             color: cadetblue;
  35.         }
  36.     </style>
  38. </head>
  39. <body>
  41.     <h1>Java</h1>
  42.     <h1 class="h1_set_class">html</h1>
  43.     <h2 id="h2_set">python</h2>
  45.     <!--
  46.         优先级：
  47.         id选择器 > class选择器 > 标签选择器
  48.      -->
  49.     <h1 class="h1_set_class" id="h1_set_id">JS</h1>
  51. </body>
  52. </html>

层次选择器

  1. <!DOCTYPE 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>Demo04</title>
  9.     <style>
  10.         /* 后代选择器,作用与后面所有代 */
  11.         body p {
  12.             background: #57b4e6;
  13.         }
  15.         /* 子选择器，只作用于下一代 */
  16.         body > h1 {
  17.             background: #219143;
  18.         }
  20.         /* 相邻兄弟选择器，只作用于下一个 */
  21.         .h1_set + h1 {
  22.             background: #3f56d6;
  23.         }
  25.         /* 通用选择器,作用于向下的所有同级标签 */
  26.         .h4_set ~ h1 {
  27.             background: #cce755;
  28.         }
  29.     </style>
  31. </head>
  32. <body>
  34.     <p>p1</p>
  35.     <p>p2</p>
  36.     <h1 class="h1_set">h1</h1>
  37.     <h1>h2</h1>
  38.     <h1>h3</h1>
  39.     <h1 class="h4_set">h4</h1>
  40.     <h1>h5</h1>
  41.     <h1>h6</h1>
  42.     <p>p3</p>
  43.     <ul>
  44.         <li>
  45.             <h1>h7</h1>
  46.             <p>p4</p>
  47.         </li>
  48.         <li>
  49.             <p>p5</p>
  50.         </li>
  51.         <li>
  52.             <p>p6</p>
  53.         </li>
  54.     </ul>
  55.     <h1>h8</h1>
  57. </body>
  58. </html>

结构伪类选择器

  1. <!DOCTYPE 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>Doemo05</title>
  9.     <style>
  10.         /* ul的第一个子元素 */
  11.         ul li:first-child {
  12.             background: #63c0f1;
  13.         }
  15.         /* ul的最后一个子元素 */
  16.         ul li:last-child {
  17.             background: #63f1aa;
  18.         }
  20.         /* 选中p1：定位到父元素，选择当前第一个元素 */
  21.         /* :nth-child  选中当前元素的父级元素的第一个子元素，并且是相同标签才生效！ */
  22.         p:nth-child(1) {
  23.             background: #6378f1;
  24.         }
  25.         /* 选择第三个 */
  26.         p:nth-child(3) {
  27.             background: #f1e863;
  28.         }
  30.         /* :nth-of-type  选中当前元素的父级元素下的相同标签的第二个子元素 */
  31.         p:nth-of-type(2) {
  32.             background: #f17f63;
  33.         }
  35.         a:hover {
  36.             background: #b1d2e4;
  37.         }
  38.     </style>
  40. </head>
  41. <body>
  43.     <a href="">链接</a>
  44.     <p>p1</p>
  45.     <p>p2</p>
  46.     <p>p3</p>
  47.     <ul>
  48.         <li>li1</li>
  49.         <li>li2</li>
  50.         <li>li3</li>
  51.     </ul>
  53. </body>
  54. </html>

属性选择器

id 与 class 的结合

  1. <!DOCTYPE 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>Demo06</title>
  9.     <style>
  10.         .demo a {
  11.             float: left;
  12.             display: block;
  13.             height: 50px;
  14.             width: 50px;
  15.             border-radius: 10px;
  16.             background: #1296db;
  17.             text-align: center;
  18.             color: #ffffff;
  19.             text-decoration: none; /*去除下划线*/
  20.             margin-right: 5px;
  21.             font: bold 20px/50px Arial; /* 20px：字体大小，50px：行高 */
  22.         }
  24.         /* 属性选择器 */
  25.         /*
  26.             标签名[属性名=属性值] {}   (支持正则)
  27.             = 绝对等于这个值
  28.             *= 包含这个值
  29.             ^= 以这个值开头
  30.             $= 以这个值结尾
  31.         */
  33.         /* 改变存在class属性且class含有links的元素 */
  34.         a[class*="links"] {
  35.             background: #12db66;
  36.         }
  38.         /* 改变存在id属性的元素  a[] {}  */
  39.         a[id] {
  40.             background: #12dbca;
  41.         }
  42.         /* 改变存在id属性且id为last的元素  a[] {}  */
  43.         a[id=last] {
  44.             background: #9b12db;
  45.         }
  47.         /* 改变href中以https开头的元素 */
  48.         a[href^=https]{
  49.             background: #db1281;
  50.         }
  52. 		/*改变href中以pdf结尾的元素*/
  53.         a[href$=pdf] {
  54.             background-color: #db121c;
  55.         }
  56.     </style>
  58. </head>
  59. <body>
  61.     <p class="demo">
  63.         <a href="abc" class="links item first" id="first">1</a>
  64.         <a href="" class="links item active" target="_blank" title="test">2</a>
  65.         <a href="../css/123.html" class="links item">3</a>
  66.         <a href="../css/123.png" class="links item">4</a>
  67.         <a href="../css/123.jpg" class="item">5</a>
  68.         <a href="https://www.baidu.com" class="item">6</a>
  69.         <a href="/a.xls" class="item">7</a>
  70.         <a href="/abc.pdf" class="links item">8</a>
  71.         <a href="abc.doc" class="links item">9</a>
  72.         <a href="abcd.doc" class="links item last" id="last">10</a>
  74.     </p>
  76. </body>
  77. </html>

美化网页元素

字体、文本样式

  1. <!DOCTYPE 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>Demo07</title>
  9.     <style>
  10.         body {
  11.             font-family: Arial, 楷体; /* 文字字体 */
  12.         }
  14.         #title {
  15.             font-size:  50px; /* 文字大小 */
  16.         }
  18.         h1 {
  19.             font-weight: bold; /* 文字粗细 */
  20.             /* 文字颜色 */
  21.             /*
  22.                 单词
  23.                 RGB 0~F
  24.                 RGBA （A-透明度[0~1]）
  25.             */
  26.             color: aqua;
  27.             font-style: oblique; /* 字体风格 */
  28.             text-align: center; /* 文本排版 */
  29.         }
  31.         .p1 {
  32.             text-indent: 2em; /* 首行缩进 1em等于一个字间隔 */
  33.         }
  35.         .p4 {
  36.             background: #f1f1f1;
  37.             height: 100px; /* 块高 */
  38.             /* 行高等于块高，文本垂直居中 */
  39.             line-height: 100px; /* 文本行高 */
  40.         }
  42.         .l1 {
  43.             text-decoration: underline; /* 下划线 */
  44.         }
  46.         .l2 {
  47.             text-decoration: line-through; /* 删除线 */
  48.         }
  50.         .l3 {
  51.             text-decoration: overline; /* 上划线 */
  52.         }
  54.         span{
  55.             vertical-align: middle;
  56.         }
  58.         img {
  59.             height: 100px;
  60.             width: 200px;
  61.             vertical-align: middle; /* 垂直对齐 */
  62.         }
  64.     </style>
  66. </head>
  67. <body>
  69.     <!-- span标签：重点要突出的元素，标题等（约定俗成） -->
  70.     <span id="title">CSS</span>
  72.     <h1>简介</h1>
  73.     <p class="p1">CSS 指的是层叠样式表* (Cascading Style Sheets)</p>
  74.     <p class="p2">CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素</p>
  75.     <p>CSS 节省了大量工作。它可以同时控制多张网页的布局</p>
  76.     <p class="p4">外部样式表存储在 CSS 文件中</p>
  78.     <p class="l1">1111111111</p>
  79.     <p class="l2">2222222222</p>
  80.     <p class="l3">3333333333</p>
  82.     <p class="img_1">
  83.         <img src="../../image/1920x1080.jpg" alt="">
  84.         Hello World!
  85.     </p>
  87. </body>
  88. </html>

超链接伪类

  1. <!DOCTYPE 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>Demo08</title>
  9.     <style>
  10.         /* 默认状态 */
  11.         a {
  12.             text-decoration: none;
  13.             color: #000000;
  14.         }
  16.         /* 鼠标悬浮状态 */
  17.         a:hover {
  18.             color: orange;
  19.             font-size: 20px;
  20.         }
  22.         /* 鼠标按住未释放状态 */
  23.         a:active {
  24.             color: green;
  25.         }
  27.         /* 鼠标点击后状态 */
  28.         /* a:visited {
  29.             color: red;
  30.         } */
  32.         #price {
  33.             /* text-shadow: 水平偏移 垂直偏移 阴影半径 阴影颜色 */
  34.             text-shadow: 5 px 5px 2px #41cffa;
  35.         }
  36.     </style>
  38. </head>
  39. <body>
  41.     <a href="#">
  42.         <img src="../../image/mcgx.jpg" alt="">
  43.     </a>
  44.     <p>
  45.         <a href="#">码出高效：Java开发手册</a>
  46.     </p>
  47.     <p>
  48.         <a href="">作者：孤尽老师</a>
  49.     </p>
  50.     <p id="price">
  51.         ￥99
  52.     </p>
  54. </body>
  55. </html>

列表样式

  1. <!DOCTYPE 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>Demo09</title>
  9.     <link rel="stylesheet" href="../css/Demo09.css" type="text/css">
  11. </head>
  12. <body>
  14.     <div id="nav">
  15.         <h2 class="title">全部商品分类</h2>
  17.         <ul>
  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>&nbsp;&nbsp;<a href="#">数码</a></li>
  20.             <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
  21.             <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
  22.             <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
  23.             <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
  24.             <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
  25.             <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
  26.         </ul>
  27.     </div>
  29. </body>
  30. </html>
  1. /* Demo09.css */
  2. #nav {
  3.     width: 300px;
  4.     background: #f1f1f1;
  5. }
  7. .title {
  8.     font-size: 18px;
  9.     font-weight: bold;
  10.     text-indent: 1em;
  11.     line-height: 35px;
  12.     color: #ffffff;
  13.     /* 背景颜色，背景图片，图片位置，平铺方式 */
  14.     background: #ffa3a3 url("../../image/down.png") 270px 8px no-repeat;
  15. }
  17. ul {
  18.     background: #f1f1f1;
  19. }
  21. /*
  22.     list-style:
  23.         none  去掉圆点
  24.         circle  空心圆
  25.         decimal  数字
  26.         square  正方形
  27. */
  28. ul li {
  29.     line-height: 30px;
  30.     list-style: none;
  31.     text-indent: 1em;
  32.     background-image: url("../../image/right.png");
  33.     background-repeat: no-repeat;
  34.     background-position: 240px 9px;
  35. }
  37. a {
  38.     text-decoration: none;
  39.     font-size: 14px;
  40.     color: #999999;
  41. }
  43. a:hover {
  44.     text-decoration: underline;
  45.     color: #000000;
  46. }

背景

  1. <!DOCTYPE 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>Demo10</title>
  9.     <style>
  10.         div {
  11.             width: 1000px;
  12.             height: 500px;
  13.             border: 2px solid #23ccff;
  14.             /* 默认平铺 */
  15.             background-image: url(../../image/mcgx.jpg);
  16.         }
  18.         /* 水平平铺 */
  19.         .div1 {
  20.             background-repeat: repeat-x;
  21.         }
  23.         /* 竖直平铺 */
  24.         .div2 {
  25.             background-repeat: repeat-y;
  26.         }
  28.         /* 不平铺 */
  29.         .div3 {
  30.             background-repeat: no-repeat;
  31.         }
  32.     </style>
  34. </head>
  35. <body>
  37.     <div class="div1"></div>
  38.     <div class="div2"></div>
  39.     <div class="div3"></div>
  41. </body>
  42. </html>

渐变

  1. <!DOCTYPE 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>Demo11</title>
  9.     <style>
  10.         /* 径向渐变，圆形渐变 */
  11.         body {
  12.             background: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
  13.         }
  14.     </style>
  16. </head>
  17. <body>
  19. </body>
  20. </html>

盒子模型

盒子属性

margin 外边距

padding 内边距

border 边框

边框属性

边框粗细

边框样式

边框颜色

  1. <!DOCTYPE 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>Demo12</title>
  9.     <style>
  10.         h1,ul,li,a,body{
  11.             /* body总有一个默认的外边距margin */
  12.             margin: 0;
  13.             padding: 0;
  14.             text-decoration: none;
  15.         }
  17.         #box {
  18.             width: 300px;
  19.             /* border: 粗细 样式（solid 实线、dashed 虚线） 颜色 */
  20.             border: 1px solid red;
  21.             /* 外边距可以居中元素  margin: 0 auto  （水平居中） */
  22.             margin: 0 auto;
  23.         }
  25.         h2 {
  26.             font-size: 16px;
  27.             background-color: #3cbda6;
  28.             line-height: 30px;
  29.         }
  31.         form {
  32.             background: aquamarine;
  33.         }
  35.         div:nth-of-type(1) input {
  36.             border: black solid 3px;
  37.         }
  39.         div:nth-of-type(2) input {
  40.             border: #ad0b8c dashed 3px;
  41.         }
  43.         div:nth-of-type(3) input {
  44.             border: #008c27 solid 3px;
  45.         }
  46.     </style>
  48. </head>
  49. <body>
  51.     <div id="box">
  52.         <h2>会员登录</h2>
  53.         <form action="#">
  54.             <div>
  55.                 <span>用户名：</span>
  56.                 <input type="text">
  57.             </div>
  58.             <div>
  59.                 <span>密码：</span>
  60.                 <input type="text">
  61.             </div>
  62.             <div>
  63.                 <span>邮箱：</span>
  64.                 <input type="text">
  65.             </div>
  66.         </form>
  67.     </div>
  69. </body>
  70. </html>

圆角边框、盒子阴影

  1. <!DOCTYPE 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>Demo13</title>
  9.     <style>
  10.         /* border-radius: 左上 右上 右下 左下 */
  11.         /* 圆：圆角 = 半径 */
  12.         .div1 {
  13.             width: 100px;
  14.             height: 100px;
  15.             border: 10px solid #60f1b9;
  16.             border-radius: 60px;
  17.         }
  19.         /* 盒子阴影 */
  20.         .div2 {
  21.             width: 100px;
  22.             height: 100px;
  23.             border: 10px solid #888888;
  24.             box-shadow: 10px 10px 1px #d8d8d8;
  25.         }
  26.     </style>
  28. </head>
  29. <body>
  31.     <div class="div1">
  33.     </div>
  35.     <div class="div2">
  37.     </div>
  39. </body>
  40. </html>

display

  1. <!DOCTYPE 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>Demo14</title>
  9.     <style>
  10.         /*
  11.             display:
  12.             block  块元素
  13.             inline  行内元素
  14.             inline-block  是块元素，但是可以内联，在一行
  15.             none  隐藏元素
  16.         */
  17.         div{
  18.             width: 100px;
  19.             height: 100px;
  20.             border: 1px solid red;
  21.             display: inline;
  22.         }
  24.         span {
  25.             width: 100px;
  26.             height: 100px;
  27.             border: 1px solid red;
  28.             display: inline-block;
  29.         }
  30.     </style>
  32. </head>
  33. <body>
  35.     <div>div块级元素</div>
  36.     <span>span行内元素</span>
  38. </body>
  39. </html>

float 浮动

  1. <!DOCTYPE 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>Demo15</title>
  9.     <link rel="stylesheet" href="../css/Demo15.css">
  11. </head>
  12. <body>
  13.     <div id="father">
  14.         <div class="layer01"><img src="../../image/img1.jpg" alt=""></div>
  15.         <div class="layer02"><img src="../../image/img2.jpg" alt=""></div>
  16.         <div class="layer03"><img src="../../image/img3.jpg" alt=""></div>
  17.         <div class="layer04">
  18.             浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
  19.         </div>
  20.     </div>
  21. </body>
  22. </html>
  1. /* Demo15 */
  2. div {
  3.     margin: 10px;
  4.     padding: 5px;
  5. }
  7. #father {
  8.     border: 1px #000 solid;
  9. }
  11. .layer01 {
  12.     border: 1px #F00 dashed;
  13.     display: block;
  14.     float: right;
  15. }
  17. .layer02 {
  18.     border: 1px #00F dashed;
  19.     display: block;
  20.     float: right;
  21. }
  23. .layer03 {
  24.     border: 1px #060 dashed;
  25.     display: block;
  26.     float: right;
  27. }
  29. .layer04 {
  30.     border: 1px #666 dashed;
  31.     display: block;
  32.     float: right;
  33. }

父级边框及塌陷问题

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

解决方案：

1、增高父级元素高度

2、增加一个空的div标签，清除浮动

  1. <body>
  2.     <div id="father">
  3.         <div class="layer01"><img src="../../image/img1.jpg" alt=""></div>
  4.         <div class="layer02"><img src="../../image/img2.jpg" alt=""></div>
  5.         <div class="layer03"><img src="../../image/img3.jpg" alt=""></div>
  6.         <div class="layer04">
  7.             浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
  8.         </div>
  10.         <div class="clear"></div>
  12.     </div>
  13. </body>
  1. .clear {
  2.     clear: both;
  3.     margin: 0;
  4.     padding: 0;
  5. }

3、overflow

  1. 在父级元素中增加一个 overflow: hidden
  1. #father {
  2.     border: 1px #000000 solid
  3. }

4、在父类添加一个伪类：after

  1. #father {    
  2.     border: 1px #000000 solid
  3. }
  5. #father:after {
  6.     content: '';
  7.     display: block;
  8.     clear：both;
  9. }

定位

1、相对定位

2、绝对定位

3、固定定位

4、z-index

5、透明度

  1. <!DOCTYPE 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>Demo17</title>
  9.     <style>
  10.         body {
  11.             padding: 20px;
  12.         }
  14.         div {
  15.             margin: 10px;
  16.             padding: 5px;
  17.             font-size: 12px;
  18.             line-height: 25px;
  19.         }
  21.         #father {
  22.             border: 2px solid #666;
  23.             padding: 0;
  24.             height: 1000px;
  25.             /* position: relative; */   /*父级元素的定位*/
  26.         }
  28.         /* 相对定位 */
  29.         /* 相对于自己原来的位置进行偏移，原来位置会保留 */
  30.         #first {
  31.             background: rgb(56, 163, 70);
  32.             border: 2px dashed rgb(89, 255, 111);
  33.             position: relative; /* 相对定位 */
  34.             top: -20px;
  35.             left: 20px;
  36.         }
  38.         /* 绝对定位 */
  39.         /*
  40.             没有父级元素定位的情况下，相对于浏览器偏移
  41.             有父级元素定位的情况下，相对于父级元素偏移
  42.             原来位置不会保留
  43.         */
  44.         #second {
  45.             background: rgb(82, 167, 182);
  46.             border: 2px dashed rgb(118, 234, 255);
  47.             position: absolute; /* 绝对定位 */
  48.             right: 50px;
  49.         }
  51.         #third {
  52.             background: rgb(133, 93, 165);
  53.             border: 2px dashed rgb(205, 143, 255);
  54.         }
  56.         /* 固定定位 */
  57.         /* 相对于浏览器偏移，不保留原来位置，不随页面移动 */
  58.         #fourth {
  59.             width: 50px;
  60.             height: 50px;
  61.             background: rgb(207, 201, 114);
  62.             border: 2px dashed rgb(255, 245, 98);
  63.             position: fixed;
  64.             right: 0;
  65.             top: 0;
  66.         }
  68.         ul,li {
  69.             padding: 0px;
  70.             margin: 0px;
  71.             list-style: none;
  72.         }
  74.         #content {
  75.             width: 300px;
  76.             padding: 0px;
  77.             margin: 0px 0px 0px 10px;
  78.             overflow: hidden;
  79.             font-size: 12px;
  80.             line-height: 25px;
  81.             border: 1px solid #666;
  82.         }
  84.         #content ul {
  85.             position: relative;
  86.         }
  88.         .tipText, .tipBg{
  89.             position: absolute;
  90.             width: 300px;
  91.             height: 25px;
  92.             top:175px;
  93.         }
  95.         /* z-index 图层 */
  96.         .tipText {
  97.             color: #FFFFFF;
  98.             z-index: 999;
  99.         }
  101.         .tipBg {
  102.             background: #8a8a8a;
  103.             /* 透明度 */
  104.             opacity: 0.5;  /* (0~1) */
  105.         }
  106.     </style>
  108. </head>
  109. <body>
  110.     <div id="father">
  111.         <div id="first">第一个盒子</div>
  112.         <div id="second">第二个盒子</div>
  113.         <div id="third">第三个盒子</div>
  114.         <div id="fourth">第四个盒子</div>
  116.         <div id="content">
  117.             <ul>
  118.                 <li><img src="../../image/img2.jpg" alt=""></li>
  119.                 <li class="tipText">文本文字</li>
  120.                 <li class="tipBg"></li>
  121.                 <li>时间：2020.01.01</li>
  122.                 <li>地点：XXX</li>
  123.             </ul>
  124.         </div>
  126.     </div>
  127. </body>
  128. </html>

动画

了解，略

CSS入门笔记的更多相关文章

  1. 【前端】CSS入门笔记

    教程 CSS 指层叠样式表 (Cascading Style Sheets) CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器通常是您需要改变样式的 HTML 元素 ...

  2. Css技术入门笔记02

    第一篇见Css入门笔记01http://blog.csdn.net/qq_32059827/article/details/51406674 4.其他选择器 4.1.关联选择器 有时在页面上会出现我们 ...

  3. [HeadFist-HTMLCSS学习笔记][第七章CSS入门：加一点样式]

    CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...

  4. HTML&CSS精选笔记_CSS入门

    CSS入门 CSS核心基础 CSS样式规则 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} CSS代码结构中的特点 CSS样式中的选择器严格区分大小写,属性和值不区分大小写,按照 ...

  5. 【干货】Html与CSS入门学习笔记4-8

    四.web镇之旅,连接起来 找一家托管公司如阿里云,购买域名和空间,然后将网页文件上传到购买的空间的根目录下. 1.绝对路径url url:uniform resource locators 统一资源 ...

  6. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  7. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  8. JavaScript基础——JavaScript入门(笔记)

    JavaScript入门(笔记) JavaScript是一种轻量级.解释型的Web开发语言,该语言系统不是很庞杂,简单易学.由于所有现代浏览器都已嵌入JavaScript引擎,JavaScript源代 ...

  9. Python爬虫 小白[3天]入门笔记

    笔记来源 Day-0 1.如果你还不了解Python的基础语法,可以移步|>>>Python 基础 小白 [7天] 入门笔记<<<|或自行学习. 简介 1.什么是爬 ...

随机推荐

  1. 图计算 on nLive：Nebula 的图计算实践

    本文首发于 Nebula Graph Community 公众号 在 #图计算 on nLive# 直播活动中,来自 Nebula 研发团队的 nebula-plato 维护者郝彤和 nebula-a ...

  2. HashTable源码学习

    一.介绍 1.HashMap和HashTable的区别 1.相同点 二者都实现了Map接口. 底层都是哈西表 2.不同点 Hashtable继承自Dictionary类,而HashMap继承自Abst ...

  3. zabbix主动上报mysql数据库内容

    zabbix_sender命令支持主动上报数据,web服务端添加对应机器和采集器即可. 2015年刚接触zabbix时候,用的上报sqlserver脚本是select数据后插入到临时表,bcp下载到本 ...

  4. 数据库delete from和truncate删除的区别详解

    一:区别 1.delete from 后面可以直接接条件,truncate不可以 2.delete from 记录是一条条删除的,所删除的每行记录都会进入日志,而truncate一次性删除整个页,因此 ...

  5. CMake 交叉编译

    CMake 交叉编译 交叉编译就是说在平台 A (宿主机)上编译出可以在平台 B (目标机) 上运行的程序,比如在 x86 上编译 ARM 程序 要交叉编译首先要去下载目标平台的工具链,比如要编译 A ...

  6. png图片隐写

  7. [Java]Java中的自动包装

    来源:https://www.cnblogs.com/cheapcrook/archive/2012/04/25/2470478.html 自动拆装箱(AutoBoxing) 是JDK1.5中新增加的 ...

  8. Smartbi实践：制作可视化分析报表的感悟

    ​估计看到这篇文章的朋友,都是有使用过Smartbi制作数据可视化图表的.但是不是制作过程跟制作效果并没有让自己那么满意.使用过程也经常遇到一些问题解决不了?那是因为你使用的方法不对.你是否在使用Sm ...

  9. SpringBoot 实现 excel 全自由导入导出，性能强的离谱，用起来还特优雅

    一.简介 在实际的业务系统开发过程中,操作 Excel 实现数据的导入导出基本上是个非常常见的需求. 之前,我们有介绍一款非常好用的工具:EasyPoi,有读者提出在数据量大的情况下,EasyPoi ...

  10. 【C# .Net GC】Windows 系统上的大型对象堆

    原文链接:https://docs.microsoft.com/zh-cn/dotnet/standard/garbage-collection/large-object-heap NET 垃圾回收器 ...