学习前端html5和css3笔记三

小瑜蔬食

已于 2023-03-03 15:07:58 修改

阅读量91

点赞数

文章标签：前端 html5 学习 Powered by 金山文档

于 2023-01-19 18:31:05 首次发布

本文链接：https://blog.csdn.net/weixin_53178802/article/details/128736198

版权

1- 表格.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 115px;
      height: 120px;
    }
    .num {
      color: #ccc;
    }
    del {
      color: #ccc;
    }
    span {
      color: red;
    }
  </style>
</head>
<body>


  <!-- 01-
       table 表格最大的标签
       tr    表格的每一行
       td    表格的单元格，里面的内容默认居左 -->     
  <!-- 02- border-collapse: collapse;合并边框      -->

  <table border="1" style="border-collapse: collapse;" width="350" height="250">
    <tr>
      
  <!-- 03- align="center"是text align="center"的意思 -->
  
      <td width="30" align="center" bgcolor="#FF2663" style="color: white;">1</td>
  <!-- 04- 本地磁盘地址：打开图片属性去复制位置再加上\图片名 --> 
      <td width="115"><img src="C:\Users\Lenovo\Desktop\一.web前端\3.第一阶段\第一阶段自己写的\1.系统课\day03完善\img\2.webp" alt=""></td>
      <td align="right">
        <p class="num">240 件已售</p>
        <p>香港直邮 天梭手表</p>
        <p><del>&yen;2579.00</del> <span>&yen;2529</span></p>
      </td>
    </tr>
    <tr>
      <td align="center" bgcolor="#FF5E8A" style="color: white;">2</td>
  <!-- 05- 在找不到图片路径的时候可以打字   -->
      <td><img src="../img/2.webp" alt=""></td>
      <td align="right">
        <p class="num">240 件已售</p>
        <p>香港直邮 天梭手表</p>
        <p><del>&yen;2579.00</del> <span>&yen;2529</span></p>
      </td>
    </tr>
    <tr>
      <td align="center" bgcolor="#FF8AAC" style="color: white;">3</td>
      <td><img src="../img/2.webp" alt=""></td>
      <td align="right">
        <p class="num">240 件已售</p>
        <p>香港直邮 天梭手表</p>
        <p><del>&yen;2579.00</del> <span>&yen;2529</span></p>
      </td>
    </tr>

  </table>

</body>
</html>

2- 个人简历表格.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>



<!-- 01- border-collapse:collapse; 表示折叠边框成单线条 -->
  <table border="1" style="border-collapse: collapse;" width="750" height="300">

<!-- 02- caption标签，为表格添加标题和摘要     -->
    <caption>个人简历空白格</caption>
<!-- 03- tr里面包裹了td就会画出横线     -->
  <tr align="center">

<!-- 04- td竖线 -->
    <td width="100">姓名</td>
    <td width="100"></td>
    <td width="100">性别</td>
    <td width="100"></td>
    <td width="100">应聘职务</td>
    <td width="100"></td>

<!-- 05- 竖向打开rowspan -->
    <td width="100" rowspan="3">照片</td>
  </tr>

  <tr align="center" >
    <td>出生日期</td>
    <td></td>
    <td>学历</td>
    <td></td>
    <td>联系电话</td>
    <td></td>
    <!-- <td></td> -->
  </tr>

  <tr align="center">
    <td>籍贯</td>

  <!-- 06- 横向打开colspan -->  
    <td colspan="1"></td>
    <!-- <td></td> -->
    <td>联系地址：</td>
   <td colspan="3"></td> 
    <!-- <td></td> -->
    <!-- <td></td> -->
  </tr>
  </table>


</body>
</html>

