CSS 知识总结 (1)

桃浪初
110 阅读6分钟

CSS 知识总结

主要内容：浏览器渲染原理、 CSS 动画的两种做法、 层叠、 CSS 基本语法、 文档流、 margin 合并、 盒模型、 CSS 布局（ float布局、flex布局 ）

浏览器渲染原理

总结：

  • DOM 和 CSSOM 组合构成 Render tree；
  • Render tree 只包含需要在页面上渲染的节点；
  • 在布局时浏览器会计算出每个对象的确切位置和大小；
  • 绘制采用最终的渲染树并且将像素渲染到屏幕上。

具体过程：

  • 根据 HTML 构建 DOM（HTML 树）；根据 CSS 构建 CSSOM（CSS 树）；将两者组合在一起形成 Render tree（渲染树）；
    1、从 DOM 树的根节点开始遍历每一个可见的节点（不进行遍历的节点包括不可见的节点，例如 <script>、<meta>等和在 CSS 中设置为隐藏的节点。注：visibility:hidden是的元素不可见，但元素仍占据布局空间，会被渲染为一个空的盒子；display:none会从渲染树中删除该元素，不再占据布局空间。）;
    2、对于每个可见的节点，找到相应的 CSSOM 规则并应用；
    3、发出包含内容及其样式的可见节点。 image.png
  • 浏览器从 Render tree 的根节点开始遍历,计算每个节点的形状和位置，完成“布局”。
  • 布局完成后，浏览器发出 “Paint Setup” 和 “Paint” 事件，将渲染树中的节点转换为屏幕上的实际像素，所有的相对测量值都转换为屏幕上的绝对像素。

CSS 动画的两种做法（transition 和 animation）

transition

语法：

     transition:属性名 时长 过渡方式 延迟;
     transition:left 200ms linear;
     可以用逗号分隔两个不同的属性，如：
     transition：left 200ms;
     可以用 all 代表所有属性，如：
     transition: all 200ms;
     过渡方式有：linear/ease/ease-in/ease-out/
     ease-in-out/culic-bezier/step-start/step-end/steps

transition 含义为“过渡”，制作动画的原理是补充关键帧，使得变化变得平滑。因此，过渡必须要有起始，一般只有一次或两次动画。
注意： 并非所有属性都能过渡

image.png 例子：

<body>
<div id="demo"></div>
</body>

#demo {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  transition: all 200ms linear 2s;
}
#demo:hover {
  width: 200px;
  xtransition: height 1s;
  xtransition: width 1s;
}

除了起始还有中间点的实现方法：

  1. 使用两次 transform ：用 setTimeout 或者监听 transitionend 事件。
  2. 使用 animation

animation

animation 制作动画的原理是通过控制关键帧来实现控制动画的变化，可以实现更加复杂的动画效果。
步骤：

  1. 声明关键帧
  2. 添加动画
    @keyframes 语法：
（1） 
@keyframes slidein{
 from{
  transform: translateX(0%);
}
 to{
  transform: translateY(100%);
 }
}
@keyframes identifier {
 0%{ top: 0;left;0;}
 30%{ top: 50px;}
 68%,72%{left:50px;}
 100%{ top:100px;left:100%;}
}

animation 语法:

  animation:时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名;
  时长：单位为 s 或 ms ;
  过渡方式：和 transition 取值一样，如 linear
  次数：2，3，4 或 infinite
  方向：reverse / alternate / alternate-reverse
  填充方式：none / forwards / backwards / both 
  是否暂停：paused / running

例子：

<body>
  <div class="wrapper">
    <div id="demo"></div>
    <button id=button>开始</button>
  </div>
</body>

#demo{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 50px;
  transition: transform 1s linear;
}
#demo.start{
  animation: xxx 1.5s;
}
@keyframes xxx {
  0% {
    transform: none;
  }
  66.66%{
    transform: translateX(200px);
  }
  100%{
    transform: translateX(200px) translateY(100px);
  }
}

层叠

