一.说下盒模型?

有两种盒模型，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. sitespeedio前端性能测试工具介绍

    很久没有写博客了,今天给大家介绍一款比较好用的前端性能测试工具. sitespeedio简介: sitespeed.io是Jonathan Lee发布的一款可监视和衡量网站前端性能的开源工具. 1.开 ...

  2. Python中判断一个中文是否中文数字的方法

    Python内置功能非常强大,在字符串内置函数中提供了一个判断字符串是否全数字的方法,而且这个方法不只是简单判断阿拉伯数字,包括中文数字和全角的阿拉伯数字都认识,这个函数就是字符串的isnumeric ...

  3. 第14.17节 爬虫实战3： request+BeautifulSoup实现自动获取本机上网公网地址

    一. 引言 一般情况下,没有特殊要求的客户,宽带服务提供商提供的上网服务,给客户家庭宽带分配的地址都是一个宽带服务提供商的内部服务地址,真正对外访问时通过NAT进行映射到一个公网地址,如果我们想确认自 ...

  4. [BJDCTF 2nd]简单注入

    [BJDCTF 2nd]简单注入 hint.txt出现了内容. 大概意思和国赛一道题相同. username处注入\来转义单引号,password处使用sql语句整数型注入. 例如: 传入admin\ ...

  5. React中对render进行的小优化

    react中state和props变化会造成render的重新渲染,有时候我们会在render函数中进行一些稍微复杂的逻辑运算 比如说,像下边这种 在props中将 industries引入,然后对其 ...

  6. mycat启动失败

    1.问题 使用mycat配置主从读写分离,启动mycat报错信息如下: STATUS | wrapper | 2020/06/17 17:00:11 | --> Wrapper Started ...

  7. centos 7.5搭建oracle DG

    一.背景 1.IP分配 主库:192.168.12.5 node1 备库:192.168.12.6 node2 2.环境 主库已安装数据库软件,已建库,并有业务数据 备库已安装数据库软件,未建库 二. ...

  8. oracle使用rman备份集恢复方式创建ADG

    一.背景 系统: 主库:rhel 6.4 64bit 备库:rhel 6.4 64bit   内存:2G [oracle@dgdb1 ~]$ free -m total used free share ...

  9. Java8遍历Map、Map转List、List转Map

    1. 遍历Map Map<Integer, String> map = new HashMap<>(); map.put(1, "a"); map.put( ...

  10. 【JAVA基础】静态方法

    /* * 与Python的静态单例比较: * 一样是需要加上static方法才可以直接调用类里面的私有方法 * * Python的类方法上 加上装饰器@staticmethod就可以不用实例化类而直接 ...