谈谈我们知识体系（css篇）

小白男神
742 阅读7分钟

前言

我是小白，励志要做技术男神的帅逼，目前住在南京，做了快3年前端工程师，会继续写笔记。

css/css3

1. 行内元素与块级元素区别

行级元素display：inline,块级元素display：block, 块级元素能够在同一行显示display：inline-block

  1. 块级：独行
  2. 行级：禁止设置宽高、margin上下无效，左右有效，内填充padding上下无效，左右有效

2. flex布局

  • flex-direction: row | row-reverse | column | column-reverse; 决定主轴的方向
  • flex-wrap: nowrap(不换行) | wrap(换行，第一行在上方) | wrap-reverse(换行，第一行在下方); 定义换行情况
  • flex-flow: flex-direction和flex-wrap的简写
  • justify-content: flex-start(起点对齐) | flex-end(终点对齐) | center(中点对齐) | space-between (贴边对齐) | space-around(留白对齐) | stretch(占满整个容器的高度); 定义项目在主轴上的对齐方式
  • align-item: flex-start | flex-end | center | baseline | stretch; 定义在交叉轴上的对齐方式
  • align-content: flex-start(与交叉轴的起点对齐) | flex-end | center | space-between | space-around | stretch;定义多根轴线的对齐方式 ，如果项目只有一根轴线，该属性不起作用。 所以，容器必须设置flex-wrap：···；
  • 项目值
  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

3. css预处理器:less、sass

sass 语言脚本处理成 css 文本

  1. sass
    • 变量$xxx:;
    • 嵌套a:{n:{}}
    • 引入@import '';
    • 操作符+、-、*、/、%
    • 混合
    • 继承
/* 混合 */
@mixin border-radius($radius) {
    border-radius: $radius;
}
// 使用
 @include border-radius(10px);
/* 继承 */
// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%styles {
  display: flex;
}
// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%common {
  border: 1px solid #ccc;
}
// 使用
.a {
  @extend %common;
}
  1. less
    • 变量@
    • 混合方法
    • 条件语句when，and，not与“，”
/* 混合方法 */
.card(@width_size:10px,@height_size,...){
  width:@width_size; // 默认 10px
  height:@height_size;
   border: @arguments;
}
// 使用
#wrap{
  .card(111px, 12px, 1px, solid, red);
}
/* */
 // not 运算符，相当于 非运算 !，条件为 不符合才会执行
.background(@color) when not (@color>=#222){
    background:@color;
}

4. css3新特性

  1. 圆角效果
  2. 图形化边界
  3. 块阴影与文字阴影
  4. 使用RGBA实现透明效果
  5. 渐变效果
  6. 使用@Font-Face实现定制字体
  7. 多背景图
  8. 文字或图像的变形处理（旋转、缩放、倾斜、移动）
  9. 多栏布局
  10. 媒体查询
  11. ...

5. 伪元素before和after的用法

这个两个伪元素在真正页面元素内部之前和之后添加新内容（当然了，可以对伪元素应用定位可以置于任何位置）,设置:before和:after时必须设置其content属性，否则伪元素就不起作用

  1. 字符串
  2. attr(attr_name) 伪元素的内容跟主元素的某个属性值进行关联
  3. url()/uri()引用外部资源
  4. counter()调用计数器
  • 伪元素不属于文档
  • 伪元素属于主元素的一部分
  • 块级元素才能有

6. 清除浮动

  1. overflow: hidden;
  2. 使用带clear属性的空元素：clear: both;
  3. 伪元素before和after实现元素末尾添加一个看不见的块元素（Block element）清理浮动
  4. 创建父级 BFC(可以看看第9条)
  5. 父级设置高度
.a:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
}

7. display、float、position

  • display 用来设置块级元素与行内元素的
  • float 浮动布局
  • position 绝对定位absolute 相对定位 relative fixed 固定定位
  • 绝对定位
    • 脱离文档流
    • 位置是相对于距离他最近的非static祖先元素位置决定的
    • 没有已定位的祖先元素，位置就相对于body或html元素。
  • 相对定位
    • 不脱离文档流，占据原来的位置
    • 只是改变表现
  • 固定定位
    • 相对于浏览器可视窗口定位

8. 盒子模型

内容(content)、内边距(padding)、边框(border)、外边距(margin)

box-sizing 进行设置

9. BFC

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

Box：css布局的基本单位

Formatting context：页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

IE下为 Layout，可通过 zoom:1 触发

  • 触发创建一个新的BFC的条件:

    • 根元素
    • position: absolute/fixed
    • display: inline-block / table
    • float 元素
    • ovevflow !== visible

  • 规则:

    • 属于同一个 BFC 的两个相邻 Box 垂直排列
    • 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
    • BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
    • BFC 的区域不会与 float 的元素区域重叠
    • 计算 BFC 的高度时，浮动子元素也参与计算
    • 文字层不会被浮动层覆盖，环绕于周围

  • 通俗的讲：

    1. 内部的 Box 会在垂直方向上一个接一个的放置；
    2. 垂直方向上的距离由margin 决定；（解决外边距重叠问题）
    3. bfc 的区域不会与 float 的元素区域重叠；（防止浮动文字环绕）
    4. 计算 bfc 的高度时，浮动元素也参与计算；（清除浮动）
    5. bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素；

  • 应用:

    • 阻止margin重叠
    • 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
    • 自适应两栏布局
    • 可以阻止元素被浮动元素覆盖

问题：上下两个div设置margin为20px，两个div的间距是多少，为什么

  • 这就是考的BFC 的理解： 因为 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 所以间距是20px,解决方法就是上述中触发创建一个新的BFC的条件: 来进行解决

10. 居中布局

  • 水平居中

    • 行内元素: text-align: center
    • 块级元素: margin: 0 auto
    • absolute + transform
    • flex + justify-content: center

  • 垂直居中

    • line-height: height
    • absolute + transform
    • flex + align-items: center
    • table

  • 水平垂直居中

    • absolute + transform
    • flex + justify-content + align-items

11. 选择器优先级

!important > 行内样式 > #id > .class > tag > * > 继承 > 默认

选择器 从右往左 解析

12. link 与 @import 的区别

  • link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css
  • 当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载
  • @import需要 IE5 以上才能使用
  • link可以使用 js 动态引入，@import不行

13. CSS动画

  • transition: 过渡动画

    • transition-property: 属性
    • transition-duration: 间隔
    • transition-timing-function: 曲线
    • transition-delay: 延迟
    • 常用钩子: transitionend

  • animation / keyframes

    • animation-name: 动画名称，对应@keyframes
    • animation-duration: 间隔
    • animation-timing-function: 曲线
    • animation-delay: 延迟
    • animation-iteration-count: 次数
      • infinite: 循环动画
    • animation-direction: 方向
      • alternate: 反向播放
    • animation-fill-mode: 静止模式
      • forwards: 停止时，保留最后一帧
      • backwards: 停止时，回到第一帧
      • both: 同时运用 forwards / backwards
    • 常用钩子: animationend

  • 动画属性: 尽量使用动画属性进行动画，能拥有较好的性能表现

    • translate
    • scale
    • rotate
    • skew
    • opacity
    • color

文章中部分内容整理自

结语

以上是我的第一篇笔记，本人前端小白一只，如果写的不好请各位大佬指正，俺想再学习到更深知识，希望和各位大佬交朋友,希望我的笔记对您提供舒适的观看体验。

avatar
文章
阅读
粉丝