浮动高度坍塌

现象解释

当元素设置浮动而父元素的宽高没有设置时，高度会塌缩为0

解决方案

固定高度

给父标签添加一个高度，或者增加一个固定高度的子div，但是这样限定固定高度会使页面操作不灵活，不推荐

清除浮动（推荐）

  1. clear语法：
  2. clear : none | left | right | both
  3. 取值：
  4. none : 默认值。允许两边都可以有浮动对象
  5. left : 不允许左边有浮动对象
  6. right : 不允许右边有浮动对象
  7. both : 不允许有浮动对象
  8. 但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素

父级标签overflow

  1. overflow:hidden;
  2. overflow:auto;

利用伪类

css布局

流动模型（Flow）（默认）

浮动模型（Float）

层模型（Layer）

a. 相对定位

  1. position: relative;
  2. 参照位置： 相对于其在普通流中的位置进行定位

b. 绝对定位

  1. position: absolute;
  2. 参照位置： 向上查找，如果遇到某个父元素设置了定位（任何一种），就以这个父元素为基准。
  3. 如果没有遇到任何父元素的定位，就会依据网页的位置来定位。

c. 固定定位

  1. position: fixed;
  2. 参照位置： 完全不考虑父元素（包括body也不考虑）是否设置定位，直接将自己的等级上升到全局。依据网页的位置来定位。

d. flex

父元素属性：
属性 说明 值 默认值
display 定义一个flex容器 flex flex
flex-direction 决定主轴的方向（即项目的排列方向） row （水平从左到右）| row-reverse（水平从右到左）| column（垂直从上到下） | column-reverse（垂直从下到上） row
flex-wrap 一排放不下的时候，决定项目的排列 nowrap （不换行，项目都排在一条线（又称”轴线”）上）| wrap （换行）| wrap-reverse（换行，且颠倒行顺序，第一行在下方） nowrap
flex-flow flex-direction 属性和 flex-wrap 属性的简写形式 flex-flow: || ; row nowrap
justify-content 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 flex-start（弹性盒子元素将向行起始位置对齐） | flex-end （弹性盒子元素将向行结束位置对齐）| center（向行中间位置居中对齐） | space-between （平均地分布在行里）| space-around（平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。（ps类似所有的div加上了padding：0px 10px）） flex-start
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式 flex-start (弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界)| flex-end(靠住侧轴结束位置) | center（侧轴居中） | baseline（） | stretch flex-start
align-content 设置或检索弹性盒堆叠伸缩行的对齐方式 flex-start（各行向弹性盒容器的起始位置堆叠） | flex-end | center | space-between | space-around | stretch
子元素上属性：
属性 说明 值 默认值
order 根据order的数值排序，数值小的在前面 【integer】一个数值，负数也行
flex-grow 设置或检索弹性盒的扩展比率,根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间 【number】 0
flex-shrink 设置或检索弹性盒的收缩比率,根据弹性盒子元素所设置的收缩因子作为比率来收缩空间 【number】 1
flex-basis 设置或检索弹性盒伸缩基准值，如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间 | auto auto
felx flex属性是flex-grow, flex-shrink 和 flex-basis的简写 none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ] 0 1 auto。后两个属性可选
align-self 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式，可以覆盖父容器align-items的设置 auto | flex-start | flex-end | center | baseline | stretch; auto

DIV全局居中

  • flex
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. #div2 {
  7. display: flex;
  8. height: 100vh;
  9. justify‐content: center;
  10. align‐items: center;
  11. }
  12. #div1 {
  13. border: 1px solid red;
  14. height: 50px;
  15. width: 50px;
  16. margin: 0 auto;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div id="div2">
  22. <div id="div1">
  23. </div>
  24. </div>
  25. </body>
  26. </html>
  • fixed
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. #div2 {
  7. position: fixed;
  8. top: 0;
  9. right: 0;
  10. bottom: 0;
  11. left: 0;
  12. display: inline‐block;
  13. vertical‐align: middle;
  14. text‐align: center;
  15. }
  16. #div1 {
  17. display: inline‐block;
  18. border: 1px solid red;
  19. height: 50px;
  20. width: 50px;
  21. margin: 0 auto;
  22. }
  23. /*为了撑开页面，创建伪类*/
  24. /*此方法是antd的modal组件居中的方法*/
  25.   #div2:before{
  26. display: inline‐block;
  27. width: 0;
  28. height: 100%;
  29. vertical‐align: middle;
  30. content: '';
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div id="div2">
  36.     <div id="div1">
  37.     </div>
  38. </div>
  39. </body>
  40. </html>

CSS画三角形

  1. .triangle {
  2. width: 0;
  3. height: 0;
  4. border‐style: solid;
  5. border‐width: 100px;
  6. border‐color: blue blue transparent transparent;
  7. }

雪碧图

多个图片集成在一个图片中的图
使用雪碧图可以减少网络请求的次数，加快允许的速度
通过background-position，去定位图片在屏幕的哪个位置

哪些css可以继承

理解绝对单位与相对单位

贝塞尔曲线cubic-bezier