3- css文本属性.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>


 div {
      width: 400px;
      height: 500px;
      background-color: pink;

      /*01- color：字体颜色 */
      color: red;

      /*02- text-align：文本水平对齐方式 left默认值*/
      /* text-align: left; */
      text-align: center;
      /* text-align: right; */

      /*03- text-align: justify文本两端自动对齐 */
      text-align: justify;

      /*04- text-decoration: none文本的装饰 none默认值*/
      text-decoration: none;

      /*05- text-decoration: overline文本上面的一条线 */
      text-decoration: overline;

      /*06- text-decoration: underline文本下的一条线 */
      text-decoration: underline;

      /*07- text-decoration: line-through贯穿文本的一条线 */
      text-decoration: line-through;

      /*08-  font-size；字体大小 */
      font-size: 12px;

      /*09- text-indent文本的首行缩进,也就是首行空格的意思 */
      text-indent: 36px;
      /* text-indent: 2em; */
    }
    a {
      /*010- text-decoration: none去掉a标签的下划线 （简）*/
       text-decoration: none;
    }
  </style>
</head>
<body>

  <a href="#">今天是个好天气！</a>
  <div>今天是周四先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也</div>


</body>
</html>

4- css字体属性.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;

      /* 01- 字体大小：30px; 浏览器默认16px 最小可以设置12px(1px-11px都是12px)*/
         font-size: 30px;

      /* 02- 字体系列：Arial,'黑体'; 如果是中文或者带空格就要加引号，可以写多个用逗号间隔，浏览器不识别第一个的时候自动识别第二个 */
         font-family: Arial,'黑体';

      /* 03- 字体样式：normal; *//* 默认值是normal;normal意思是普通 */
          font-style: normal;

      /* 04- 字体样式：:italic斜体 */
          font-style: italic;

      /* 05- 字体粗细：bold 粗体; */
         font-weight: bold;

      /* 05- 字体粗细：100-900的不同粗细都可以设置; */
         font-weight: 300;

      /* 07-  字体样式：bold    粗体700；
                       bolder  粗体900；
                       lighter 细体100；
                       normal  默认标准字体400； */

      /* 08- vscode默认的字体是Arial微软雅黑            */

      /* 09- 上面用到的字体样式font-style就两种，一种是normal正常,另外一种是italic斜体 */
    } 
    p {
      font-size: 30px;
    }
      /* 10- 可以把斜体i标签和em标签设置回正常 */
    i {
      font-style: normal;
    }
    em {
      font-style: normal;
    }
  </style>
</head>
<body>

  <p>今天是周四</p>
  <div>今天是周四</div>
  <i>i标签</i>
  <em>em标签</em>

 
</body>
</html>

5- 衬线字体和无衬线字体.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
 * {
      font-size: 30px;
    }
    div {
      /* 01- 字体系列：'宋体';衬线字体 */
      font-family: '宋体';
    }
    p {
      /* 02- 字体系列：'黑体';无衬线字体 */
      font-family: '黑体';
    }
  </style>
</head>
<body>
 
  <div>ABCDEFG衬线字体</div>
  <p>ABCDEFG无衬线字体</p>

 
</body>
</html>

6- 行高.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
     
      /* 01- line-height意思是：行高 */
      /* 02- line-height: normal：默认值 normal */
      /* line-height: normal; */

      /* 03- line-height:50px;意思是行间距为50px */
      /* line-height: 50px; */

      /* 04- line-height: 3;意思是行高将会是此数字与当前字体尺寸相乘的结果 */
      line-height: 3;
    }
  </style>
</head>
<body>

  <div>今天是周四先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。
    然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。
    诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</div>

</body>
</html>

7- 单行文本垂直居中.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    div {
      width: 500px;
      height: 300px;
      background-color: lightblue;
      
      /*01- 水平-对齐 单行文本水平居中 */
            text-align: center;
     
      /*02- 行高，文本垂直居中，和当前盒子高度的值一致 */ 
        line-height: 300px;
    }
  </style>
</head>
<body>
<div>天天宅家里</div>
</body>
</html>

8- 字体简写.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
/*01- 字体简写 font: font-style font-weight font-size/line-height font-family
                必须同时写字体大小font-size和字体系列font-family才生效（简） */
      font: italic bold 25px/2 '宋体';
    }
  </style>
</head>
<body>

  <div>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也</div>


</body>
</html>

