二 css基础

1.BFC

一开始也不知道这个东西，但是查了一下发现——有点东西

概念：块级格式化上下文

方式：

1. overflow不为visible
2. float
3. 绝对定位

解决什么：

清除浮动 浮动塌陷

外边距塌陷

详细如下：

林东洲：10 分钟理解 BFC 原理​zhuanlan.zhihu.com

2.opacity:0/display:none/visibility:hidden区别

• display:none不会存在于DOM树上
• opacity:0还是能点击
• visibility:hidden的子孙节点设为visibility:visible是能看见子孙节点的

3.如何实现水平垂直居中

display: flex;
justify-content: center; /* 水平居中 */
align-items: center;/* 垂直居中 */

• 绝对定位 + transform:translate(-50%,-50%)
• 绝对定位 + 上下左右0 + margin:auto

4.伪类和伪元素

伪类：

• 一个冒号
• 可以拼接
• :nth-child（根据元素的位置匹配一个或者多个元素）
• :checked（匹配被选中的 input 元素，这个 input 元素包括 radio 和 checkbox）
• :hover （选择鼠标指针浮动在其上的元素）
• :active（选择活动的链接）
• :visited（选择已访问的链接）
• :focus（选择获取焦点的输入字段）

伪元素：

• 两个冒号
• ::before （在被选元素前插入内容）
• ::after（在被元素后插入内容）
• ::first-letter（匹配元素中文本的首字母）

5.外边距塌陷

（1）用bfc解决 （见标题1）

6.flex

• flex-grow（属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大）
• flex-shrink（属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小）
• flex-basis（属性定义了在分配多余空间之前，项目占据的主轴空间）

当然啦 还有超多属性，如果想详细看，可以看阮一峰的flex讲解：

Flex 布局教程：语法篇 - 阮一峰的网络日志​www.ruanyifeng.com

7.画等边三角形

1. 宽度高度为0
2. 设置边框长度，左右上下
3. 把其中三个都变成transparent

编辑于 2020-04-14