1.BFC
一开始也不知道这个东西,但是查了一下发现——有点东西
概念:块级格式化上下文
方式:
- overflow不为visible
- float
- 绝对定位
解决什么:
清除浮动 浮动塌陷
外边距塌陷
详细如下:
林东洲: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.画等边三角形
- 宽度高度为0
- 设置边框长度,左右上下
- 把其中三个都变成transparent
编辑于 2020-04-14