css总结

Posted on

选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1.群组选择器  如：p, body, img, div{}

2.兄弟选择器  如：p + p { color:#f00; }

3.属性选择器  如： p[title] { color:#f00; }

4.包含（后代）选择器  如：body ul li{}

5.子元素选择器 如：div > p{}

6.ID选择器  如：#myDiv{}

7.类选择器  如：.class1{}

8.伪元素选择器  如：E:first-line，E:before

9.伪类选择器  如：E:first-child ，E:visited，E:focus，E:enabled

10.标签选择器  如：p { font-size:1em; }

优先级： !important > 行内样式 > ID选择器 > class选择器 > 标签 > 通配符 > 继承

定位（position）

  1. static，默认，待在文档流里
  2. relative，相对定位，原位置不变，显示的位置偏移
    • 用于做位移（很少用）
    • 用于给 absolute 元素做父元素
    • 配合 z-index，z-index :auto 默认值，不创建新层叠上下文
  3. absolute，绝对定位，定位基准是祖先里的非static即相对于祖先元素中最近的一个定位元素
    • 脱离原来的位置，另起一层，比如对话框的关闭按钮，祖先元素得加 relative
    • 某些浏览器不写 top / left 会位置错乱。善用 left: 100% left: 50% 加负 margin
  4. fixed，固定定位，定位基准是 viewport，视口代表当前可见的计算机图形区域，transform 有bug
    • 手机上尽量不要使用 fixed
  5. sticky，粘滞定位，兼容差

Tips：

  • 如果写了 absolute，一般都得补一个 relative

  • 如果写了 absolute 或 fixed，一定要补 top 和 left

position MDN

盒模型

20180324150509906
  1. content-box 内容就是盒子的边界
    • content-box width = 内容宽度
  2. border-box 边框才是盒子的边界 （推荐使用）
    • border-box width = 内容宽度 + padding + border
1
box-sizing: border-box | content-box;

CSS 基础框盒模型介绍 MDN

float 布局

步骤：

  1. 子元素加上 float: left 和 width
  2. 在父元素上加 .clearfix

经验:

  • 有经验者会留一些空间或者最后有一个不设 width
  • 不需要响应式，因为手机上没有 IE，而这个布局是专门为 IE准备的

IE 6/7 存在双倍 margin bug, 两个解决办法（基本不用）：

  1. 针对 IE 6/7 把 margin 减半
  2. 加一个 display: inline-block 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.clearfix:after {
    /* 清除浮动 */
    content: '';
    display: block;
    clear: both;
}

IE bug
/* margin 减半 && inline-block */
.class {
    margin-left: 10px;
    _margin-left: 5px;
    display: inline-block;
}

为什么要清除浮动

float demo

Tips：

  • border 有时候会干扰尺寸，可以改成 outline
  • 用 float 做平均布局时，可以在布局中增加一个x图层，其多余的右边距可以用 负的 margin 来改善布局
Snipaste_2021-08-20_08-33-25

浏览器渲染原理

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

渲染树构建、布局及绘制

动画

transition

css中的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑的以动画效果改变css的属性值。

transition属性是个复合属性 transition: property name | duration | timing function | delay;，包括以下几个子属性：

  • transition-property ：规定设置过渡效果的css属性名称
    • transition-property: none |all |property
  • transition-duration ：规定完成过渡效果需要多少秒或毫秒
    • transition-duration: time
  • transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
    • transition-timing-function：linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);
  • transition-delay ：指定开始出现的延迟时间
    • transition-delay: time

animation

animation

1
2
3
4
5
animation: 时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名；

方向：reverse | alternate | alternate—reverse
填充模式：forwards | none | backwards | both
暂停：paused | running

keyframes语法格式

让动画停在最后一帧 加forwards ，例 animation: xxx 1.5s forwards;