css -- 在css加载失败的时候 提高用户体验 与 bfc

发布于：2022-12-03 ⋅ 阅读:(385) ⋅ 点赞:(0)

在css加载失败的时候 提高用户体验

  <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 {
        margin: 0;
      }
      .logo {
        width: 142px;
        height: 58px;
      }
      .logo h1 .logo-hd {
        display: block;
        width: 142px;
        height: 0;/*不设置高度防止文字与图片重叠 */
        padding-top: 58px; /* 用内边距撑开  */
        background: url(img/logo.jpg) no-repeat 0 0/142px 58px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="logo">
      <h1>
        <a href="" class="logo-hd"> 淘宝网 </a>
      </h1>
    </div>
  </body>

在这里插入图片描述

  <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>
    </style>
  </head>
  <body>
    <div class="logo">
      <h1>
        <a href="" class="logo-hd"> 淘宝网 </a>
      </h1>
    </div>
  </body>

在这里插入图片描述

table上的border

在table上直接设置border与设置css样式border有什么区别
答 直接设置 单元格也有变宽 设置css样式只能table整体有边框

caption-side

表格标题caption的位置
top 在表格上面
bottom 在表格下面

border-collapse

默认值separation 表格边框不合并
collapse 合并表格的边框

table-layout

单元格的宽度保持一致
table-layout:fixed 内容再多也不会改变单元格宽度 而是会换行
automatic 默认值

bfc

如何让元素成为bfc元素

body本身就是bfc元素
float 定义为为left right
position 定义为absolute fixed
display 定义为inline-block table-ceil
flex 布局
overflow 定义为hidden auto scroll

1.解决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>
      .box1 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-bottom: 100px;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: orange;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

在这里插入图片描述给两个盒子套上开启bfc的元素

<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>
      .container {
        overflow: hidden;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-bottom: 100px;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: orange;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
    </div>
    <div class="contaniner">
      <div class="box2"></div>
    </div>
  </body>
</html>

在这里插入图片描述

2.解决高度塌陷的问题

<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: 200px;
        border: 10px solid #000;
      }
      .box1 {
        float: left;
        width: 100px;
        height: 100px;
        background-color: green;
      }
      .box2 {
        float: left;
        width: 100px;
        height: 100px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

在这里插入图片描述使父级元素开启bfc

 .box {
        width: 200px;
        border: 10px solid #000;
        overflow: hidden
      }

在这里插入图片描述

3.解决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>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: #000;
      }
      .box2 {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        margin-top: 100px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>

在这里插入图片描述父级元素开启bfc

      .box1 {
        width: 300px;
        height: 300px;
        background-color: #000;
        overflow: hidden;
      }

在这里插入图片描述

4.解决浮动元素覆盖的问题

<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 {
        float: left;
        width: 100px;
        height: 100px;
        background-color: #000;
      }
      .box2 {
        width: 200px;
        height: 290px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="box1">我是box1</div>
    <div class="box2">
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>
  </body>
</html>

在这里插入图片描述给环绕元素开启bfc

      .box2 {
        display: table-cell;
        width: 200px;
        height: 290px;
        background-color: orange;
      }

在这里插入图片描述

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布