CSS基础2

A互动投影程鑫
177 阅读5分钟

布局分类

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

布局的两种思路

  • 从大到小：先定下大局然后完善每个部分的小布局
  • 从小到大：先完成小布局然后组合成大布局

怎样布局

  • 一图流解释怎样布局

float布局

  • 步骤：子元素上加float:left和width，在父元素上加.clearfix
  • float布局的一些经验：1、留一些空间或者最后一个不设width；2、不需要做响应式。因为手机上没有IE,而这个布局是专门为IE准备的。3、IE6/7存在一个双倍的margin bug，解决的办法有两个 _margin减半或者display:inline-block
  • 案例1、js.jirengu.com/xukapineli/…
  • 案例2、js.jirengu.com/bewinimoco/…
  • outline 调试法。这个不占边框
  • 如果块元级元素宽度是固定的，左右两边auto就能居中。
  • 如果做平均布局只需要在布局中间加一个X图层，X图层的多余烦人右边距是一个负的。

flex布局

  • flex 布局：在父元素写dieplay: flex
  • justify-content: space-between空间放中间或者子元素加 margin-left: auto
  • 不要写死宽度，要最大或者最小或者%
  • 案例：js.jirengu.com/kozebafiwa/…

CSS定位

CSS定位是垂直于屏幕的。 为什么要定位？ 1.改变元素位置 2.让元素重叠放置任意位置 3.让元素固定在窗口固定的位置

先从div分层说起

float: left;脱离文档里流，这个元素去哪里了？它比文档流之前高一点点，它不再影响文档流了

position的5个取值

1.static当前元素在文档流中,是默认样式一般不写

2.relative 相对定位升起来，但不脱离文档流。

使用场景：可以设置top，bottom，left，right做位移；也用于给absolute做爸爸；可以通过z-index进行层次分级。

3.absolute绝对定位，定位基准是最近的祖先非static的元素。

使用场景：脱离原来的位置，另起一层，比如做个关闭对话按钮或者鼠标提示。 js.jirengu.com/begukunudo/…

4.fixed 固定定位，基于viewport视口定位的(有炸)

使用场景：烦人的广告；回到顶部的按钮。配合z-index使用 经验：fixed元素不要放在transform属性的元素里面。手机不要用fixed元素。 js.jirengu.com/wadusixebo/…

5. sticky 粘滞定位，类似exexl 冻结窗口

js.jirengu.com/rayesugiqa/…

层叠上下文

层叠上下文是把所有的分层包起来，默认的层叠上下文是html。

  • 每个层叠上下文就是一个新的小世界（作用域）
  • 这个小世界里面的z-index跟外界无关
  • 处在同一个小世界的z-index才能有效
  • 负的z-index逃不出一个元素的背景，因为这个元素变成了层叠上下文 js.jirengu.com/zuhobocibi/…

备注： 有些属性可以创建层叠上下文比如：z-index/fiex/opacity（不透明）/tranform等等 developer.mozilla.org/zh-CN/docs/…

css动画

动画原理

  • 定义：由许多静止的画面（帧）以一定的速度（每秒30张）连续播放。
  • 概念：每个静止的画面都叫帧，影视美妙24帧的播放速度，游戏30-60帧

浏览器的渲染原理

  • 根据HTML构建HTML树（DOM）
  • 根据CSS构建CSS树（CSSOM）
  • 将两棵树合并成一颗渲染树（render tree）
  • Layout布局（文档流、盒模型、计算大小和位置）
  • Paint绘制（把边框颜色、文字颜色、阴影等画出来）
  • Compose合成（根据层叠关系展示画面）

如何更新样式

一般我们采用JS来更新样式

div.style.backround='red'
div.style.display='none'
div.classList.add('red')
div.remove()直接删除节点

有三种更新方式

第一种更新方式全走 会触发当前消失，卡元素relayout 第二种，跳过layout ，直接repaint+composite 第三种，跳过layout和paint 只需composite 注意必须全屏查看效果，在iframe看问题。

css动画的两种做法（transition和animation)

transition 过渡 它的作用是补充中间帧

transition: 属性名 时长 过渡方式 延迟
transition: left 200ms linear;
可以用逗号分隔两个不同的属性
transition：left 200ms，top 400ms；
可以用all代替所有的属性
transition: all 200ms;
过渡方式有： linear|ease|ease-in|esae-out|ease-in-out|cubic-bezier|step-start|step-end|steps 等

注意 并不是所有属性都能过渡

transform 四个常用功能：

1. translate-位移

常用写法：

  • translatex(10px);
  • translatey(10px);
  • transkatez(-10px);
  • translate(10px, 10px)
  • translate3d(x,y,z)
  • translate(-50%, -50%)

2. scale-缩放

  • scalex(1.5);
  • scaley(2);
  • scale(1.5, 2)

3. rotate-旋转

  • rotate(45deg);
  • rotatex();
  • rotatey();
  • totate3d( , , , [ | ] );

developer.mozilla.org/zh-CN/docs/…

4. skew-倾斜

  • skew(45deg);
  • skewx();
  • skewy();
  • skew( [ | ] , [ | ]? );

transform可以组合使用

比如： transform：scale(1.5), rotate(45deg);

一般需要配合transition过度

inline元素不支持transform，需要先变成black。

animation 动画语法

animation: 时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名字
animation: 1s linear 1s infinite reverse  none
  • 时长：1s或1000ms
  • 过渡方式：跟transition取值一样，如linear
  • 延迟：1s或者1000ms
  • 次数：1或者2.5，或者infinite
  • 方向：reverse|alteenate|altenate-reverse
  • 填充模式：none|forwarde|backwards|both
  • 是否暂停：paused|running
  • 以上所有的属性都有对应的单独属性

@keyframes 完整语法

一种是from to

@keyframes slidein{
    from{
        transform: translatex(0%)
    }/*开始*/
    to{
        transform: translatex(100%)
    }/*结尾*/
}

另一种是百分数

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}
avatar
文章
阅读
粉丝