CSS知识总结

1. CSS简介

英文全称：Cascading Style Sheets，直译为层叠样式表，是用来表现HTML或XML等文件样式的计算机语言。既可以修饰静态页面，还可以配合各种脚本语言动态的对网页各元素进行格式化。

2. 层叠

• 样式层叠：可以多次对一个选择器进行样式声明
• 选择器层叠：可以用不同选择器队同一个元素进行样式声明
• 文件层叠：可以用多个文件进行层叠

3. 浏览器对CSS的特性的支持

使用http://caniuse.com查询

4. CSS语法

样式语法：选择器{属性名:属性值;/*注释*/}at语法：@charset"UTF-8"@importurl(2.css);@media(min-width:100%100px)and(max-width:200px){/*样式语法*/}

5. CSS调试

• W3C验证器调试 (过于繁琐，不推荐使用)
• VSCode 查看颜色 (功能相对于WebStorm较弱)
• WebStorm 查看颜色 (推荐使用)
• 开发者工具查看警告 (推荐使用)
• border调试法：
• 怀疑某个元素有问题，就给该元素添加border
• 没出现border，说明选择器或语法错了
• border出现了，查看边界是否符合预期
• bug解决后再删除border

6. CSS相关资料查询

搜索关键词 MDNCSS tricks 英文版张鑫旭的博客

7. CSS文档流

定义：文档中可显示对象在排列时所占用的位置。

• 流动方向
• inline 元素从左到右，到达最右边才会换行
• block 元素从上到下，每一个都另起一行
• inline-block 从左到右
• 宽度
• inline 宽度为内部inline元素之和，不能用width指定
• block 默认自动计算宽度，可用width指定
• inline-block 结合前两者特点，可以用width指定
• 高度
• inline 高度由inline-height间接确定，跟height无关
• block 高度由内部文档流元素决定，可以设height
• inline-block 和block类似 可以设置height

8. overflow 溢出

当内容大于容器时，会导致内容溢出

• 使用overflow设置是否显示滚动条，可分为overflow-x和overflow-y
• atuo：灵活设置
• scroll：永远显示
• hidden：隐藏溢出部分
• visible：显示溢出部分

9. 脱离文档流

使元素不在文档流中

• float：left/right
• position: absolute/fixed

10. 盒模型

CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。一般情况使用border-box。

• content-box 内容盒
• width=内容宽度
• border-box 边框盒
• width=内容宽度 padding border

11. margin合并

block元素的上外边距(margin-top)和下外边距(margin-bottom)有时合并为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为margin合并。

• 阻止父子元素margin合并
• 使用padding/border
• 使用overflow: hidden
• 使用display:flex
• 同级元素margin合并是符合预期的
• 也可以用inline-block消除

12. float布局

兼容IE9及以下时使用float布局，基本满足PC页面需求，手机页面不适用。

• 子元素添加float：left和width
• 父元素加上 .clearfix

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

缺点： 需要自己计算宽度，不灵活。

13. flex布局

基本适用于新旧浏览器和手机浏览器等

使一个元素变成flex容器

.container{display:flex;}

常用父元素样式

.container{//改变items流动方向flex-direction:row|row-reverse|column|column-reverse;//换行方式flex-wrap:nowrap|wrap|wrap-reverse;//主轴对齐方式，默认为横轴，当flex-direction:column时，主轴为纵轴justify-content:flex-start|flex-end|center|space-between|space-around|space-evenly;//次轴对齐方式，默认为纵轴，当flex-direction:column时，次轴为横轴align-items:flex-start|flex-end|center|stretch|baseline;//多行内容分布,很少用align-content:flex-start|flex-end|center|stretch|space-between|space-around;}

常用子元素样式

.item{//主轴顺序，数字order:0|1|-1;//占据空间，如果有多余的空间，则分成x份，给该item数字的份数。0则不占据多余空间。flex-grow:0|1|2;//当空间不足时，压缩数字大的空间，0则不压缩flex-shrink:0|1|2;//控制基准宽度，默认为autoflex-basis:100px;//合并使用flex:flex-growflex-shrinkflex-basis;//定制对齐方式使用align-self:flex-start|flex-end}

常用flex布局代码

display:flexflex-direction:row|columnflex-wrap:wrapjustify-content:center|space-betweenalign-items:center

14. grid布局

目前所用不多，但是功能强大的布局方案，只兼容于最新的浏览器

使用grid布局

.container{display:grid|inline-grid;}

常用属性

.container{//设定grid的格子,5行3列，单位可以为px,em,vh,百分比,auto//可以设置为frfr等比分成N个fr，1fr表示占据1/N的大小grid-template-columns:40px50pxauto50px40px;grid-template-rows:25%100pxauto;//可以合并grid-template:rows/columns;//空隙grid-column-gap:10px;grid-row-gap:10px;grid-gap:15px;}.item{//设定子区域，从第几条线到第几条线，默认到下一条线grid-column-start:2;grid-column-end:4;grid-row-start:1;grid-row-end:3;//可以合并grid-column:2/4;grid-row:1/3;//可以再合并grid-area:r-start/c-start/r-end/c-end;}

15. DIV分层

div分层从最上层往下分别是

• 内联子元素
• 浮动元素
• 块级子元素
• border
• backgroud

16. Position

position属性指定一个元素的定位方法的类型。

• static：默认值，待在文档流中
• relative: 一般用于给absolute元素做父元素
• 配合z-index做新层叠的上下文
• z-index只对position属性的元素有效
• 指定一个元素的堆叠顺序，-1