一.说下盒模型?

有两种盒模型，W3C盒模型和IE盒模型
通常说的“IE盒子模型”指的是IE5.5，IE6及其以后，盒模型都为 content-box
当浏览器未设置<!doctype>声明时，盒模型都为 border-box
通过 css3 的box-sizing属性，可以更改元素的盒子模型

标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
标准盒模型 box-sizing: content-box

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
IE盒模型 box-sizing: border-box

二.不定宽高水平垂直居中？

1.通过display：flex；justify-content:center; align-items:center;就可以让子元素不定宽高水平垂直居中

2.也可以父display：flex；，子设置一个margin：auto；

3.通过css3，给父元素设置相对定位，给子元素设置绝对定位，left：50% top：50%   通过transform：translate（-50%，-50%）拉回自身的宽和高的一半。

4.通过给父元素设置display：table-cell; vertical-align：middle  text-align：center   给子元素设置vertical-align：middle  text-align：center。就可以让子元素不定宽高水平垂直居中了。

三.CSS3的新增特性？

ie9开始支持

1.选择器增加；

2.样式增加：常用

比如：圆角。阴影，渐变背景，半透明，图片边框等；

3.新增的背景样式：

背景图片的显示范围，和起点，缩放。

4.引入了flex弹性 盒模型； 常用

5.阴影效果；文本及盒子阴影。 常用

6.颜色与透明；

新增了HSL/HSLA/RGBA几种颜色模式；

7.web字体和web图标 常用

@font-face{

   font-family: myFont;

   src: url('')

}

div{

  font-family: myFont

}

8.和容器的变形； 常用

transform: translate(50px,100px);平移

transform: rotate(30deg);旋转

transform: scale(2,4);缩放

transform: skew(30deg,20deg);翻转

9.过度动画和交互； 常用

transition过度和animation动画

四.什么是BFC？

BFC是W3C CSS2.1规范中的一个概念，在CSS3.0规范中已被修改为flow root。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC（block formatting context），中文为“块级格式化上下文”

五.如何触发BFC？

  1. float属性不为none 【会影响上级元素】
  2. position为absolute或fixed 【会影响上机元素】
  3. display为inline-block, table-cell, table-caption, flex, inline-flex
  4. overflow不为visible, 【建议使用auto/hidden】
  5. <html>根元素

六.BFC解决了什么问题？

解决自适应两栏布局问题：利用BFC的区域不会与float box重叠的规则。

解决浮动后塌陷问题：利用计算BFC的高度时，浮动元素也参与计算规则。

解决垂直margin重叠问题：利用Box垂直方向的距离由margin决定。

属于同一个BFC(同一个标记)的两个相邻Box的margin会发生重叠规则，在一个box外包裹一个容器，让他生成不同的BFC，这样就不会margin重叠了。

七.为什么overflow:hidden能触发bfc？

块级格式化上下文 (Block Formatting Context)：

    1. 盒子在容器（包含块）内从上到下一个接一个地放置
    2. 两个兄弟盒之间的竖直距离由 margin 属性决定
    3. 同一个 BFC 内垂直 margin 会合并
    4. 盒子的左外边缘挨着容器（包含块）的左边

块级格式化上下文(BFC) 的特性

    1. BFC 内的浮动不会影响到BFC外部的元素
    2. BFC 的高度会包含其内的浮动元素
    3. BFC 不会和浮动元素重叠
    4. BFC 可以通过 overflow:hidden 等方法创建

所有要处理 margin 折叠，就需要让两个元素处于不同的BFC，overflow: hidden正好可以触发BFC

八.如何用css创建一个三角形？

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {

    width: 0;

    height: 0;

    border-width: 20px;

    border-style: solid;

    border-color: transparent transparent red transparent;

  }

九.Position定位值有哪些？

1.relative相对定位  一般给父元素设置

2.absolute绝对定位  一般给子元素设置 相对父元素或祖先带定位样式的元素定位

3.fixed   固定在某个位置，相对浏览器窗口固定在一个位置

4. Inherit：继承父元素的position值。

粘性定位

十.为什么margin: 0 auto会让div居中

margin 可以有4个值，分别对应影响的方向是上，右，下，左，   2个值的时候，对应第一个值是 控制上下距离，第二个值是控制左右， 所以magrgin：0 auto， 就是上下距离为0，auto是自适应，这里指的是左右两个方向的距离一样，也就是说，不论你的宽度怎么变化，都是两个方向距离一样，形成居中。

要给居中元素一个宽度，否则无效

该元素不可以浮动，否则无效

