flex0
1设置display flex时 子元素的 float clear vertical-align将消失
2flex-direction 排列方向row水平方向 默认在左边 .box{flex-direction:rows |flex-reverse|column |flex-reverse}
flex-wrap 怎么换行 no-wrap wrap wrap-reverse
flex-flow 是flex-direction flex-wrap的简写模式
justify-content 定义项目在主轴上的排列方式
align-items定义项目在交叉轴上的排列方式
align-content 多根轴线的对齐方式
order项目的排列方式 数值越小 越靠前 默认为0
flex-grow 项目放大比例
flex-shrink 项目缩小比例
align-self 允许自己与其他项目有不同的排列方式
bfc块级格式化上下文
其实就是符不符合文档流 溢出
方式:
a根元素为body
b浮动元素 float
c绝对定位 position:absolute;
d 行内块 display:inline-block
e overflow 除了visiable以外的值
link 应用的css会同步加载
@import引用的css页面全部被加载完之后再加载
@import 引入的样式不能通过dom更改
单冒号的是伪类 双冒号的是伪元素
双冒号 伪元素 ::after
单冒号 伪类 :before
chrome 支持小于12px的字体 用scale 缩小
用transform:scale(0.8)
display:inline行内元素 宽高无效 margin Padding的上下距离是无效的 (宽高无效,上下margin无效)
display:block块级元素 独占一行 垂直方向排列 (独占一行,垂直方向排列)
清除浮动
a 父级给高度 给父级高度
b空标签 尾部空标签 clear:both 伪类 :after{clear:both;content:'';display:block;}
c 父:after clear:both;content:'';display:block; 空标签{clear:both;}
d 父级也浮动 父级也浮动
e父级加 display:table 父级变成table
选择器
包含选择器 span i
子选择器 第一层 span> i 第一层i
相邻选择器 span +p 与span相邻的p
兄弟选择器 span~i i可以有多个
属性选择器 input[type="text"]
link visited hover active选定的激活状态 :focus聚焦 :after选定元素的后面插入
网友评论