<!-- 01- font-size设置字体的大小，浏览器默认是16px, 最小设置不能小于12px (1px-11px跟12px的大小是一样的)
02- font-family设置文本的字体系列，如果属性值包含中文或者空格，要加引号，回退系统（备用字体），假如浏览器不支持第一个字体，第二个字体可以生效。
03- serif -- 衬线字体
04- 宋体（SimSun）
05- Windows 下大部分浏览器的默认中文字体，是为适应印刷术而出现的一种汉字字体。笔画有粗细变化，是一种衬线字体，宋体在小字号下的显示效果还可以接受，但是字号一大体验就很差了，所以使用的时候要注意，不建议做标题字体使用。
06- Times New Roman
07- Mac 平台 Safari 下默认的英文字体，是最常见且广为人知的西文衬线字体之一，众多网页浏览器和文字处理软件都是用它作为默认字体。
08- sans-serif -- 无衬线字体。（简）
09- 微软雅黑（Microsoft Yahei）没有。大名鼎鼎的微软雅黑相信都不陌生，从 windows Vista 开始，微软提供了这款新的字体，一款无衬线的黑体类字体，显著提高了字体的显示效果。现在这款字体已经成为 windows 浏览器最值得使用的中文字体。
010- 华文黑体（STHeiti）、华文细黑（STXihei），属于同一字体家族系列，MAC OS X 10.6 之前的简体中文系统界面的默认中文字体，正常粗细就是华文细黑，粗体下则是华文黑体。
011- 黑体-简（Heiti SC）。
012- 从 MAC OS X 10.6 开始，黑体-简代替华文黑体用作简体中文系统界面默认字体，苹果生态最常用的字体之一，包括 iPhone、iPad 等设备用的也是这款字体（简）。
013- 冬青黑体（Hiragino Sans GB）。
014- 又叫苹果丽黑，Hiragino 是字游工房设计的系列字体名称。是一款清新的专业印刷字体，小字号时足够清晰，Mac OS X 10.6 开始自带有 W3 和 W6 。
015- Helvetica。
016- 被广泛用于全世界使用拉丁字母和西里尔字母的国家。Helvetica 是苹果电脑的默认字体，微软常用的Arial 字体也来自于它。
017- Arial
018- Windows 平台上默认的无衬线西文字体，有多种变体，比例及字重（weight）和 Helvetica 极为相近。
019- Verdana
020- 无衬线字体，优点在于它在小字上仍结构清晰端整、阅读辨识容易。（简）
021- Tahoma。
022- 十分常见的无衬线字体，字体结构和 Verdana 很相似，其字元间距较小，而且对 Unicode 字集的支持范围较大。许多不喜欢 Arial 字体的人常常会改用 Tahoma 来代替，除了是因为 Tahoma 很容易取得之外，也是因为 Tahoma 没有一些 Arial 为人诟病的缺点，例如大写“i”与小写“L”难以分辨等。（这里故意反过来写）。
023- font-style设置文字字体样式，normal 正常显示，italic 斜体显示。
024- font-weight设置字体的粗细，lighter细体100，normal默认，标准的字体400，bold粗体700，bolder 粗体 900，取值：100-900；
025- line-height设置行高    ：normal 默认，合理的行高。length 设置固定的行间距。number 设置数字，此数字与当前字体尺寸相乘的结果。
026- font: font-style font-weight font-size/line-height font-family。
027- 注意：只有同时具有font-size和font-family的值时，简写才生效。 -->

9- 群组选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

 /* 01- 群组选择器,选择器之间用逗号分隔。(简) */
    div,p,.box,span {
      width: 100px;
      height: 100px;
      background-color: lime;
      font-size: 16px;
    }
  </style>
</head>
<body>

  <div>我是div标签</div>
  <p>我是p标签</p>
  <h1 class="box">我是标题标签</h1>
  <span>我是span标签</span>

</body>
</html>

10- 交集选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  /* 01- 交集选择器 自己符合条件一并且符合条件二的时候成立,由两个以上单一选择器组成  */
  /* 02- 交集选择器 标签不同类名相同的时候使用 */
  /* 03- 交集选择器 标签和标签不能用交集选择器，id和id也不要一起用交集选择器 */
  /* 04- 如下，标签名和类名在一起可以用交集选择器 */
    p.box {
      width: 200px;
      height: 200px;
      background-color: #909;
    }
  </style>
