前端考核整理1

6：让一个元素不可见的方法，并说说他们的区别

①display:none;

元素隐藏后不再占有位置，其子盒子也不再占有位置，给该元素及其子元素添加动画、交互效果也都不会起作用。

②visibility:hidden;

元素隐藏后依然占有位置，不会响应任何用户交互。

③opacity:0;

将元素透明度设置为0，依然占有位置，其内的背景和内容会发生改变，会响应用户交互。

④position:absolute;

top:-...px;

left:-...px;

将元素设为绝对定位后，将其top和left偏移量设置为足够大的负值，令元素超出盒子，令其不可见，也不再占有位置。

⑤position:absolute;

z-index:-..px;

将元素设为绝对定位后，将其z-index属性调为小值或者负值，令其不可见。

7：Flex布局及其常用属性

Flex布局是css3新增的一种布局方式，我们可以通过将一个元素的display属性设置为flex，从而使它成为一个flex容器，它的所有子元素都会成为它的项目。

一个容器有两个轴，一个是水平轴，一个是交叉轴。

①容器属性

flex-direction:决定项目按主轴/交叉轴排列

flex-wrap:决定项目的换行方式

flex-flow:flex-direction和flew-wrap的简写

justify-content:决定项目在主轴的对齐方式与额外空间的分配

align-items:决定项目在交叉轴的对齐方式

align-content:决定项目在交叉轴的对齐方式和额外空间分配

②项目属性

flex-grow:指当前项如何放大

flex-shrink:指当前项如何缩小

flex-basis:具有最高优先级，指定分配剩余空间之前当前项的初始大小

flex:是flex-grow、flew-shrink、flew-basis三个属性的简写

align-self:定义项目的对齐方式，参考align-items

Flex怎么让三个子项目在横向上均等分（三栏等分布局）

给子元素设置flex:auto或者flex:1;

8:让一个div水平垂直居中的方法

①子绝父相+transform：translate(-50%,-50%)

②子绝父相+margin:auto;

③flex布局

 11：BFC是什么？BFC的作用？

(1)BFC是什么

BFC(block  formatting  context)即块格式化上下文，它决定元素的内容如何渲染以及与其他元素的关系和交互。

一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到BFC中的内部元素，一个BFC就像是一个隔离区域，和其它区域互不影响。

(2)创建BFC的条件

根元素，也就是html元素;

overflow属性值(处理块级元素溢出的内容)=hidden/auto/scroll的块级元素（即≠visible）;

float不为none的浮动元素;

position属性是fixed或absolute的定位元素;

display属性为inline-block,table-block,table-caption或flex;

(3)BFC的作用

清除浮动(1:当一个元素浮动后，会影响附近的文字的行为。

                2：浮动元素与处在正常流的元素重叠)

解决外边距塌陷

解决宽度自适应的两栏布局

IFC(Inline  formatting  contexts)行级格式化上下文

布局规则

（1）：行级上下文内部的盒子会在水平方向，一个接一个的放置。

（2）：当一行不够的时候会自动切换到下一行

（3）：行级上下文的高度由内部最高的内联盒子的高度决定。

作用：

（1）：水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中

（2）：垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle;其它行内元素则可以在此父元素下垂直居中。

代码题：

1：利用CSS制作一条0.5px的线

理论上1px就是最小的单位了，画0.5px需要进行缩放，

2：使用css实现 淡入淡出 动画效果

3：使用div+css实现一个圆形，红色占60%，绿色占40%

 

 4：使用至多两个元素实现div的上边框只有一半