CSS特性

CSS属性继承
常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性
默认继承：

<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>
    /* h1, p, span, strong {
      color: red;
    } */
    div.box {
      color: red;
    }

  </style>
</head>
<body>
  
  <div class="box">
    <h1>我是h1元素</h1>
    <p>
      我是p元素
      <span>哈哈哈</span>
      <strong>呵呵呵</strong>
    </p>
    <span>我是span元素</span>
  </div>

</body>
</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>
    .box {
      color: red;
      /* font-size: 30px; */
      /* 相对于自身字体(父元素的字体) */
      /* 浏览器 16px */
      font-size: 2em;/* 32px */
    }

    p {
      /* p元素继承了父类的32px */
      /* font-size: 2em; */
    }
  </style>
</head>
<body>
  
  <div class="box">
    box本身的内容
    <p>我是p元素</p>
  </div>

</body>
</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>
    .box {
      color: red;

      border: 2px solid purple;
    }

    .box p {
      /* 很少用 */
      border: inherit;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <p>我是p元素</p>
    <h1>我是h1元素</h1>
  </div>

</body>
</html>

CSS属性层叠
在一个项目中，一个元素的某个CSS属性可能会被设置多次不同的值，但是最后只能有一个生效，这就是属性的层叠性。

<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 {
      color: red;
    }

    .box {
      color: blue;
    }

    .one {
      color: green;
    }

    .first {
      color: purple;
    }

    .content {
      color: orange;
    }
  </style>
</head>
<body>

  <div class="box one first content">我是box</div>

</body>
</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>

  <!-- 
     !important：10000
     内联样式：1000
     id选择器：100
     类选择器、属性选择器、伪类：10
     元素选择器、伪元素：1
     通配符：0
    继承非选择器，但是它的优先级最低
   -->
  
  <style>
    div.box {
      color: red !important; /* 10000 */
    }

    /* id选择器: 100 */
    #main {
      color: orange;
    }

    /* 类选择器: 10 */
    .box {
      color: blue;
    }

    /* 元素选择器: 1 */
    div {
      color: purple;
    }

    /* 通配选择器: 0 */
    * {
      color: yellow;
    }
  </style>
</head>
<body>
  
  <!-- 内联样式: 1000 -->
  <div id="main" class="box one two" style="color: blue;">我是div元素</div>

</body>
</html>

HTML元素的类型
(一) 块级元素：独占父元素的一整行，如div，h1，p...
(二) 行内级元素：多个行内元素可以在父元素的同一行显示，如img，span...
修改HTML元素类型---display
元素与元素之间其实没有区别，div之所以是块级元素，占据父元素的一整行，是因为浏览器默认给div加上了display:block属性，让div成为了父元素；span标签也可以设置display:block属性成为一个块级元素，当然div设置display:inline也能成为span一样的行内元素。
display除了以上两个属性值，还有其他属性值：
1). inline-block: 让元素同时拥有行内级元素和块级元素的特点，称为行内块元素
2). none: 隐藏元素
块级元素除了独占一行这个特点外，还有可以设置宽高的特点(设置宽高任然独占一行，原因是块级元素的右外边距为auto，当元素有宽度时，会将除了自身宽度以外的值赋值给它)，这点行内级非替换元素是没有的，行内级非替换元素设置宽高无效。
如果想让行内级非替换元素可以设置宽高，且行内级特点(多个行内级元素可以在同一行显示)不变的情况下，可以将元素的display设置为inline-block；
元素隐藏
(1) 方式一：display:none ---元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样)
(2) 方式二：visibility：hidden ---元素不可见，但是会占据元素原本的位置
(3) 方式三：rgba设置颜色，将a的值设为0，不影响子元素；本质就是设置背景颜色透明，只能看见子元素
(4) 方式四：opacity设置透明度, 设置为0；子元素也跟着透明
CSS属性-overflow
overflow用于控制内容溢出时的行为
 visible：溢出的内容照样可见
 hidden：溢出的内容直接裁剪
 scroll：溢出的内容被裁剪，但可以通过滚动机制查看；会一直显示滚动条区域，滚动条区域占用的空间属于width、height
 auto：自动根据内容是否溢出来决定是否提供滚动机制

