css（一）

1.说一下css盒子模型

Css盒子本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距和内容。Css盒子模型包括IE盒子模型标准的W3C盒子模型。这两种盒子模型都包含margin，border，padding，和content。不同的是，标准W3C盒子模型中content不包含任何内容，而IE盒子模型中content包含border和padding，在标准盒子模型中width指content部分的宽度，而IE盒子模型中width=content+padding+border这三个部分的宽度，故使得计算整个何止的宽度时存在差异：

标准的盒子模型的盒子宽度是：左右border+左右padding+width

IE盒子模型中盒子宽度：width

在CSS3中引入的border-sizing属性，border-sizing：center-box表示标准盒子模型，border-box表示IE盒子模型，padding-box表示这个属性值的宽度包含了左右的padding+width

 

2.画一条0.5px的线

（1）采用mwta viewport的方式

<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">

         Initial-scale设置页面初始缩放值为0.5，这样正常1px的线就缩放成0.5px

（2）采用transform：scale（）的方式

         transform:scaleY(0.5);  

（3）采用border-image的方式，先自己制作一个0.5px的线条作为背景图片

                   p{      border-width: 0 0 1px 0;      border-image: imageUrl 2 0 round; }

 

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

       Link属于HTML标签，而@import时css提供的，link标签在页面加载时就会加载，而@import的css会在页面加载结束之后再加载。link是HTML标签没有兼容性，而@import只有IE5以上才支持，link引入的样式权重高于@import引入的。

 

4. transiotion和animation的区别

Transition和animation大部分属性是相同的都是随时间改变元素的属性值，主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件随时间改变属性值，并且transition为两帧从from…to，而animation可以一帧一帧的。

 

5.Flex布局

         Flex弹性布局简单的分为容器属性和元素属性

容器属性：

         flex-direction:决定主轴的方向row|row-reverse|column|column-reverse;

         flex-wrap:决定换行规则wrap|nowrap|wrap-reverse

         flex-flow:<flex-direction>||<flex-wrap>以上两个的简写

         justify-cntent:定义了项目在水平上的对齐方式

         align-items：对齐方式，竖直轴线方向

         align-content：多跟轴线的对齐方式，如果只有一根轴线，该属性不起作用

项目的属性（元素的属性）：

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

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

         flex-shrink：定义项目的缩小比例，当空间不足的情况下会等比例的缩小

         flex-basis：定义了在分配多余的空间，项目占据的空间

         flex：flex-grow，flex-shrink，flex-basis的简写，默认值是0 1 auto。

         align-self：允许单个项目于其他项目不同的对齐方式，可以覆盖algn-items，默认值是auto继承父元素align-items。