HTML-05

用户409379271368
66 阅读8分钟

  1. CSS特性

    • 继承性

      • 某些属性可以继承父类的,一般和文本相关的属性都可以继承

        <!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>
    /* 原本写法 */
    /* span,p,div {
      color: red;
    } */
​
    /* 继承写法 */
    /* .box下面的子类继承它的颜色属性
    继承父类的一些属性 */
    .box {
      color: yellow;
    }
  </style>
</head>
<body>
  
​
  <div class="box">
    <span>我是span</span>
    <p>我是p</p>
    <div class="inner">
      <div>我是div</div>
    </div>
  </div>
</body>
</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>
    .box {
      /* 
      浏览器默认字体大小为16px
      那么父类的字体大小为32px
      那么子类继承的是2em还是32px呢
      如果子类继承的是2em,则子类继承的字体大小为64px
      如果子类继承的是32px,则子类的字体大小为32px
      
      子类继承的是父类字体计算之后的值,也就是32px
      最终结论是: 子类继承父类的计算值,而非设置值
      */
      font-size: 2em;
    }
  </style>
</head>
<body>
  
  <div class="box">
    我是div
    <span>我是div的子类span</span>
  </div>
</body>
</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>
    .box {
      /* 子类可以继承 */
      color: red;
      /* 子类一般不继承该属性 */
      border: solid green;
    }
​
    .box span {
      /* 子类强制继承父类的border属性 */
      border: inherit;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <span>我是span</span>
    <p>我是p</p>
  </div>
</body>
</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>
    /*该段代码全都是类选择器,则权重相同,后面的会覆盖前面的内容*/
    .box {
      color: red;
    }
    /* top设置的值会覆盖box设置的 */
    .top {
      color: orange
    }
    /* load设置的值会覆盖top设置的 */
    .load {
      color: yellow;
    }
​
    /* let设置的值会覆盖load设置的
      最终生效的值
    */
    .let {
      color : green;
    }
  </style>
</head>
<body>
  
  <div class="box top let load">我是div</div>
</body>
</html>

      • 哪一个会生效呢, 两种判断依据

        • 判断一: 根据选择器的权重,权重大的生效

        • 判断二: 当权重相同时,则后面设置的生效

          • 上面的代码就是权重相同时,最后一个生效

      • 选择器权重

        • !important: 10000
        • 内联样式: 1000
        • id选择器: 100
        • class选择器,属性选择器,伪类: 10
        • 元素选择器、伪选择器: 1
        • 通配选择器: 0
        <!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>
​
    /* id选择器权重值为100,覆盖权重值低的选择器 */
    #box {
      color: green;
    }
​
    /* 类选择器,属性选择器,伪类选择器权重为10,则可以覆盖权重低的选择器 */
    .box {
      color : yellow;
    }
    /* 元素选择器.伪选择器的权重值为1,则覆盖通配符选择器*/
    div {
      color :orange;
    }
​
    /* 通配符选择器的权重最低: 0 */
    * {
      /* 添加!important,则权重最高,覆盖所有,最终这段代码显示的是红色 */
      color : red !important;
    }
​
    
  </style>
</head>
<body>
  <!-- 内联样式权重为1000,除了!important之外的全部覆盖 -->
  <div class="box" id="box" style="color: blue;">
    我是div元素
  </div>
</body>
</html>

    • 元素的类型

      • 块级元素: 独占父元素的一行,默认高度为元素内容决定
      • 行内级元素: 多个行内级元素可以在父元素同一行显示,宽高由内容决定

    • 元素类型的转换: CSS属性之display

      • div与span在元素上没有任何区别,只是在显示时,浏览器给其添加了display: block属性

      • 取值

        • block: 让元素显示为块级元素
        • inline: 让元素显示为行内级元素
        • inline-block: 让元素显示为行内块元素,具备行内级(不独占一行)和块级(可设置宽高)元素的特点
        • none: 隐藏元素

      • 块级与行内级元素相互转换

        <!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 {
      /* 将块级元素div转换为行内级元素 */
      display: inline;
    }