</head>
<body>

  <p class="box">我是p标签</p>
  <div class="box">我是div1</div>
  <div>我是div2</div>

</body>
</html>

11- 子代选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   
    /* 01- 子代选择器，用大于号连接，选中的子一定是亲儿子 */
    div>span {
      color: lime;
      font-size: 20px;
    }
    li>span {
      color: red;
      font-size: 30px;
    }
    
  </style>
</head>
<body>


  <ul>
    <li>
      <div>
        <span>我是div的亲儿子span1</span>
      </div>
    </li>
    <li>
      <span>我是li的亲儿子span2</span>
    </li>
  </ul>

</body>
</html>

12- 后代选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   
    /* 01— 后代选择器，选择器之间用空格隔开，可以选儿子，也可以选儿子的儿子。*/
    li span {
      color: pink;
      font-size: 30px;
    }
  </style>
</head>


<body>
 <ul>
    <li>
      <div>
        <span>span111111111</span>
      </div>
    </li>
    <li>
      <span>span222222</span>
    </li>
  </ul>
  <span>span3333我是外人</span>


</body>
</html>

13- 伪类链接选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   
     /*01- a:link 正常未访问的链接，未被点击过的链接 (简)*/
      a:link {
        font-size: 30px;
        color: red;
      }

     /*02- a:visited  访问过后的链接（高版本浏览器只有字体颜色生效）(简) */
      a:visited {  
        color: lime;
       font-size: 40px; /* 无效 */
      } 

    /*03- a:hover 鼠标悬停时的效果 (简)*/
      /* a:hover {
        color: orange;
        background-color: #909;
        font-size: 40px;
      } */
      /* p {
        width: 100px;
        height: 100px;
        background-color: yellow;
      } */

    /*04- p:hover 鼠标悬停时的效果(简) */ 
      /* p:hover {
        width: 200px;
        height: 200px;
        background-color: gray;
        color: aqua;
        font-size: 30px;
      } */

    /*05- a:active 鼠标点击那一刻(简) */
      /* a:active {
        background-color: coral;
        color: purple;
        font-size: 30px;
      } */

    /*06-  p:active 鼠标点击那一刻(简) */
      p:active {
        background-color: rgb(47, 211, 88);
      }
  </style>
</head>
<body>

  <a href="#">我是a标签</a>
  <p>我是p标签</p>

 
</body>
</html>

14- 鼠标移入.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }

     /*01- div:hover 鼠标悬停时的效果 (简)*/
         div:hover {
      width: 400px;
      height: 400px;
      background-color: blue;
      text-align: center;
      line-height: 400px;
    }
    </style>
</head>
<body>
    <div>1</div>
</body>
</html>

15- 鼠标移入父盒子让子盒子做变化.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   
    .big {
      width: 400px;
      height: 400px;
      background-color: pink;
    }
    .small{
      width: 100px;
      height: 100px;
      background-color: #009;
    }

    
    /* 01- .small:hover 鼠标移入悬停在.small盒子时的效果 (简) */
    .small:hover {
      background-color: yellow;
    }
    /* 02- 鼠标移入父盒子让小盒子做变化.big:hover .small (简)*/
    .big:hover .small{
      width: 200px;
      height: 200px;
      background-color: lime;
      color: #909;
      font-size: 30px;

    /* 03- 文本水平居中 */
      text-align: center;
    
    /* 04- 文本垂直居中，和当前盒子高度的值一致 */ 
       line-height: 200px;

    /* 05- 字号：粗体；  */
      font-weight: bold;
    }
  </style>
</head>
<body>

  <div class="big">我是大盒子
  <div class="small">我是小盒子</div>
  </div>

</body>
</html>

16- 鼠标移入父盒子让子盒子变化.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: #ccc;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: #099;
    }
 /* 01- 鼠标移入父盒子让子盒子做变化.father:hover .son */    
 
    .father:hover .son {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin:0 auto;
    }

 /* 02- hover的意思有翱翔、盘旋、徘徊、逗留的意思   */
    </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
 
