一.说下盒模型?

有两种盒模型，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. Spring Cloud Alibaba 初体验(一) Nacos 配置中心

    一.Nacos 下载与初始化配置 本文使用1.2.0,下载地址:https://github.com/alibaba/nacos/releases Nacos 单机模式支持持久化配置到 MySQL 数 ...

  2. day6(celery原理与组件)

    1.Celery介绍 1.1 celery应用举例 Celery 是一个 基于python开发的分布式异步消息任务队列,通过它可以轻松的实现任务的异步处理,如果你的业务场景中需要用到异步任务,就可以考 ...

  3. jarvisoj flag在管理员手上

    jarvisoj flag在管理员手上 涉及知识点: (1)代码审计和cookie注入 (2)哈希长度拓展攻击 解析: 进入题目的界面.看到 那么就是想方设法的变成admin了.挂上御剑开始审计.发现 ...

  4. uni与小程序，vue的区别

    标签区别 uni使用小程序的标签,vue使用web端的标签 标签名变化的: 标签描述\类别 vue uniapp 文本 span\font text 链接 a navigator/ router-li ...

  5. Scrum冲刺_Day07

    一.团队展示: 1.项目:light_note备忘录 2.队名:删库跑路队 3.团队成员 队员(不分先后) 项目角色 黄敦鸿 后端工程师.测试 黄华 后端工程师.测试 黄骏鹏 后端工程师.测试 黄源钦 ...

  6. Scrum 冲刺第五天

    一.每日站立式会议 1.会议内容 1)进行每日工作汇报 张博愉: 昨天已完成的工作:学习如何编写测试计划 今日工作计划:学习如何编写用户手册 工作中遇到的困难:写文档也有很多讲究的点,花了很多时间 张 ...

  7. 软工个人项目 ——wc.exe

    1.GitHub项目地址 https://github.com/k8kiw/WordCount 2.PSP预计时间 PSP2.1 Personal Software Process Stages 预估 ...

  8. CSP-S 2019 Solution

    Day1-T1 格雷码(code) 格雷码是一种特殊的 \(n\) 位二进制串排列法,要求相邻的两个二进制串恰好有一位不同,环状相邻. 生成方法: \(1\) 位格雷码由两个 \(1\) 位的二进制串 ...

  9. redis学习之——主从复制（replication）

    准备:拥有linux环境,并安装redis mater:主机,进行写操作 slave:从机,进行读操作 一.配置 继续前边的学习.我们是拷贝redis.conf,文件到了/root /redis 下. ...

  10. STL——容器（deque）deque 的删除 clear() erase()

    deque.clear(); //移除容器的所有数据 1 #include <iostream> 2 #include <deque> 3 4 using namespace ...