Css知识点（1）

2019-10-16 本文已影响0人 crayona

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选定元素的后面插入