前端面试题归类-css的更多相关文章

  1. 前端面试题归类-css的flex相关

    Flex布局 常见父项的属性: ●flex-direction :设置主轴的方向 Row 默认值从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到 ...

  2. web前端面试题HTML/CSS部分

    web前端面试题HTML/CSS部分 前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面“内容是什么”的问题 ...

  3. 前端面试题：CSS实现水平垂直居中

    这是一个挺常见的前端面试题,但是没有做过总结.有的时候可能会使用完了,很长一段时间不去使用,会慢慢忘记.所以,温故而知新,还是很有必要的. 一.绝对定位元素的居中实现 这一种工作中用的应该是最多的,兼 ...

  4. [WEB面试题] web前端面试题HTML+CSS第一弹，个人整理部分面试题汇总

    以下内容仅供参考,网络整理而来 1.XHTML和HTML是什么有什么不同的区别 HTML是一种基本的WEB网页设计语言 XHTML可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTM ...

  5. 前端面试题（css）

    css  基础面试题 css 面试题 js 面试题 1.介绍下CSS的盒子模型    介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? css 是如何设置这两种模型的 box-si ...

  6. 前端面试题：css相关面试题

    CSS 选择器中,元素选择器和类选择器的区别是什么? 元素选择器是最常见的 CSS 选择器,即,文档的元素就是最基本的选择器.选择器通常是某个 HTML 元素,比如 <p>.<h1& ...

  7. 前端面试题之css

    1.请列出几个具有继承特性的css属性 font-family  font-size  color  line-height  text-align  text-indent 2.阐述display: ...

  8. 前端面试题-HTML+CSS

    引用GitHub 上 ltadpoles的前端面试 https://github.com/ltadpoles HTML部分 1. Doctype作用,HTML5 为什么只需要写<!DOCTYPE ...

  9. 前端面试题归类-HTML1

    一.HTML5的新特性? 1.增强了表单,input新增了一些type:常用 color----定义调色板 tel-----定义包含电话号码的输入域 email---定义包含email地址的输入域 s ...

随机推荐

  1. 日志聚合工具之 Loki

    本文使用的 Loki 和 Promtail 版本为 1.6.1,Grafana 版本为 7.2.0:部署在 Linux 服务器 Loki 负责日志的存储和查询:Promtail 负责日志的采集并推送给 ...

  2. Kafak探究之路- 内部结构小结

    1.框架与工作流 2 内部结构 kafka的每个主题分区的数据在 first-0(主题名-分区号)文件夹下,保存 n组xxx.log文件与xxx.index文件.log文件存发送消息的元数据,每个大小 ...

  3. 5.1 Spring5源码--Spring AOP源码分析一

    目标: 1.什么是AOP, 什么是AspectJ, 2. 什么是Spring AOP 3. Spring AOP注解版实现原理 4. Spring AOP切面原理解析 一. 认识AOP 1.1 什么是 ...

  4. Python中动态编译函数compile(source, filename, mode, ......)参数filename的作用是什么？

    动态编译函数compile调用语法如下: compile(source, filename, mode, flags=0, dont_inherit=False, optimize=-1) 其中的fi ...

  5. flask中SQLAlchemy学习

    ------------------------------------2019-08-22 17:53:54更新------------------------------ SQLALchemy实在 ...

  6. 原创：DynamicDataDisplay波形显示自定义格式

    原创:DynamicDataDisplay 原版本在日期显示的格式上与我们的习惯不一样,特做如下修改: 自定义日期格式修改: //MainWindow.cs中 var ds = new Enumera ...

  7. 深入理解.NET/WPF内存泄漏

    众所周知,内存管理和如何避免内存泄漏(memory leak)一直是软件开发的难题.不要说C.C++等非托管(unmanaged)语言,即使是Java..NET等托管(managed)语言,尽管有着完 ...

  8. POJ3565

    题目大意: 给定\(n\)个蚂蚁和\(n\)颗苹果树的坐标,要求每个蚂蚁爬到一颗苹果树旁,使得每个蚂蚁路线不相交且路线总长度最小,求每个蚂蚁爬到哪个苹果树旁? 首先假设有两只蚂蚁路径相交,那么这两个蚂 ...

  9. Nginx安装配置教程

    转自https://www.cnblogs.com/zhouxinfei/p/7862285.html nginx概述 nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是 ...

  10. 将命令行提示符里的执行结果导出到text文件中

    为便于查看和保存命令行提示符里的执行结果, 可以使用 ">" 将执行结果导入到指定.txt文件中. 例如: 在命令行提示符里查看C盘文件,并将结果导入到E盘dir-c-out ...