CSS相关知识总结

凉_橙
142 阅读4分钟

BFC

Block Formatting Context简称块级格式化上下文，BFC是一块单独的区域，它决定了子元素如何定位，不同的BFC区域互不影响，BFC内部的元素不会影响到外部环境。

哪些属性可以产生BFC？

  1. float：left||right 不为none
  2. position：fixed||absolute
  3. overflow：hidden||auto||scroll 不为visible
  4. display：inline-block，flex，grid，inline-flex，inline-grid，table-cell

隐藏元素的方式有哪些？

  1. display：none.不会渲染该DOM。不占位。不会绑定事件。
  2. opcity：0.渲染该DOM,只是隐藏。占位。可以绑定事件。
  3. visibility:hidde.渲染该DOM。占位。不会响应绑定事件。
  4. position：absolut。通过绝对定位移到可视区域外。渲染DOM。占位。在视图外。
  5. transform：scale(0,0)：将元素缩放为0.占位，不会响应绑定事件。

盒模型理解

  • 盒模型分为标准盒模型和怪异盒模型。
  • 盒模型都分为content，padding，border，margin。

可以给通过box-sizing属性来改变元素的盒模型。

box-sizing:content-box.标准盒模型（默认值）

box-sizing:border-box.怪异盒模型

怪异盒模型

怪异盒模型width和height包含padding,border,content.

标准盒模型

标准盒模型width和height只包含content.

如何实现水平垂直居中？

适用于已知居中元素宽高

1.子绝父相结合margin（适用于已知子盒子宽高）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 500px;
      height: 500px;
      border: 1px solid #ccc;
      position: relative;
    }
    .child{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -50px; //居中元素一半
      margin-top: -50px;  //居中元素一半
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

2.子绝父相结合计算属性（适用于已知子盒子宽高）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 500px;
      height: 500px;
      border: 1px solid #ccc;
      position: relative;
    }
    .child{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 50px);
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">123123</div>
  </div>
</body>
</html>

3.子绝父相结合margin:auto （适用于已知子盒子宽高）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 500px;
      height: 500px;
      border: 1px solid #ccc;
      position: relative;
    }
    .child{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

适用于居中元素宽高不定

1. 子绝父相与移动配合

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 500px;
      height: 500px;
      border: 1px solid #ccc;
      position: relative;
    }
    .child{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

2. 使用Flex布局

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 500px;
      height: 500px;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .child{
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

3. 使用Grid布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 500px;
      height: 500px;
      border: 1px solid #ccc;
      display: grid;
    }
    .child{
      justify-self: center;
      align-self: center;
     
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">123123</div>
  </div>
</body>
</html>

什么是响应式设计？如何实现？

定义

页面的设计会根据设备环境（屏幕的尺寸，屏幕的定向等）来进行相应的响应和调整。 简单点说，就是屏幕就是一个容器，里面的页面内容就是水，可以这样理解。

实现方式

  1. 媒体查询

通过媒体查询可以根据屏幕不同的尺寸来编写不同的样式来实现响应式

  1. 百分比

会根据百分比来实现数据响应式效果

  1. vw/vh

vw表示视图窗口的宽度，vh表示视图窗口的高度。可以根据这个来进行数据的响应式

  1. rem

css选择器有哪些？优先级？

  1. id选择器（#box）
  2. 类选择器（.box）
  3. 标签选择器(p)
  4. 后代选择器(#box div)
  5. 子类选择器(#box>div)
  6. 兄弟选择器(#box1+#box2)
  7. 群组选择器(div,p)

内联>ID选择器>类选择器>标签选择器

css实现显示过长变省略号

//一行变为省略号
.el{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
//多行变为省略号（演示为2行）
.el{
  display: -webkit-box;            /* 必须要加，支持多行裁剪 */
  -webkit-box-orient: vertical;    /* 垂直排列 */
  -webkit-line-clamp: 2;           /* 最多显示两行 */
  line-clamp: 2; 
  overflow: hidden;                /* 溢出隐藏 */
  text-overflow: ellipsis;        /* 超出省略号 */
}

子元素自适应父元素

.el{
   display: inline-flex; /* 让父元素宽度等于子元素总宽度 */
   flex-wrap: nowrap; /* 防止换行 */
   min-width: max-content;
}
avatar
文章
阅读
粉丝