</body>
</html>

17- padding内边距.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
       div {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 01- 内边距padding 内容到边框的距离 内边距会使盒子变大，
             如果不想变大要在盒子的宽width高height的值上做内减，

             内边距padding:20px; 一个值：四个方向 */
      padding:20px; 

      /* 02- 内边距padding  两个值：上下 左右 */
      /* padding:20px 30px; */

      /* 03- 内边距padding 三个值：上 左右 下 */
      /* padding:40px 50px 60px;    */

      /* 04- 内边距padding四个值：上右下左 顺时针方向 */
      /* padding: 30px 50px 70px 100px; */

      /* 05- 上内边距 */
      /* padding-top: 30px; */

      /* 06- 左内边距 */
      /* padding-left: 60px; */
    }
  </style>
</head>
<body>
  <div>div</div>
</body>
</html>

18- border边框的简写.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    
    div {
      width: 200px;
      height: 200px;
      background-color: orange;
      /* 01- 边框大小样式颜色的简写 边框会使盒子变大(简)*/
      border: 10px dashed #909;

      /* 02- border-top:上边框 */
      /* border-top: 5px solid lime; */

      /* 03- border-left:左边框  */
      /* border-left: 30px dotted blue; */
    }
  </style>
</head>
<body>

  <div>div</div>

</body>
</html>

19- border边框.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: orange;
      /* 01- 边框，边框会使盒子变大，
                  一个值：四个方向，
                  两个值：上下左右，
                  三个值：上左右下，
                  四个值：上右下左 顺时针方向 */

      /* 02- 和自身同色的边框的宽度 */
      border-width: 20px 40px 60px 20px;

      /* 03- 加上边框的样式  实线  虚线   双实线  点状线*/
      border-style: solid dashed double dotted;
      
      /* 04- 加上边框的样式的颜色 */
      border-color: aqua pink #909 lime;
    }
  </style>
</head>
<body>
<div>div</div>
</body>
</html>

20- 浏览器默认自带margin外边距和padding内边距.html

01- 浏览器默认自带8px外边距在body上，只有通配符选择器才能清理默认外边距

02- 通配符清理浏览器默认外边距和所有标签的默认内边距

03- 需要加外边距的时候再另外单个去加，例如加margin-bottom: 10px;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
 

    /*01- 浏览器默认自带8px外边距在body上，只有通配符选择器才能清理默认外边距  */
     * { 
    /*02- 通配符清理浏览器默认外边距和所有标签的默认内边距*/
    padding: 0;  
    margin: 0;
      
    } 
    
    div {
      width: 100px;
      height: 100px;
      background-color: #909;

    /*03-需要加外边距的时候再另外单个去加    */
      /* margin-bottom: 10px; */
    }
  

    /*04- p标签默认有16px上下外边距，
          只有通配符才能清理默认外边距，
          并且两个上下外边距之间是外边距塌陷的状态,
    */
     p {
      width: 200px;
      height: 200px;
      background-color: lime;
     
     }

     /*05- ul标签默认有16px上下外边距和40px左内边距，
           只有通配符才能清理默认外边距  */

     ul{
      width: 200px;
      height: 200px;
      background-color: pink;
     }

      li {
      width: 100px;
      height: 100px;
      background-color: blue;
      list-style: none;
     } 

  
  </style>
</head>
<body>
  <div>div</div>

  <p>p1</p>
  <p>p2</p>

  <ul>ul
    <li>li</li>
  </ul>

</body>
</html>

