• css基础面试题


    1、画一条0.5px的线

    • 采用meta viewport的方式

    • 采用 border-image的方式

    • 采用transform: scale()的方式

    2.link标签和import标签的区别

    • link属于html标签,而@import是css提供的
    • 页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。
    • link是html标签,因此没有兼容性,而@import只有IE5以上才能识别。
    • link方式样式的权重高于@import

    3.transition和animation的区别

    Animation和transition大部分属性是相同的,他们都是随时间改变元素的属性值,他们的主要区别是transition需要触发一个事件才能改变属性,而animation不需要触发任何事件的情况下才会随时间改变属性值,并且transition为2帧,从from .... to,而animation可以一帧一帧的

    transition:过渡(触发一个事件才能改变属性)

    .c3 {
    overflow: hidden;
    height: 200px;
    transition: height 2s;;
    background-color: red;
    }
    .c3:hover {
    height: 500px;
    }
    

      

    4.Flex布局

    Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性

    简单的分为容器属性和元素属性

    容器属性:

    flex-direction:决定主轴的方向(即子item的排列方法)row | row-reverse | column | column-reverse;

    flex-wrap:决定换行规则 nowrap | wrap | wrap-reverse;
    justify-content:对其方式,水平主轴对齐方式

    align-items:对齐方式,竖直轴线方向

    项目的属性(元素的属性):

    order属性:定义项目的排列顺序,顺序越小,排列越靠前,默认为0

    flex-grow属性:定义项目的放大比例,即使存在空间,也不会放大

    flex-shrink属性:定义了项目的缩小比例,当空间不足的情况下会等比例的缩小,如果定义个item的flow-shrink为0,则为不缩小

    flex-basis属性:定义了在分配多余的空间,项目占据的空间

    flex:是flex-grow和flex-shrink、flex-basis的简写,默认值为0 1 auto

    align-self:允许单个项目与其他项目不一样的对齐方式,可以覆盖align-items,默认属性为auto,表示继承父元素的align-items

  • 相关阅读:
    [转载]oracle 存储过程的基本语法及注意事项
    [转载]Oracle常用函数大全
    [转载]Java编程思想:面向对象的逻辑思维方法
    [转载]细说Java反射
    [转载]一位大学老师写给大学新生的100条肺腑之言
    [转载]学习java30条基本的概念
    [转载]细说Java反射
    [转载]Java编程思想:面向对象的逻辑思维方法
    Item 38. 异常安全之公理(Exception Safety Axioms)
    Item 36. ClassSpecific Memory Management
  • 原文地址:https://www.cnblogs.com/liangshuang/p/12297985.html
Copyright © 2020-2023  润新知