<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>
    .box {
      width: 300px;
      height: 100px;
      background-color: #f00;

      /* overflow: visible */
      overflow: auto;
    }
  </style>
</head>
<body>
  
  <div class="box">
    从充满历史气息的传统对称式花园，到各地功能与美感俱佳的小小菜园，再到与大艺术家们设计园林的邂逅，还是蒙顿·唐，说着一口流利的法语，寻访法国的每个角落，让人领略到原汁原味的法国风情，体会法国人融入骨子里的浪漫与优雅。
  </div>

</body>
</html>

盒子模型

HTML中的每个元素其实都可以看作是一个盒子，一个盒子具有以下四个属性

内容：width/height
设置盒子的内容是通过高度和宽度设置，width默认宽度为auto(理解为什么块级元素独占父元素一行)，且行内非替换元素设置width是无效的。
内边距：padding
通常设置内容和边框之间的间距

<!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>
    .box {
      /* 设置一个红色的实体边框 */
      border: 1px solid red;
      display: inline-block;

      /* 设置行高也能达到设置内边距一样的效果，但是设置行高终归是设置内容的 */
      /* line-height */
      /* line-height: 36px; */

      /* 内边距: padding */
      /* padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 30px;
      padding-left: 40px; */

      /* 等价于: 缩写属性 */
      padding: 10px 20px 30px 40px;

      /* 其他值的情况 */
      /* 3个值 */
      /* 省略left -> 使用right */
      padding: 10px 20px 30px;
      /* 2个值 */
      /* 省略: left -> 使用right */
      /* 省略: bottom -> 使用top */
      padding: 10px 20px;
      /* 1个值 */
      /* 上下左右都使用同一个值 */
      padding: 10px;
    }
  </style>
</head>
<body>
  
  <div class="box">我是box</div>

</body>
</html>

border
与padding/width/height略有不同，它可以设置四个方向的宽度，颜色，样式；

<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>
    .box {
      display: inline-block;

      width: 300px;
      height: 300px;

      /* width */
      /* border-top-width: 10px;
      border-right-width: 20px;
      border-bottom-width: 30px;
      border-left-width: 40px; */
      /* border-width: 10px 20px 30px 40px; */

      /* style */
      /* border-top-style: solid;
      border-right-style: dashed;
      border-bottom-style: groove;
      border-left-style: ridge; */
      /* border-style: solid dashed groove ridge; */

      /* color */
      /* border-top-color: red;
      border-right-color: blue;
      border-bottom-color: green;
      border-left-color: orange; */
      /* border-color: red blue green orange; */

      /* 总缩写属性 */
      border: 10px solid red;
    }
  </style>
</head>
<body>
  
  <div class="box">我是box</div>

</body>
</html>

border-radius
设置盒子圆角的

