1. 对盒子模型的理解

定义：css基本盒子模型是css规范的模块，它定义的长方形的盒子

分类：盒模型按照标准定义分为标准盒模型和IE盒模型，按照元素类型分为块级盒模型和内联盒模型

使用：按照标准切换模型：box-sizing: border-box;或者box-sizing: context-box;

按照元素切换盒模型：display: block;或者display: inline;或者display: iinline-block

应用：盒模型有padding,border,margin属性；padding和margin设置的值沿着顺时针方向等

2. 对BFC的理解

定义：BFC是块格式化上下文,代表一个独立的空间, 这个空间子元素的渲染不会影响外部布局

创建BFC:

display: inline-block;

display: table-cell;

display: flex;

position: absolute;

position: fixed;

overflow: hidden

作用：

解决了垂直方向margin合并的问题

解决了设置float脱离文档流, 父元素高度塌陷问题

3. 对css选择器的理解

定义： css选择器是用来对选定页面元素进行样式修改的

种类：

标签选择器

通配符选择器

类选择器

ID选择器

标签属性选择器

伪类选择器

伪元素选择器

后代选择器

子代选择器

兄弟相邻选择器

通用兄弟选择器

4. 对css选择器的优先级的理解

定义: css选择器优先级是对于不同种类选择器组成的匹配规则

优先级： !important > 行内样式 > ID选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器 > 通配符、子类选择器、兄弟选择器

5. 对css属性继承的理解

定义: css继承指的是父元素设置的属性样式等, 子元素同时拥有该属性和样式

可继承属性:

字体：font、font-family、font-size、font-style、font-variant、font-weight

字母间距：letter-spacing

文字展示：line-height、text-align、text-indext、text-transform

字间距：word-spacing

可见性: visibility

6. 对px/em/rem/vw/vh的理解

定义:

px: 绝对单位，像素, 基本长度单位

em: 相对单位，相对当前元素文本的字体大小

rem: 相对单位，基于html元素字体大小

vw: 相对单位，相对浏览器的视口宽度单位(1vw代表视口宽度的1%）

vh：相对单位，相对于浏览器的视口高度单位(1vh代表视口高度的1%）

7. 实现左边定宽，右边自适应

flex布局

<!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: 0;
      padding: 0;
    }
    .A {
      width: 600px;
      height: 600px;
      border: 1px solid #000;
      display: flex;
    }
    .left {
      width: 200px;
      background-color: pink;
    }
    .right {
      flex: 1;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>

table布局

<!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: 0;
      padding: 0;
    }
    .A {
      width: 600px;
      height: 600px;
      border: 1px solid #000;
      display: table;
    }
    .left {
      width: 200px;
      background-color: pink;
      display: table-cell;
    }
    .right {
      display: table-cell;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>

grid布局

<!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: 0;
      padding: 0;
    }
    .A {
      width: 600px;
      height: 600px;
      border: 1px solid #000;
      display: grid;
      grid-template-columns: 200px auto;
    }
    .left {
      background-color: pink;
    }
    .right {
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>

8. 实现绝对居中

定宽高

绝对定位 + 负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>
    * {
      margin: 0;
      padding: 0;
    }
    .A {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative;
    }
    .box {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: pink;
      margin-left: -50px;
      margin-top: -50px;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="box"></div>
  </div>
</body>
</html>

绝对定位 + margin auto

<!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: 0;
      padding: 0;
    }
    .A {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative;
    }
    .box {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: pink;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="box"></div>
  </div>
</body>
</html>

不定宽高

绝对定位 + transform

<!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: 0;
      padding: 0;
    }
    .A {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative;
    }
    .box {
      position: absolute;
      background-color: pink;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="box">position + transform</div>
  </div>
</body>
</html>

table-cell

<!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: 0;
      padding: 0;
    }
    .A {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    .box {
      background-color: pink;
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="box">table-cell</div>
  </div>
</body>
</html>

flex布局

<!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: 0;
      padding: 0;
    }
    .A {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .box {
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="box">flex布局</div>
  </div>
</body>
</html>

9. 清除浮动方式

例如外部div没有设置高度，但是内部元素设置了浮动, 这时候会导致外部div塌陷, 这时候就需要清除浮动

方式：

* 1. 父元素设置固定宽高
  * 优点：简单, 代码量少, 没有兼容问题
  * 缺点: 内部元素高度不确定时不能使用
* 2. 内部添加新元素,并添加`clear: both;`
  * 优点: 简单, 代码量少,没有兼容问题
  * 缺点: 无语义, 不利于后期维护
* 3. 使用伪元素
  * 优点: 仅用css实现, 不容易出错
  * 缺点: 仅支持IE8以上和非IE浏览器
* 4. 触发父元素BFC
  * 优点: 仅使用css实现, 代码少, 浏览器支持好
  * 缺点: 用overflow: hidden触发可能会使内部元素被裁剪

<!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: 0;
      padding: 0;
    }
    .A {
      width: 100px;
      /* 方式一 */
      /* height: 20px; */
      padding: 10px;
      border: 1px solid red;
      /* 方法四 */
      /* overflow: hidden; */
    }
    .left {
      float: left;
    }
    .right {
      float: right;
    }
    /* 方法三 */
    /* .A::after {
      content: '';
      display: block;
      clear: both;
      height: 0;
    } */
    /* 方式二 */
    /* .else {
      clear: both;
    } */
  </style>
</head>
<body>
  <div class="A">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <!-- 方式2 -->
    <!-- <div class="else"></div> -->
  </div>
</body>
</html>

10. css画三角形

处于页面性能考虑,为避免发送过多的http请求，节省带宽，我们可能需要使用css手动绘制各种图案

对于实现三角形，我们可以利用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>
    * {
      margin: 0;
      padding: 0;
    }
    .A {
      width: 0;
      /* height: 0; */
      border: 20px solid transparent;
      border-left: 20px solid red;
    }
  </style>
</head>
<body>
  <div class="A">
  </div>
</body>
</html>

11. css提高页面性能

属性设置使用简写(例：margin值)

目的：减小生产包体积

用css替换图片

目的：减少http请求节约带宽

删除不必要的零和单位

目的：减小生产包体积

用css精灵图代替单个文件加载

目的：减少http请求节约带宽

css的理解总结

1. 对盒子模型的理解

2. 对BFC的理解

3. 对css选择器的理解

4. 对css选择器的优先级的理解

5. 对css属性继承的理解

6. 对px/em/rem/vw/vh的理解

7. 实现左边定宽，右边自适应

8. 实现绝对居中

9. 清除浮动方式

10. css画三角形

11. css提高页面性能

热门文章

最新文章

相关课程

相关电子书

相关实验场景