css知识总结

yunping
195 阅读6分钟

css概念

CSS全称为“层叠样式表 (Cascading StyleSheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

css的灵活性

  1. 样式层叠，可以多次对同一选择器进行样式声明
  2. 选择器层叠 可以用不同选择器对同一个元素进行样式声明。
  3. 文件层叠 可以用多个文件层叠。

css语法

  1. 语法一 选择器{ 属性名:属性值; }

注意事项：所有符号都是英文符号，如果写错浏览器就会警告，区分大小写。

  1. 语法二
@charset"UTF-8"（必须放在第一行）@import url(2.css);@media(min-width:100px)and(max-width:200px){
    语法一
}

如何调试代码

  1. 使用w3c验证器（比较麻烦）不推荐
  2. 使用vscode看颜色
  3. 使用webstorm看颜色
  4. 使用开发者工具看警告
  5. border调试大法，发现那个元素有问题给该元素叫border,如果border没出现就说明是选择器错了，border出现了，看边界是否符号预期，直至bug解决了，才可以删除border。

新人常见错误

  1. 选择器拼写错误
  2. 属性名拼写错误
  3. 属性值拼写错误
  4. 大小写错误
  5. 没写分号
  6. 冒号中文
  7. 没写花括号
  8. 没加单位

文档流

文档流顾名思义就是文档流动的方向

  1. inline元素从左到右，到达最右边才会换行。宽度由里面的inline的宽度决定，设置宽度无效，高度由line-height间接决定
  2. block元素从上到下，每一个都另起一行，宽度是自动的，永远不要写宽度100%，也可以设置宽度，高度由内部文档流决定可以设置高度
  3. inline-block元素也是从左到右，不会跨行。宽额度默认inline但是也可以设定宽度，高度跟block类似，也可以设置高度。

脱离文档流

使用float ,position:fixed/absolute使得元素脱离文档流。

两种盒模型

  1. content盒模型，就是盒子的内容宽就是盒子的宽度。
  2. border盒模型，盒子的宽度为内容盒宽度+padding+border.

margin合并现象

  1. 兄弟margin合并，上下排列的两盒子上盒子设置一个下margin然后下盒子设置一个上margin他们的距离只会渲染一个较大的那个margin,这个属性知道一下就可以，如果实在要避免可以，将盒子属性改为inline-block。

  2. 父子margin合并，父盒子的第一个孩子和最后一个孩子的边距会与父盒子的边距出现重合现象（只有上下方向，左右不会出现，如果想要消除这些现象方法有：给父盒子添加border padding overflow:hidden;display：flex;

css布局

  1. float 布局，float布局基本就是为了IE浏览器设计，一般有三个步骤 子元素加上float:left和宽度;给父元素加上类名clearfix;clearfix的样式为
    content:'';
display:block;
clear:both;

}

一个例子 js.jirengu.com/jebik/1/edi…

  1. flex布局 flex布局分两个标签container和items

container 首先声明容器属性类型，display：flex

  • flex-direction：row/column/row-reverse/column-reverse

  • flex-wrap:nowrap/wrap/wrap-reverse

  • justify-content:space-around/space-between/space-evenly/flex-start/flex-end

  • align-items:stretch/center/flex-start/flex-end/baseline

  • align-content:flex-start/flex-end/center/stretch/space-between/space-around

items

  • order 排序
  • flex-grow分配多余的值
  • flex-shrink：防止变瘦，0代表防止变瘦，1代表同时变瘦
  • flex-basis默认为0
  • align-self 自身定制布局
  1. grid布局 首先声明容器属性类型display：grid/inline-grid;
  • 行与列的设置

  • fr(free space) 平均布局
  • grid-template-areas
  • grid-column-gap 关于这几个属性，有一个例子可以很好的说明。js.jirengu.com/vobij/1/edi…

css 层叠

在一个大的div里面的分层

  1. 背景
  2. border
  3. 块级元素
  4. 浮动元素
  5. 内联子元素（文字之类）

position

position的属性值：static、relative、absolute、fixed stiky

  1. relative 作位移也很少用了，主要是用于给relative做爸爸；
  2. absolute 脱离原来位置，另起一层，比如对话框的关闭按钮，常用于定位
  3. fixed相对于视口，有一恶心之处用有些属性如translate时会变，最好别用
  4. stiky 粘滞文档流，兼容性太差了

z-index的用法

z-index：5和z-index：10谁高，这个是不一定的

  1. 每一个层叠上下文就是一个小世界（作用域），这个小世界里面的z-index与外界无关只有在同一个小世界的作用域才能够比较。
  2. 有一些属性可以创建这个作用域
  • HTML
  • position：relative；z-index:0;
  • position：absolute；z-index：0；
  • position:fixde ;z-index:auto;
  • opatity:0.5 等

CSS动画

浏览器渲染原理有

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

浏览器三种更新方式

  1. 全部走一遍，比如div.remove
  2. 跳过layout 例如改变背景颜色直接是repaint+composite
  3. 跳过layout和paint例如改变transform只需composite 4.关于具体如何让更新具体可以访问网址 csstriggers.com/查看。

transform

变形的四个常用功能translate/scale/rotate/sknew,自己自己用代码全部实现一遍就什么就清楚了。

css动画的两种方式

这里有两个例子可供参考：js.jirengu.com/sivij/2/edi… js.jirengu.com/fuzag/1/edi…

transition
  1. transition 作用补充中间过程，语法有
  • transition：属性名 时长 过度方式 延迟
  • 可以用逗号分隔两个不同属性例如transition：left 200ms,top 400ms;
  • 也可以用all代表所有属性
  • 过渡方式有：linear/ease/ease-in/ease-out/ease-in-out/
  1. 并不是所有属性都能过度 -diaplay:none-block没法过度，可以改成visibility:hiddeen-visible
animation

标准写法

@keyframes slidein {
    from{}
    to{}
}
或是
@keyframe identifier{
    0%{}
    30%{}
    ...
}

animaotion:时长/过度方式/是否延迟/次数/方向/填充模式/是否暂停/名称 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

学习css的一些心得体会

  1. css的学习主要就是多动手i，只要效果达到了，方法并不唯一，对于不熟悉的属性利用代码看效果会更容易理解。
  2. 由于css的不正交性，有时候触发一个属性会引起另一种样式的改变，这方面就累计经验，多记住一些，不用问为什么，记住就对了。
  3. 样式那么多，学是学不完的，遇见什么样式就学习如何实现，累计多了自然就会的多了。

参考资料

  1. 本文主要内容来源参考杭州饥人谷的前端培训教程
  2. css tricks
  3. MDN
avatar
文章
阅读
粉丝