<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: 180px;
      height: 100px;
      background-color: #f00;

      border: 10px solid green;
    }

    .box {
      /* 设置圆角 */
      /* 设置具体的数值 */
      /* border-radius: 20px; */
      /* 设置百分比 */
      /* 百分比相对于谁, 了解即可 */
      /* 该处的百分比相对于：盒子的具体宽度(包括width，border，padding) 以及具体的高度 */
      border-radius: 10%;
    }

    .content {
      border-radius: 20px;
    }

    .home {
      width: 100px;
      height: 100px;
      border: 10px solid red;
      background-color: #0f0;

      border-radius: 50%;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>
  <div class="content"></div>


  <div class="home"></div>

</body>
</html>

margin

<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>
    /* 暂时解决方案：取消盒子之间的默认间距 */
    body {
      font-size: 0;
    }

    .box {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: #f00;

      /* margin-bottom: 30px; */
      /* margin-right: 30px; */
    }

    .container {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: #0f0;

      /* margin-top: 30px; */
      /* margin-left: 30px; */

      /* 缩写属性 */
      margin: 10 20px;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

  <div class="container"></div>

</body>
</html>

padding与margin的对比
padding是内边距，margin的外边距，他俩貌似没有什么关系，但是当我们设置要让子元素和父元素之间有一定的间距，padding与margin视乎都可以，但是又都有问题。

<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>
    .box {
      width: 300px;
      height: 300px;
      background-color: #f00;
      /* 
      父元素设置内边距，如果盒子大小为content-box时，padding会加大盒子的体积
      */
      /* 这个是设置内边距的解决方案 */
      /* padding-left: 30px;
      box-sizing: border-box; */

      /* 这个是子元素设置外边距的解决方案 */
      /* overflow: auto; */
      padding-top: 100px;

      box-sizing: border-box;

    }

    .container {
      width: 100px;
      height: 100px;
      background-color: #0f0;
      margin-left: 100px;
      /* 如果子元素设置margin时，设置上外边距时，父元素则会一起下调(这与给父元素设置margin-top无异)，这也是一个问题 */
      /* margin-top: 100px; */
    }

    /* 
      总结：虽然这种问题有两个解决方案，且每个解决方案都有自己的问题
      一般来说，margin设置的是外边距，其实更倾向于兄弟之间的距离
      而padding是内边距，在这里其实更适合使用内边距
    
    */
  </style>
</head>
<body>
  
  <div class="box">
    <div class="container"></div>
  </div>

</body>
</html>

margin上下传递问题
margin左右不传递
margin-top传递：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递：如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
解决方案：
(1). 设置边框（border）：在父元素上设置边框可以阻止margin的传递。但请注意，这会增加额外的宽度。
(2). 使用BFC（块级格式化上下文）：BFC可以防止margin的传递。通过触发BFC，可以解决margin的传递问题。
(3). 明确高度：为父元素设置明确的高度可以避免margin的传递。
margin上下折叠问题
Margin折叠现象：垂直方向上相邻的两个margin可能会合并成一个margin。
折叠分为两种情况：相邻的两个元素之间的折叠和父子元素之间的折叠。折叠后，会把两个值进行比较，最后取那个相对比较大的值。
防止Margin折叠的方法

给相邻的盒子分别设置bottom margin。
给父元素设置明确的高度。
避免在相邻的元素或父子元素之间使用相同的margin值。

块级元素水平居中 块级元素居中的原理 ：当块级元素的左右边距（margin）都设置为auto时，浏览器会自动分配剩余空间，实现居中效果。块级元素默认占据整行，因此当左右边距都设置为auto时，浏览器会将剩余空间平均分配，实现居中。 块级元素居中的方法：
方法一：将块级元素的左右边距(margin)都设置为auto。方法二：将块级元素的父元素设置为display: flex或display: grid，并使用justify-content或align-items属性实现居中。方法三：使用CSS的transform属性实现居中。 块级元素居中的注意事项 ：块级元素居中时，要确保父元素有足够的宽度。在使用transform属性实现居中时，要注意兼容性问题。

<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>
    body {
      margin: 0;
      padding: 0;

      /* inline-level box */
      /* 行内级: 行内非替换元素span/a 行内替换元素 img input inline-block */
      /* text-align: center; */
    }

    .container {
      width: 800px;
      height: 150px;
      background-color: #0f0;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;

      margin: 0 auto;
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="box"></div>
  </div>

</body>
</html>

outline外轮廓

外轮廓是元素边框外部的一个轮廓，不占用空间，不影响布局。
外轮廓可以用来突出显示元素，常用于可点击元素的视觉效果。
可以设置外轮廓的宽度、样式和颜色。
外轮廓可以通过outline属性进行设置。

<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>
    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;

      border: 50px solid orange;
      padding: 30px;

      outline: 30px solid #0f0;
    }

    /* 行内级元素设置margin-top无效 */
    a {
      margin-top: 100px;
      display: inline-block;

      outline: none;
    }

    input {
      outline: none;
    }

    /* a:focus {
      outline: none;
    } */
  </style>
</head>
<body>
  
  <div class="box"></div>

  <a href="#">百度一下</a>
  <input type="text">

</body>
</html>

阴影-box-shadow

<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>
    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;
      /* 
      x轴偏移量
      y轴偏移量
      模糊度
      扩散半径
      颜色
      outset：向内扩散(默认向外)
      */
      box-shadow: 5px 5px 10px orange, 10px 10px 10px green;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>

文字阴影

知识点1：text-shadow的基本概念

- text-shadow用于给文本添加阴影效果，增强视觉层次感。
- text-shadow可以设置阴影的水平偏移、垂直偏移、模糊距离和颜色。

知识点2：text-shadow的属性值

- 水平偏移：决定阴影在水平方向上的位置，可以为正数或负数。
- 垂直偏移：决定阴影在垂直方向上的位置，可以为正数或负数。
- 模糊距离：决定阴影的模糊程度，值越大，阴影越模糊。
- 颜色：设置阴影的颜色。

知识点3：text-shadow的多个阴影效果

- 可以为同一个文本设置多个text-shadow效果，通过逗号分隔每个阴影的属性值。
- 多个阴影会按照从上到下、从左到右的顺序叠加显示。

知识点4：text-shadow的特殊之处

- text-shadow没有向外延伸（spread）的属性值，因此不能设置阴影的扩展半径。
- text-shadow没有“inset”值，因此阴影不会向内偏移。

知识点5：text-shadow的浏览器兼容性

- text-shadow在主流浏览器中具有良好的兼容性，但在一些较旧或非主流浏览器中可能不支持。
- 为了确保跨浏览器的兼容性，可以使用前缀版本，如-webkit-、-moz-、-ms-等。

13. CSS盒子模型中的行内非替换元素

知识点1：行内非替换元素的特性- 宽度和高度不生效，无法改变元素的大小。

- padding属性上下特殊，撑大内容但不占据空间，左右撑大占据空间。
- border属性上下特殊，撑起元素但不占据空间，左右撑大占据空间。
- margin属性上下不生效，不会影响其他元素，左右生效。
- merging属性上下不生效，无法合并边距。

知识点2：行内非替换元素的适用场景- 用于内联元素，如文本、链接等。

- 用于需要与其他内容在同一行显示的元素。

知识点3：行内非替换元素的注意事项

- 在设置盒子模型属性时要特别小心，尤其是上下方向的属性。
- 避免破坏段落的美感，避免设置不必要的边距和边框。

知识点4：行内非替换元素的浏览器兼容性

- 在主流浏览器中具有良好的兼容性，但在一些较旧或非主流浏览器中可能不支持。
- 为了确保跨浏览器的兼容性，可以使用前缀版本，如-webkit-、-moz-、-ms-等。

<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>
    .content {
      background-color: #f00;
      color: white;

      /* 内容: width/height(压根不生效) */
      width: 300px;
      height: 300px;

      /* 内边距: padding */
      /* 特殊: 上下会被撑起来, 但是不占据空间 */
      /* padding: 50px; */

      /* 边框: border */
      /* 特殊: 上下会被撑起来, 但是不占据空间 */
      /* border: 50px solid orange; */

      /* 外边距: margin */
      /* 特殊： 上下的margin是不生效的 */
      margin: 50px;
    }
  </style>
</head>
<body>
  
  <span class="content">
    我是span内容, 哈哈哈
  </span>
  aaaaaaa
  <div>bbbbbb</div>

</body>
</html>

CSS-03

CSS特性

盒子模型

知识点1：text-shadow的基本概念

知识点2：text-shadow的属性值

知识点3：text-shadow的多个阴影效果

知识点4：text-shadow的特殊之处

知识点5：text-shadow的浏览器兼容性

知识点1：行内非替换元素的特性- 宽度和高度不生效，无法改变元素的大小。

知识点2：行内非替换元素的适用场景- 用于内联元素，如文本、链接等。

知识点3：行内非替换元素的注意事项

知识点4：行内非替换元素的浏览器兼容性