CSS总结

CSS的厉害之处

CSS的厉害之处在于层叠样式表，其中包括

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

CSS的版本

CSS2是最广泛使用的版本，兼容一切IE, CSS3是现代使用的版本，之后就分模块升级 caniuse.com查询兼容性 可以在caniuse 上查询CSS样式的在不同浏览器的兼容性

CSS语法

语法一：样式语法

选择器{
  属性名:s属性值;
  /*注释*/
}

注意事项

1. 符号必须是英文
2. 区分大小写
3. 没有//注释
4. 最后一个分号可以省略，但是不建议省略
5. 任何地方写错，不会有报错，浏览器直接忽略

语法二：at语法

@import 用于告诉 CSS 引擎引入一个外部样式表。

@charst"UTF-8" //声明字符编码
@import url (2.css)// 导入额外的css文件
@media (min-width: 100px) and (max-width: 200px) {
  语法一
} //媒体查询

注意事项

1.@charset 必须放在第一行
2.前两个 at 语法必须以分号 ; 结尾
3.charset 是字符集的意思，但 UTF-8 是字符编码 encoding，这是历史遗留问题

如何调试CSS（Border调试法）

1. 怀疑某个元素有问题
2. 就给这个元素加 border
3. border 没出现，说明选择器错了或者语法错了
4. border 出现了，看看边界是否符合预期
5. bug 解决了才可以把 border 删掉

border调试法：

注： CSS规范搜索CSS spec

文档流

流动方向

1. inline（内联） 元素从左到右，到达最右边才会换行
2. block（块） 元素从上到下，每一个都另起一行
3. inline-block（内联块） 也是从左到右,但是到达最后不会把自己分成两块

宽度

1. inline 宽度为内部 inline 元素的和，不能用 width 指定
2. block 默认自动计算宽度（不是100% ），可用 width 指定
3. inline-block 结合前两者特点，可用 width

高度

1. inline 高度由 line-height 间接确定，跟 height 无关
2. block 高度由内部文档流元素决定，可以设 height
3. inline-block 跟 block 类似，可以设置 height

overflow 溢出

当内容大于容器 当内容的宽度或高度大于容器的，会溢出 可用 overflow 来设置是否显示滚动条

1. auto 是灵活设置
2. scroll 是永远显示
3. hidden 是直接隐藏溢出部分
4. visible 是直接显示溢出部分
5. overflow可以分为 overflow-x 和 overflow-y

auto示例

脱离文档流

哪些元素脱离文档流

1. float
2. position: absolute / fixed

position: absolute示例

盒模型是什么

CSS盒模型 - 掘金 (juejin.cn)

CSS布局

布局分为两种

• 固定宽度布局，一般宽度为960/1000/1024px
• 不固定宽度布局，主要靠文档流的原理来布局
• 第三种布局：响应式布局（意思就是PC上固定宽度，手机上不固定宽度）

目录

1. float布局
2. flex布局
3. grid布局

float布局

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

注意：如果一个元素里只有浮动元素，那它的高度会是0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做clearfix，即clear一个不浮动的 ::after 伪元素。

clearfix要写三句话，如下：

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

经验

• 有经验者会留一些空间或者最后一个不设width
• 不需要做响应式，手机上没有IE，此布局是为IE准备的
• IE6/7存在双倍 margin bug，解决方法如下:
• 将错就错，针对IE6/7把margin减半
• 神来一笔，在加上一个display：inline-block

代码示例

flex布局

• container 容器(一般用来做父元素)
• items 项目（一般用来做子元素）

container属性

让一个元素变成flex容器

.container{
  display: flex;/* or inline-flex*/
}

改变items流动方向（主轴）

.container{
  flex-direction: row | row-reverse | colun | colun-reverse;
}

改变折行

.container{
  flex-wrap：nowwrap | wrap | wrap-reverse;
}