CSS 中层叠有样式层叠、选择器层叠、文件层叠。

  • 样式层叠：在 CSS 中可以多次对同一选择器进行样式声明；
  • 选择器层叠：可以用不同选择器对同一个元素进行样式声明；
  • 文件层叠：可以用多个文件进行层叠。

CSS 基本语法

  1. 样式语法
选择器{
   属性名:属性值;
   /*注释*/
}

注意事项： 英文符号、区分大小写、没有//注释、最后一个分号可以省略，但建议不省略、任何地方写错了都不会报错，浏览器会直接忽略。

2. @语法

@charset "UTF-8";           声明字符编码，必须放在第一行
@import url(2.css);         导入外部 CSS
@media(min-width:100px)and(max-width:200px){
    语法一
}                           媒体查询

注意事项：@charset 必须放在第一行、前两条必须以 ; 结尾

文档流

文档中元素的流动方向

  • inline 元素从左到右，填充满才会到下一行；
  • block 元素从上到下，每个元素占一行；
  • inline-block 从左到右，不会跨行

注意事项： inline 元素、block 元素、inline-block 元素区分只是在 display: inline; 中设定的来区分，元素本身没有内联元素块元素之分。

宽度

  • inline 宽度为内部 inline 元素的和，不能用 width 指定
  • block 默认为自动计算（auto）宽度，不要写width:100%; 可用width 设置
  • inline-block 综合前两者特点，可以用 width 设置。

高度

  • inline 高度由行高间接确定(字体不一致会有些微改变，具体原理看这篇文章：zhuanlan.zhihu.com/p/25808995)…【知识点：行盒】不能用height指定

  • block 高度由内部文档流（可以脱离文档流，算高度的时候没算）元素决定，可以设置 height

  • inline-block 跟block类似，也可以设置height

Overflow 溢出

  • 当内容（宽度或高度）大于容器，会溢出

  • 可用 overflow 来设置是否显示滚动条

  1. auto 灵活设置
  2. scroll 永远显示
  3. hidden 隐藏溢出部分
  4. visible 显示溢出部分
  5. overflow 可以分为 overflow-x 和 overflow-y

脱离文档流

margin 合并

CSS 盒模型、margin 合并

盒模型

CSS 布局

布局——将页面分块，按照一定顺序进行排列

布局的分类

  • 固定宽度布局 一般宽度为 960/1000/1024 px
  • 不固定宽度布局 主要依靠文档流的原理来布局（文档流本来就是自适应的，不需要加额外的样式）
  • 响应式布局：PC上固定宽度，手机上不固定宽度（混合布局）

布局的思路

image.png

float 布局

步骤：①子元素加上 float: left 和 width ②在父元素上加 .clearfix

.clearfix::after{
  content:'';
  display:block;
  clear:both;
}

flex 布局

flex 布局中有两个重要的概念：container 和 items

image.png

container 样式 :
让一个元素变成 flex 容器：display: flex;/or inline-flex/(行内)

  • flex-direction 改变 items 流动方向（主轴）,值有：row (默认，从左到右)/ column / row-reverse / column-reverse
  • flex-wrap 改变折行,值有：nowrap（默认不换行）/ wrap / wrap-reverse
  • justify-content 主轴对齐方式,值有：flex-start / flex-end / center / space-between / space-around / space-evenly image.png
  • align-items 次轴对齐,值有：stretch / center / flex-end / flex-start / baseline

image.png

  • align-content 多行内容,值有：flex-start / flex-end / center / stretch / space-between / space-around

image.png

注意：

  1. 调转行或列的方向后，flex-start 和 flex-end 对应的方向也被调转了;
  2. 当 flex 以列为方向时，justify-content 控制纵向对齐，align-items 控制横向对齐;

items 样式：

  • order 控制 item 的顺序，默认为 0，按照从小到大排列
image.png
  • flex-grow 控制 item “变胖”
image.png

  • flex-shrink 控制 item “变瘦”

    flex-shrink: 0 防止变瘦，默认是 1

  • flex-basis 控制基准宽度 默认 auto

  • align-self 控制特定的 item

image.png
avatar
文章
阅读
粉丝