​
    span {
      /* 將行内级元素转换为块级元素 */
      display: block;
    }
  </style>
</head>
<body>
  <!-- 块级元素 -->
  <div class="box">我是div元素</div>
  <!-- 行内级元素 -->
  <span>我是span元素</span>
  <!-- 行内级元素 -->
  <a href="https:www.baidu.com">我是a元素</a>
</body>
</html>

      • 注意事项

        块级与行内级元素的书写注意事项

    • 元素隐藏方法

      • display: none, 影藏起来不占据原有位置
      • visibility: hidden, 隐藏起来占据原有位置
      • rgba: 将a设置为0,则透明,不影响子元素(文本)
      • opacity: 将值设置为0, 影响子元素

  2. CSS属性-overflow

    • 内容溢出解决方案

    • 取值

      • visible: 溢出部分可见
      • hidden: 溢出部分不可见
      • scroll: 添加滚动条
      • auto: 当内容没有溢出,则正常显示;当内容溢出,则添加滚动条

  3. CSS样式不生效可能原因

    • 选择器优先级太低

    • 选择器没有选中对应的元素(可能名称打错了)

    • CSS形式不对

      • 元素不支持此CSS属性, 如行内元素不支持设置宽高
      • 浏览器不支持CSS属性
      • 被同类型的CSS属性覆盖,如font覆盖font-size

  4. CSS盒子模型

    • 内容(content) : width/height

      <!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 {
      /* 内容 
      width没有设置时,默认为auto
      */
      /* width: 200px;
      height: 200px; */
      /* background-color: red; */
​
      /* 盒子的最大与最小width */
      /* 当页面扩大时,内容也增大,但是内容最大只能到750就停止增大
        当页面缩小时,内容也逐渐缩小,但是内容最小只能到550
      */
      height: 2000px;
      min-width: 550px;
      max-width: 750px;
      background-color: red;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>
</body>
</html>

    • 内边距(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: 36px; */
​
      /* padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 30px;
      padding-left: 40px; */
​
      /* 简写 */
      /* 顺时针: 上 右 下 左 */
      padding: 10px 20px 30px 40px;
​
      /* 简写二 */
      /* padding: 10 20 30 */
      /* 顺时针: 上10 右20 下30 左=right */
​
      /* 简写三 */
      /* padding: 10 20 */
      /* 顺时针: 上10 右20 下=上 左=右 */
    }
  </style>
</head>
<body>
  
  <div class="box">
    我是box
  </div>
​
</body>
</html>

    • 边框(border) : 元素自己的边框

      <!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 {
​
      display: inline-block;
      /* width */
      border-top-width: 10px;
      border-right-width: 20px;
      border-bottom-width: 30px;
      border-left-width: 40px;
​
      /* style */
      border-top-style: solid;
      border-right-style: dashed;
      border-bottom-style: groove;
      border-left-style: ridge;
​
      /* color */
      border-top-color: red;
      border-right-color: blue;
      border-bottom-color: green;
      border-left-color: orange;
​
      /* 缩写属性 */
      /* 顺序不做要求 */
      border: 10px solid red;
    }
​
  </style>
</head>
<body>
  
  <div class="box">
    我是box
  </div>
</body>
</html>

    • 外边距(margin) : 元素与其他元素之间的距离

      <!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>
    /* 暂时解决盒子之间空隙问题 */
    body {
      font-size: 0;
    }
    .box {
      display:inline-block;
      width: 100px;
      height: 100px;
      background-color: #f00;
      margin-right: 30px;
      /* margin-bottom: 30px; */
    }
​
    .container {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: #0f0;
      margin-left: 30px;
      /* margin-top: 30px; */
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="container"></div>
</body>
</html>

    • 其他

      • 圆角 - border-radius

        • 数值: 6px/8px/...
        • 百分比
        <!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 {
      width: 180px;
      height: 80px;
      background-color: red;
      border: 10px solid green; 
​
      /* 圆角 */
      /* 数值 */
      border-radius: 15px;
​
      /* 百分比 */
      /* 
        横圆角为 : 内容宽+边框宽 * 10% = 20px
        纵圆角为 : 内容高+边框高 * 10% = 10px
      */
      border-radius: 10%;
    }
  </style>
</head>
<body>
  <div class="box">
​
  </div>
</body>
</html>

    • margin与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>
​
    /* 要求
    1. 内部盒子左边距离父元素100px
    2. 内部盒子上边距离父元素100px
    结论: margin设置左右没问题,但是设置上下时有问题,padding设置上下左右都有问题;margin与padding各有各的问题
      margin更加适用于兄弟元素之间的距离
     padding更加适用于父子元素之间的距离
    */
    .box {
      width: 300px;
      height: 300px;
      background-color: #f00;
​
      /* 1 解法1 
      问题:盒子被撑大了
      */
      /* padding-left: 100px; */
​
​
​
      /* 2 解法1 */
      /* 问题:盒子被撑大了 */
      /* padding-top: 100px; */
​
      
    }
​
    .container {
      width: 100px;
      height: 100px;
      background-color: #0f0;
​
      /* 1 解法2 
      没有任何问题
      */
      margin-left: 100px;
​
      /* 2 解法2
      问题: 没有完成最终效果,并且使父元素下移了100px
      */
      margin-top: 100px;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <div class="container"></div>
  </div>
</body>
</html>

    • margin上下传递问题

      • 上

        <!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>
    /* 
      当我要设置子元素距离父元素上边100px时,使用margin会产生将100px传递到父元素使父元素向下移动100px
      解决方法:
        ① 当要设置父子元素之间的距离时,应该使用padding,而不是margin
        ② 给父元素设置border
        ③ 给父元素触发BFC(块级格式化上下文): 设置overflow: auto
    */
​
    .box {
      width: 300px;
      height: 300px;
      background-color: #f00;
      /* ① */
      padding-top: 100px;
      box-sizing: border-box;
      /* ② */
      /* border: 1px solid transparent; */
      /* ③ */
      /* overflow: auto; */
    }
​
    .containter {
      width: 100px;
      height: 100px;
      background-color: #0f0;
​
      /* 会传递到父元素,使其下降100px */
      /* margin-top: 100px; */
    }
  </style>
</head>
<body>
  
  <div class="box">
    <div class="containter">
​
    </div>
  </div>
</body>
</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下边距传递问题出现必须有以下条件:
      ① height 设置为auto
      ② 子元素的下边与父元素重合
​
    解决办法与上边距传递一致
    */
    .box {
      width: 300px;
      height: auto;
      background-color: #f00;
      /* 这个解决方法有点问题,还是出现了被增大的效果 */
      padding-bottom: 100px;
      box-sizing: border-box;
      /* border: 1px solid transparent; */
      /* overflow: auto; */
    }
​
    .containter {
      width: 100px;
      height: 100px;
      background-color: #0f0;
​
      /* margin-bottom: 100px; */
    }
  </style>
</head>
<body>
  
​
  <div class="box">
    <div class="containter"></div>
  </div>
  <div>传递了吗</div>
</body>
</html>

    • margin上下折叠问题

      • 垂直方向上相邻的2个margin,可能会合并为一个margin,两个值比较会取较大的值

    • 块级元素的水平居中问题 ---不推荐使用

      <!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>
​
    body {
      margin: 0;
      padding: 0;
      /* 方法一: 前提将块级元素转为行内块元素 */
      text-align: center;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;
​
      
      /* display: inline-block; */
      /* 方法二: auto自动分配 */
      margin: 0 auto;
​
    }
  </style>
</head>
<body>
  
  <div class="box"></div>
</body>
</html>
avatar
文章
阅读
粉丝