主轴对齐方式（默认主轴是横轴，除非你改变了flex-direction方向）

.container{
  justify-content: flex-start | flex-end | center | space-between;
}

次轴对齐方式（默认主轴是纵轴）

.container{
  align-items: flex-start | flex-end | center | stretch;
}

多行内容（内容分布，很少用到）

.container{
  align-content: flex-start | flex-end | center | stretch;
}

items属性

items上加order

.items{
  order: 0;
}

items上加flex-grow（控制变胖）

.items{
  flex-grow: 0;
}

items上加flex-shrink（控制变瘦，一般写flex-shrink：0防止变瘦，默认是1）

.items{
  flex-shrink: 0;
}

items上加flex-basis（控制基本宽度，默认auto） flex：flex-grow flex-gshrink flex-basis(缩写)

.items{
  flex: 1 1 100px;
}

align-self定制align-items（某一个items可以特立独行，不常用）

.items{
  align-self: flex-start | flex-end;
}

重点属性

• display: flex让一个元素变成flex容器
• flex-direction: row/column表示流动方向横着还是竖着
• flex-wrap: wrap是否换行
• justify-content: conter/space-between主轴（横轴）方向怎么对齐
• align-items: center次轴（纵轴）方向怎么对齐

代码示例

经验

• 永远不要把width和height写死，除非特殊说明
• 用 min-width / max-width / min-height / max-height

Grid布局

二维布局用Grid，一维布局用flex

css-tricks.com/snippets/cs…

属性

让一个元素变成flex容器

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

行和列

.container {
  grid-template-columns:  40px 50px auto 50px 40px;
  grid-template-rows:  25% 100px auto;
}

item设置范围

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

fr-free space 巧记：份

.container {
grid-template-columns: 1fr 1fr 1fr;
}

空隙 gap

分区 grid-template-areas

CSS定位

布局与定位的区别：布局是屏幕平面上的，定位是垂直于屏幕

div分层

position取值

• static默认值，当前元素在文档流内
• relative 相对定位，升起来，但不脱离文档流
• absolute 绝对定位，定位基于祖先里的非static
• fixed 固定定位，定位基于viewport（视口）
• sticky 粘滞定位

注意

• 如果写了absolute一般都需要补一个relative
• 如果写了absolute和fixed一定要补top和left
• sticky兼容性不好

position：relative

1.使用场景

• 用于做位移（不常用）
• 用于给absolute做父元素

2.配合z-index

• 把需要操作的元素都先写上poistion: relative;
• auto:默认，计算出来的值是0
• 0：
• 数字大的高于数字小的
• 整数（正负数，0均可）
• 永远别写z-index:9999

position：absolute

1.使用场景

• 脱离原来的位置，另起一层（比如对话框的关闭按钮）

• 鼠标提示

• 代码示例

2.也可以配合z-index使用

• 和relative的用法一样，而且不管position的值是relative还是absolute，z-index的作用都是一起的，不会relative的和relative的重叠，absolute的和absolute的重叠

3.使用方法

• 以谁为基准(祖宗中的定位元素（非static元素），可以是爸爸、爷爷）就在谁里面加入position: relative;，在自己里面写position： absolute;
• 用top、bottom、left、right等来定位（一定要写至少两个。 否则有些浏览器显示的位置会错乱）

4.经验

• 查看hover

• 善用left:100%
• 善用left:50% 和负margin

position：fixed（手机尽量不要用这个属性）

1.使用场景

• 回到顶部按钮
• 烦人的广告

经验

• 手机永远别用这个fixed，一亿个bug然后会引出十亿个bug。
• 在父元素里加了某些属性，这个fixed就会失效。

层叠上下文

比喻

• 每一个层叠上下文都是一个新的小世界（作用域）
• 这个小世界的z-index跟外界无关
• 这处在同一个小世界的z-index才可以比较

哪些属性可以创建层叠上下文

重点记住 z-index / flex /opacity / transform