美文网首页
Css知识点(1)

Css知识点(1)

作者: crayona | 来源:发表于2019-10-16 15:46 被阅读0次

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

    相关文章

      网友评论

          本文标题:Css知识点(1)

          本文链接:https://www.haomeiwen.com/subject/hrzymctx.html