CSS知识总结

zachliu
72 阅读5分钟

1.CSS简介

CSS，Cascading Style Sheets，中文全称层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS的发明者是挪威的Håkon Wium Lie先生。

CSS可以多次对选择器进行样式声明、可以用不同的选择器对同一个元素进行样式声明、可以用多个文件进行层叠。这些特性使得CSS非常灵活，但也埋下了隐患。

CSS的版本

  • 使用最广的版本是CSS2.1,IE支持。
  • 最新的版本是CSS3。 查询浏览器的支持情况，可以去caniuse.com上查找。

CSS语法

  • 样式语法
选择器 {
     属性名: value;
     /*注释*/
     }
  • @语法
@charset "UTF-8";  /*声明文档字符编码为UTF-8*/
@import url(x.css);  /*导入x.css文档*/
@media (min-width:100px) {

}                       /*媒体查询*/

此语法中，charset必须放在第一行，前两个@必须以;结尾。

CSS调试

  • W3C CSS validateor ，W3C验证器，结果较为准确。
  • Webstorm 看颜色。但该软件要求电脑配置。
  • vscode 看颜色，只能看出大概。
  • 使用开发者工具，看警告。
border 调试法

如果怀疑元素的某个属性有问题，就在它前后依次加上border。如果border出现且设置的符合预期，说明代码的bug出现在该属性下方，可能是选择器或语法出现错误。这是一个非常经典有效的调试方法！！！一定要会。

CSS文档流Normal Flow

在CSS中，文档的流动方向默认为从左到右（内联元素）、从上到下（块级元素）。内联(inline)元素的宽度和高度不能指定，只能间接决定。而块级（block）元素是其内部文档流元素高度或宽度的总和，可以被设置,绝大部分情况下都不要把宽度设置成100%宽度，基本会出bug。inline元素（如span）中没有元素时也有高度。但块级元素（如div）内没有元素时，高度为0。inline-block与block类似。
当内容大于容器，内容会溢出，可以使用overflow来设置滚动条。

  • auto灵活设置
  • scroll永远显示
  • hidden直接隐藏溢出部分
  • visible直接显示溢出部分 overflow可以设置overflow-x或overflow-y

脱离文档流

  • float
  • position:absolute/fixed

CSS盒模型

在对一个文档进行布局时，浏览器会将所有元素都表示为一个矩形的盒子，每个盒子由border、margin、padding和内容四部分组成。盒模型可以分为border-box和content-box，前者的width包括该盒子的padding、content以及border，后者的width只是内容content的宽度。一般使用border-box，因为其宽度就为设置的值，毋需进行加减宽度操作。

二、CSS布局

在做布局时，一般先设置一下，先写上 *{margin:0;padding:0;box-sizing: border-box;}
可参考CSS Tricks上的技巧。

1、float布局

在子元素上加上float: left;或float: right;和width属性，父元素加上如下属性，即完成float布局。

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

tips

  • 当图片在背景中的下方存在空隙时，加上vertical-align: top;或者vertical-align: middle;可消除与背景之间的空隙。
  • 内容居中：margin:0 auto;但是这句会覆盖掉原有的上下、左右的margin值，因此如果只需要左右居中，写成margin-left:auto;margin-right:auto;更合适，不会覆盖上下的margin值。（只适用于块元素且宽度固定的情况下。）
  • 平均布局：负margin!在布局中间加上一个div图层，在这个图层上使用负margin即可得平均分布！
  • float布局一般用在PC端，手机端一般不用。

2、flex布局

.container{display: flex;}

tips

  • .container{flex warp:warp;}控制折行，可以有nowarp/warp/warp-reverse三种。默认nowarp.

青蛙游戏练习布局语法

3、grid布局

二维布局，先在页面上画网格，再按需求取网格区域。很简练的布局新语法，但是普及不高。

青蛙游戏练习布局语法

三、CSS定位

垂直于页面上的顺序（由上至下）：内联元素、浮动元素、块级元素、border、background。

position的取值
  • static ，默认取值
  • relative ，用做位移或是属性position: absolute;元素的父元素
  • absolute ，相对于祖先元素中最近的一个定位元素来进行定位
  • fixed ， 固定定位 以上除了默认的static外均为定位元素。

四、 CSS动画

浏览器渲染的原理

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

CSS动画的两种做法

transition法

为一个元素加上transition属性，再加上另外一个属性，transition即表示该元素在当前属性与新加属性之间的转换方式。
它的语法如下：
各参数依次为属性名称，持续时间，转化方式，延迟时间。

/* transition: property name | duration | timing function | delay */ 
eg: transition: margin-right 4s ease-in-out 1s;
animation法

添加关键帧

  • 两种方法
@keyframes x { from {transform: transitionX(100px);} to {transform: transitionX(10px);} } 

@keyframes x { 0% {transform: transitionX(100px);} 100% {transform: transitionX(10px);} }

给元素添加animation属性
语法为

@keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein;

@keyframes duration | timing-function | delay | name */ animation: 3s linear 1s slidein; 

@keyframes duration | name */ animation: 3s slidein;
avatar
文章
阅读
粉丝