前端考核HTML+CSS

目录

1,清除浮动的方法有哪些？

2，你知道那些选择器，CSS优先级如何计算？

3，让一个div水平垂直居中的方法。

4，BFC是什么，有什么作用？

5，代码题 

1，用css画一条0.5px的线

2，使用CSS实现淡出淡入动画效果 

3，用css实现一个选中变色的细线边框表格

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

5， 要求实现下图效果

---

1,清除浮动的方法有哪些？

答：1，父盒子设置固定高度。

        2，内墙法清除浮动，在浮动元素的后面加一个空的块级元素(通常是div),设置该元素clear:both；属性。顾名思义，内墙法主要在父盒子内部添加盒子堵住浮动元素。

        3，外墙法清除浮动，在父盒子后面添加盒子隔断，在墙外故称为外墙法。

4，伪类元素清除，类似与外墙法，在大盒子屁股后面添加了一个伪元素盒子隔断。

5，父盒子添加overflow：hidden;

2，你知道那些选择器，CSS优先级如何计算？

答：选择器：标签选择器、.类选择器、ID选择器、属性选择器、伪类选择器等。

CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。

CSS 优先规则2："直接样式"比"祖先样式"优先级高。

CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

CSS 优先规则4：计算a,b,c权重依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。

CSS 优先规则5：属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。

3，让一个div水平垂直居中的方法。

 方法一：position 定位（适用于子盒子有宽度和高度的时候）

方法二：position + transform（子盒子有或没有宽高的时候都适用）

方法三：flex 布局（子盒子有或没有宽高的时候都适用）

4，BFC是什么，有什么作用？

答：BFC的全称是块级格式化上下文。

如何触发BFC(如何创建BFC)？

• 根元素，即HTML元素
• float不为none
• overflow的值不为visible（overflow:hidden;）
• display的值为inline-block,table-cell,table-caption
• position的值为absolute或者fixed

 BFC触发后的效果。

• 自适应两栏布局
• 可以阻止元素被浮动元素覆盖
• 如果元素里面包含浮动元素，可以清除内部浮动（原理：父元素创建了BFC后，里面的子元素即使是float也会参与高度计算）
• 分属于不同BFC时，可以防止margin重叠

5，代码题 

1，用css画一条0.5px的线

2，使用CSS实现淡出淡入动画效果 

 

3，用css实现一个选中变色的细线边框表格

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

5， 要求实现下图效果