前端面试题html和css（100道前端css面试题）
css中none是什么 前端工程师常见面试题（前端基础）——CSS
说一下 css 盒模型
参考回答
简介 就是用来装页面上的元素的矩形区域 。CSS 中的盒子模型包括 IE 盒子模型和标 准的 W3C 盒子模型。
box-sizing(有 3 个值哦) border-box,padding-box,content-box.
标准盒子模型
IE 盒子模型
区别 从图中我们可以看出， 这两种盒子模型最主要的区别就是 width 的包含范围， 在 标准的盒子模型中， width 指 content 部分的宽度， 在 IE 盒子模型中， width 表示 content+padding+border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差 异
标准盒子模型的盒子宽度 左右 border+左右 padding+width
IE 盒子模型的盒子宽度 width 在 CSS3 中引入了 box-sizing 属性， box-sizing:content-box表示标准的盒子模型， box-sizing:border-box 表示的是 IE 盒子模型 ， 前面我们还提到了， box-sizing:padding-box,这个属性值的宽度包含了左右 padding+width 也很好理解性记忆， 包含什么， width 就从什么开始算起。
画一条 0.5px 的线
参考回答
采用 meta viewport 的方式
ltmeta name=#34viewport#34 content=#34initial-scale=1.0, maximum-scale=1.0, user-scalable=no#34 /gt
采用 border-image 的方式
采用 transform: scale()的方式
link 标签和 import 标签的区别
参考回答
link 属于 html 标签， 而@import 是 css 提供的
页面被加载时， link 会被加载， 而@import 引用的 css 会等到页面加载结束后加载。 link 是 html 标签， 没有兼容性， 而@import 只有 IE5 以上才能识别。
link 方式样式的权重高于@import 的。
transition 和 animation 的区别
参考回答
Animation 和 transition 大部分属性是相同的， 他们都是随时间改变元素的属性值， 他们 的主要区别是 transition 需要触发一个事件才能改变属性， 而 animation 不需要触发任何 事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from .... to，而 animation 可以一帧一帧的。
Flex 布局
参考回答
文章链接
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool(语法篇) http://www.ruanyifeng.com/blog/2015/07/flex-exles.html(实例篇)Flex 是 Flexible Box 的缩写， 意为#34弹性布局#34， 用来为盒状模型提供更大的灵活性。
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它 对于那些特殊布局非常不方便， 比如， 垂直居中就不容易实现。
简单的分为容器属性和元素属性
容器的属性
flex-direction 决定主轴的方向 (即子 item 的排列 ).box {flex-direction: row | row-reverse | column | column-reverse}flex-wrap 决定换行规则.box{flex-wrap: nowrap | wrap | wrap-reverse}flex-flow.box {flex-flow: ltflex-directiongt || ltflex-wrapgt}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
比如说， 用 flex 实现圣杯布局
BFC (块级格式化上下文， 用于清楚浮动， 防止 margin 重叠等)
参考回答
直译成 块级格式化上下文， 是一个独立的渲染区域， 并且有一定的布局规则。 BFC 区域不会与 float box 重叠
BFC 是页面上的一个独立容器， 子元素不会影响到外面
计算 BFC 的高度时， 浮动元素也会参与计算
那些元素会生成 BFC
根元素
float 不为 none 的元素
position 为 fixed 和 absolute 的元素
display 为 inline-block 、table-cell 、table-caption， flex， inline-flex 的元素 overflow 不为 visible 的元素
垂直居中的
参考回答
(1)margin:auto 法
css:
div{width: 400pxheight: 400pxposition: relativeborder: 1px solid #465468}img{position: absolutemargin: autotop: 0left: 0right: 0bottom: 0}
html:
ltdivgtltimg src=#34mm.jpg#34gtlt/divgt
定位为上下左右为 0， margin 0 可以实现脱离文档流的居中.
(2)margin 负值法
.container{width: 500pxheight: 400pxborder: 2px solid #379position: relative}.inner{width: 480pxheight: 380pxbackground-color: #746position: absolutetop: 50%left: 50%margin-top: -190px /height 的一半/margin-left: -240px /width 的一半