前端常见面试题-css篇

1.css盒子模型

css3 引入了box-sizing属性，有三个值，border-box（IE盒子模型）、content-box（标准盒子模型）、padding-box。

W3C标准盒子模型：

设置width指的是content的宽度。
盒子宽度：border+padding+width

IE盒子模型：

设置width就是盒子宽度

注意： box-sizing：padding-box

宽度width指的是padding+width。
盒子宽度：border+width。

2.画一条0.5px的直线

height:1px;
transform:scale(0.5);

3、link和import标签的区别

link属于html标签，页面被加载时，link会同时被加载。没有兼容性问题。
@import是css提供的，会在页面加载完毕后再加载，只有IE5以上才能识别。
注意： link方式引入的样式的权重高于@import。

4、transition和animation的区别

两者都是随时间改变元素的属性值
区别：

transition需要触发一个事件才能改变属性.为两帧，from…to…
animation不需要触发任何事件随着时间改变属性值，是一帧一帧的。

5、BFC（块级格式化上下文，用于清除浮动，防止margin重叠）

独立的渲染区域，有一定的布局规则，子元素不会影响到外面。
生成BFC的条件：

根元素
float不为none的元素
position为fixed和adsolute的元素
overflow不为visible的元素(auto,scroll,hidden)
display为inline-block、table-cell、flex、inline-flex、table-caption的元素

6、清楚浮动

父级 div 定义伪类：after 和 zoom (推荐使用，建议定义公共类，以减少 CSS 代码)

 .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}.clearfloat{zoom:1}

在结尾处添加空 div 标签 clear:both

<div class="parent"><div class="left">Left</div><div class="right">Right</div><div class="clearfloat"></div>
</div>
<style>.left {float:left}.clearfloat{clear:both}
</style>

父级 div 定义 height
父级 div 定义 overflow:auto
父级 div 定义 overflow:hidden
父级 div 也一起浮动
父级 div 定义 display:table
结尾处加 br 标签 clear:both

7、如何垂直居中一个元素

绝对定位。通过与父元素的绝对定位来让自身实现垂直居中。
如果居中的是行内元素，可以设置父级 height 与 line-height 相等
设置 margin/padding 居中
相对位置偏移居中
flex 居中设置 align-items:center 即可

8、position定位

static 默认不定位
relative 相对定位相对于原来正常文档流的自己定位
absolute 绝对定位
当父元素无定位，相对于浏览器定位
当父元素有定位，相对于离自己最近的有定位的包含框定位
fixed 固定定位始终相对于浏览器定位

9、使用CSS实现隐藏元素的方式有几种？

Opacity:设置一个元素的透明度 .hide{opacity:0;}
Visibility .hide{visibility:hidden}
Display:确保元素不可见并且连盒模型也不生成 .hide{display:none}
Position .hide{position:absolute; top:-9999px; left:-9999px;}
Clip-path .hide{clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px};

10、27. CSS 中的长度单位有哪些

绝对长度单位：

PX 实际上是一个按角度度量的单位，是一个像素单位
Em 是一个相对单位，相对本身字体大小
Rem rem和em一样也是一个相对单位，但是和em不同的是rem总是相对于根元素

可视区百分比长度单位：

Vw 是可视区宽度单位，1vw等于可视区宽度的百分之一，vw单位跟百分比很相似

11、28. CSS中选择器的优先级关系？

！Important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性

前端常见面试题-css篇相关推荐

前端常见面试题 - JS篇
以下会是JS常见面试题: 面试题将会以系列不定时更新,编写不宜,如有用到,请动动小手关注一下. 1. 简述ES6 1. let: 块级作用域. 2. const: 常量; 块级作用域; 一旦声明, 则 ...
前端常见面试题及答案
文章转自http://www.cnblogs.com/syfwhu/p/4434132.html 前言本文是在GitHub上看到一个大牛总结的前端常见面试题,很多问题问的都很好,很经典.很有代表性. ...
前端常见面试题---flex:1 是什么？
前端常见面试题-flex:1 是什么文章目录前端常见面试题---flex:1 是什么 Flex-grow Flex-shrink Flex-basis flex=1得应用一个高度自适应的div, ...
laravel mysql sum查询并排行_必看！PHP常见面试题——MySQL篇（二）
接上期:<必看!PHP常见面试题--MySQL篇(一)> 11.MySQL的默认事务隔离级别是? 读未提交(RU): 一个事务还没提交时, 它做的变更就能被别的事务看到. 读提交(RC): ...
大数据常见面试题 Hadoop篇（2）
大数据常见面试题 Hadoop篇(1)_后季暖的博客-CSDN博客1)序列化和反序列化序列化就是把内存中的对象,转换成字节序列(或其他数据传输协议)以便于存储(持久化)和网络传输.反序列化就是将收到字 ...
大数据常见面试题 Hadoop篇（1）
目录 1.描述一下hdfs的写流程读流程? 2.详细讲解一下hdfs的体系结构 3.如果一个datanode出现宕机,恢复流程是什么样的? 4.通常你是如何解决Haddop的NameNode宕机的, ...
web前端常见面试题
Vue面试题生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted ...
前端常见面试题之----js单线程，微任务宏任务
js单线程,微任务宏任务前言一.什么是单线程? 二.为什么JS是单线程? 三.任务队列 1. 什么是任务队列 2. 什么是微任务宏任务四.常见面试题例子总结前言他来了他来了,前端必问题之一 ...
“约见”面试官系列之常见面试题第九篇vue实现双向绑定原理（建议收藏）
目录 1.原理 2.实现在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫m ...
“约见”面试官系列之常见面试题第四十一篇之VUE生命周期（建议收藏）
详解Vue Lifecycle 先来看看VUE官网对VUE生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称 ...

前端常见面试题-css篇

1.css盒子模型

2.画一条0.5px的直线

3、link和import标签的区别

4、transition和animation的区别

5、BFC（块级格式化上下文，用于清除浮动，防止margin重叠）

6、清楚浮动

7、如何垂直居中一个元素

8、position定位

9、使用CSS实现隐藏元素的方式有几种？

10、27. CSS 中的长度单位有哪些

11、28. CSS中选择器的优先级关系？

前端常见面试题-css篇相关推荐

最新文章

热门文章

前端常见面试题-css篇

1.css盒子模型

2.画一条0.5px的直线

3、link和import标签的区别

4、transition和animation的区别

5、BFC（块级格式化上下文，用于清除浮动，防止margin重叠）

6、清楚浮动

7、如何垂直居中一个元素

8、position定位

9、使用CSS实现隐藏元素的方式有几种 ？

10、27. CSS 中的长度单位有哪些

11、28. CSS中选择器的优先级关系？

前端常见面试题-css篇相关推荐

最新文章

热门文章

9、使用CSS实现隐藏元素的方式有几种？