CSS知识总结

hisoka1638
165 阅读6分钟
本文总结下几天学习的CSS知识。

CSS称为层叠样式表，是由HTML发明者李爵士的同事赖先生发明的。什么叫层叠呢，主要体现在三点上，1.样式层叠，2.选择器层叠，3.文件层叠,这些特性使得CSS极度灵活。 学习CSS就要先了解文档流，块，内联，内联块，margin合并和两种盒模型。

文档流中主要从三个方面进行分析总结。

  • 流动方向 inline从左到右，到达最右边时才换行。block是从上到下，每一个都是单独一行。inline-block也是从左到右。
  • 宽度 inline的宽度由内部inline元素决定，不能通过设置width指定。block的宽度是默认自动计算的，可以通过设置指定其宽度(尽量不要设置100% )。inline-block结合两者的特点，也可通过设置指定其宽度。
  • 高度 inline的高度由line-height间接确定，与height无关。block的高度由内部文档流元素决定，可以通过设置height指定。inline-block与block类似，可通过设置height指定。
    哪些元素会脱离文档流？ float /position：absolute fixed

overflow 溢出
内容宽度或高度大于容器内容时，会溢出。用overflow来设置是否展示，滚动等。
visible:直接展示 hidden:溢出隐藏 scroll：直接展示拖动条即使内容未溢出 auto:灵活展示拖动条

两种盒子模型 boxing-sizing
content-box 内容盒 内容就是盒子的边界 width=内容宽度 (高度同理)
border-box 边框盒 框架才是盒子的边界 width=内容宽度+padding+border (高度同理)
一般使用border-box
问CSS盒模型分为几种，两者的区别是什么？CSS盒模型分为两种，一种是content-box，一种是border-box，两者的区别是content-box的宽度只是包含了内容宽度，border-box宽度是包含了border+padding+内容宽度。

margin合并
margin合并有两种父子合并,兄弟合并。只有上下会合并，左右不会合并。
如何解决合并问题？ 在父子合并时，用padding/border挡住，用overflow：hidden挡住，用display:flex。 兄弟合并时符合预期的，但也可以使用inline-block消除。

CSS布局


CSS布局是把页面分成一块块，按照左中右上中下等排列。布局分为：固定宽度布局(一般宽度为960px/1000px/1024px),不固定宽度布局(主要靠文档流的原理来布局一般在手机端上使用)，自适应布局(pc上固定宽度，手机上不固定宽度，一种混合布局)

float布局

要点：子元素上加float：left和width。父元素上加 .clearfix

flex布局

flex布局分为container(容器)和items(子项)
container的样式有：

  • display：flex/inline-flex;
  • flex-direction(设置items主轴方向):row/row-reverse/column/column-reverse
  • flex-wrap(设置折行):nowrap/wrap/wrap-reverse
  • justify-content(设置主轴对齐方式):flex-start/flex-end/center/space-between/space-around/space-evenly
  • align-items(设置次轴对齐方式)：center/flex-end/flex-start/stretch

items的样式有：

  • order:number控制其排序
  • flex-growflex:number 容器中分配剩余空间的相对比例
  • flex-shrink:number flex 容器中分配剩余空间的相对比例,在默认容器宽度大于容器宽度时发生收缩，数值越大时，收缩的越快。
grid布局

container样式

  • display：grid/inline-grid

  • grid-template-rows(设置行):40px 50px auto 30px 40px;

  • grid-template-columns(设置列):40px 50px auto 30px 40px;

  • grid-gap(行列间隔)/grid-row-gap/grid-column-gap


  • grid-template-rows:1fr 2fr 3fr;以fr分割

  • grid-template-columns:1fr 2fr 3fr;以fr分割 items样式

  • grid-column-start:起始列

  • grid-column-end:结束列

  • grid-row-start:起始行

  • grid-row-end：结束行

分区grid-template-areas 在container下

.container{
diaplay:flex;
grid-template-rows:40px 50px auto 30px;
grid-template-columns:auto;
grid-template-areas:
    "header header header header"
    "mian main . sidebar"
    "footer footer footer footer"
}

在items下

item-a{
grid-area:header;
}
item-a{
grid-area:mian;
}
item-a{
grid-area:sidebar;
}
item-a{
grid-area:footer;
}
CSS定位

position定位

  • position：static 默认值，在文档流中
  • position: relative 相对定位 元素会升起来，但不会脱离文档流。一般用于位移，做absolute元素的父亲。可以配置z-index;z-index默认值是auto，不会创建层叠上下文。
  • position: absolute 绝对定位 定位基准是祖先里的非static元素，会脱离原来的位置 一般用于对话框的关闭按键。某些浏览器上不写top/left会位置错乱。善用left:100%。善用left：50%，加负margin。
  • position: fixed 固定定位 定位基准是viewport(视口)一般用于回到顶部的按键和网页广告。手机上尽量不使用这个属性。当其父元素为transform时，定位基准有问题。
  • position：sticky 粘性定位 主要用于导航，下拉到一定位置就固定不动了。
CSS动画

1. 浏览器的渲染过程

  1. 根据HTML构建HTML树
  2. 根据css构建css树
  3. 将两棵树合并成一棵渲染树(render tree)
  4. layout布局(文档流，盒模型，计算大小和位置)
  5. paint绘制(边框颜色，文字颜色，阴影等)
  6. composite合成(根据层叠关系展示画面)

如何更新样式，一般用js来更新样式。

2. CSS动画

动画是由许多静止的画面以一定的速度连续播放。
一个简单的例子就是将一个div从左向右移动，用setInterval做到。

性能 在网页控制台中选择rendering(渲染),点击paint flashing。绿色表示重新绘制

transform 四个常用属性：

  • translate 位移 translateX(40px/40%),translateY(40px/40%),translate(X,Y?),translateZ(40px)需容器perspective，translate3d(X,Y,Z)
  • scale 缩放 用的较少，容易出现模糊 scaleX(0.2),scaleY(0.2),scale(2),scale(X,Y?)
  • rotate 旋转 一般用于360旋转制作loading rotate(45deg)（Z）,rotateX(45deg),rotateY(45deg),rotate3d()
  • skew 倾斜 skewX(45deg),skewY(45deg),,skew(X,Y?)

transition 作用是补充中间帧
transition:属性名 时长 过渡方式 延迟
如transition：left 200ms linear;
也可以用逗号分隔两个属性 transition: left 200ms , top 300ms ;
可以用all代表所有属性 transition：all 200ms;
过渡方式：linear/ease/ease-in/ease-out/ease-in-out/cubic-vezier/step-start/step-end/steps
并不是所有属性都可以过渡的 display：none=>block没过渡 一般会改成visibility：hidden=>visible

animation 声明关键帧，添加动画
@keyframes的两种写法

@Keyframes xxx{
  from{
    transform:scale(1);
  }
  to{
    transform:scale(2);
  }
}
@Keyframes xxx{
  0%{
    transform:scale(1);
  }
  50%{
  transform:scale(1.5);
  }
  100%{
    transform:scale(2);
  }
}

animation:时长|过渡方式|延迟|次数|方向|填充方式|是否暂停|动画名

  • 过渡方式和transition一样如linear
  • 次数 number infinite(无限次数)
  • 方向：reverse/alternate/alternate-reverse
  • 填充模式：none/forwards/backwards/both
  • 是否暂停：paused/running
avatar
文章
阅读
粉丝