21- 盒模型.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      div{
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
</head>
<body>
    <!-- 01- 盒模型的概念：css盒模型本质是一个盒子，封装周围的html标签，它包
    括：外边距margin ，边框border，内边距padding，和实际内容width:设置宽度，height: 设置高度 -->
   
    <!-- 02- 内边距:padding：
    单边内边距：padding-top  padding-bottom  padding-left padding-right
     一个值：表示四个方向的内边距值
     两个值：分别表示上下，左右的内边距值
     三个值：分别表示上，左右，下的内边距值
     四个值：分别表示上，右，下，左的内边距值 -->
    
     <!-- 03- 边框：border : 
    border-width 边框的宽度
    border-style 边框的样式 
    - none  定义无边框
    - dotted  定义点状边框
    - dashed  定义虚线边框
    - solid 定义实现边框
    - double 定义双线。双线的高度等于border-width的值
      border-color 边框的颜色
    简写(简)border: 1px solid red;-->

    <!-- 04- 外边距：margin : （可以设置负值）
    单边外边距 ： margin-top margin-bottom margin-left margin-right
    简写：一个值：表示四个方向的外边距值。
         两个值：分别表示上下，左右的外边距值
         三个值：分别表示上，左右，下的外边距值
         四个值：分别表示上，右，下，左的外边距值 -->

   <!-- 05- 浏览器默认自带8px外边距在body上 -->
   <div>div</div>
</body>
</html>

22- margin外边距.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: lime;
      /* 01- margin:外边距，盒子和周围的距离，
                           可以设置负值，盒子不会变大；
               一个值：四个方向
               两个值：上下 左右
               三个值：上 左右 下
               四个值：上右下左 顺时针方向 */
      /* margin: 30px 50px 60px 80px; */
      
      /* 02- margin-top:上外边距和左外边距 */
      margin-top: -100px;
      margin-left: 100px;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: #909;
    }
  </style>
</head>
<body>
  <div class="box1">我是div1</div>
  <div class="box2">我是div2</div>
</body>
</html>

23- 父子盒子外边距塌陷.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    
    /* 01- 父子盒子外边距塌陷的意思是只在給子盒子设置margin-top:50px的时候，父盒子也跟着向下移动了。 */
    * {

      padding: 0;
      margin: 0;
    
    }
    .father{
      width: 200px;
      height: 200px;
      background-color: #909;

    /* 02- 解决方式a：给父盒子设置内边距或者边框，因为父盒子会变大，所以不推荐使用 */
      /* padding: 1px; */
      /* border: 1Px solid */

    /* 03- 最正确的解决方案b：给父盒子加溢出隐藏属性 overflow: hidden;实际上是出发BFC ，推荐使用(简)*/
      overflow: hidden;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: rgb(248, 244, 9);
      margin-top: 50px;
  
    }
  </style>
</head>
<body>
  <div class="father">
  <div class="son"></div>
</div>
</body>
</html>

24- 兄弟关系外边距塌陷.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    * {
      padding: 0;
      margin: 0;
       }

    .box1 {
      width: 200px;
      height: 200px;
      background-color: #909;
      margin-bottom: 30px;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: lime;
      margin-top: 50px;
    }
    /* 01- 兄弟关系外边距塌陷的意思就是上面盒子的margin-bottom: 30px;
    和下面盒子的margin-top: 50px;重叠了，两个盒子之间总共的外边距就没有达到80px */
    
    /* 02- 兄弟关系外边距塌陷解决方式：给任何一个盒子套一个父标签father，
    给父标签设置overflow: hidden溢出隐藏属性，
    才能真正实现box1：margin-bottom: 30px;
               box2：margin-top: 50px; 上下总共距离是80px*/
    .father {
      overflow: hidden;
    }
  </style>
</head>
<body>
 
  <div class="father">
  <div class="box1"></div>
  </div>
  <div class="box2"></div>


</body>
</html>

25- max-width最大宽度在父盒子.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0px;
            margin: 0px;
        }


        .father {
    /* 01- 
           max-width最大宽度可以无限缩小，
           max-width在父盒子上面时，
           父盒子的max-width缩小到超过子盒子时，子盒子宽度不变不动 ，
           父盒子可以继续无限缩小。
          
           
           */
         max-width:400px;
         height:400px;
         background-color: pink;
        }
        
        .son{
            width:  200px;
            height: 200px;
            background-color: greenyellow;
        }
     
        
    </style>
</head>
<body>
    <div class="father">父
    <div class="son">子</div>
    </div>
   
</body>
</html>

26- max-width最大宽度在子盒子 .html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
        }

        .father {
         width:400px;
         height:400px;
         background-color: pink;
        }
       
        
   
        .son{
     /* 01- max-width最大宽度可以无限缩小,
           max-width在子盒子上面时，子盒子的max-width可以无限缩小，
           子盒子的宽度不会超过父盒子，但是父盒子放大时，
           子盒子会放大到自己设置好的宽度后，就不动了，这时父盒子可以继续放大，
    */ 
     /* 02- max-width最大宽度可以无限缩小,
           max-width在子盒子上面时，子盒子的max-width可以无限缩小，
           子盒子的宽度不会超过父盒子，但是父盒子缩小时，
           父盒子会带动子盒子一起缩小至消失，又一起缩小至父盒子是满屏的状态，子盒子回到自己的原本的max-width:500px的状态
    */  

            max-width:500px;
            height: 200px;
            background-color: greenyellow;
        }
     
 </style>
</head>
<body>
    <div class="father">父
    <div class="son">子</div>
    </div>
   
</body>
</html>

27- min-width最小宽度在父盒子.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0px;
            margin: 0px;
            
        }

        .father {
    /* 01- min-width在父盒子上面时,  父盒子满屏
  
           */
         min-width:400px;
         height:400px;
         background-color: yellow;
        }
        
        .son{
            width:  200px;
            height: 200px;
            background-color: purple;
        }
     
        
    </style>
</head>
<body>
    <div class="father">父
    <div class="son">子</div>
    </div>
   
</body>
</html>

28- min-width最小宽度在子盒子 .html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0px;
            margin: 0px;
           
        }

        .father {
  
         width:400px;
         height:400px;
         background-color: yellow;
        }
    
          /* 
          01- min-width在子盒子上面时,无法放大缩小子盒子尺寸。
           */
            
          /* 
          02- min-width在子盒子上面时,
          放大父盒子尺寸时可以带动子盒子同时放大 。
          */

          /* 
          03- min-width在子盒子上面时,
          放大父盒子尺寸时可以带动子盒子同时放大至满屏宽度后 不动 。
          */

          /* 
          04- min-width在子盒子上面时,
          缩小父盒子尺寸时可以带动子盒子同时缩小至子盒子原有宽度，子盒子不再缩小，
          父盒子继续缩小。 
          */
        .son{
            min-width:200px;
            height: 200px;
            background-color: purple;
        }
     
        
    </style>
</head>
<body>
    <div class="father">父
    <div class="son">子</div>
    </div>
   
</body>
</html>

29- min-height最大高度在父盒子.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
        }

        .father {
        
        /* 
          01- min-height最小高度在父盒子，
              缩小父盒子的min-height尺寸时，
              min-height可以缩小至与子盒子同等高度则不动了
        */ 
        
        /* 
          02- min-height最小高度在父盒子，
              放大父盒子的min-height尺寸时，
              子盒子不动，
              min-height父盒子可以放大到最大
        */   
         width:400px;
         min-height:400px;
         background-color: yellow;
        }
    
       
  
        .son{
            width:200px;
            height: 200px;
            background-color: purple;
        }
     
        
    </style>
</head>
<body>
    <div class="father">父
    <div class="son">子</div>
    </div>
   
</body>
</html>

30- max-height最大高度在父盒子 .html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
        }

        .father {
        
        /* 
          01- max-height最大高度在父盒子,
               放大缩小父盒子的max-height尺寸时
               它和子盒子的大小都保持原封不动。
        */   
        
       
  
         width:400px;
         max-height:400px;
         background-color: yellow;
        }
    
         
        /* 
          02- max-height最大高度在父盒子，
       放大子盒子的height尺寸时，
       父盒子也跟随子盒子放大至自己原有尺寸后不再动，
       子盒子继续发大至最大
        */         
  
        .son{
            width:200px;
            height: 200px;
            background-color: purple;
        }
     
        
    </style>
</head>
<body>
    <div class="father">父
    <div class="son">子</div>
    </div>
   
</body>
</html>

31-边框实现小三角.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  
    div {
  
      width: 0px;
      border-width: 100px;
      border-style: solid;
      border-color:lime transparent transparent transparent


    }
  </style>
</head>
<body>
 <div></div>
</body>
</html>