一.说下盒模型?

有两种盒模型，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. python实现自动发邮件

    Python有两个内置库:smtplib和email,可以实现邮件功能,无需下载,直接import导入. smtplib库负责发送邮件 Email库负责构造邮件格式和内容 邮件发送需要遵守SMTP协议 ...

  2. 第四十一章、PyQt显示部件：TextBrowser、CalendarWidget、LCDNumber、ProgressBar、Label、HorizontalLine和VerticalLine简介

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.概述 在Designer中,显示部件有Labe ...

  3. Java数据结构（十五）—— 多路查找树

    多路查找树 二叉树和B树 二叉树的问题分析 二叉树操作效率高 二叉树需要加载到内存,若二叉树的节点多存在如下问题: 问题1:构建二叉树时,需多次进行I/O操作,对与速度有影响 问题2:节点海量造成二叉 ...

  4. Flask flask-migrate 数据库迁移

    简介 flask-migrate是flask的一个扩展模块,主要是扩展数据库表结构的. 官方文档:http://flask-migrate.readthedocs.io/en/latest/ 使用: ...

  5. print(end="\r") 滚动输出到屏幕

    for i in range(10000): print(i, end = "\r") print(end="\r") 滚动输出到屏幕

  6. LeetCode初级算法之字符串：344 反转字符串

    反转字符串 题目地址:https://leetcode-cn.com/problems/reverse-string/ 编写一个函数,其作用是将输入的字符串反转过来.输入字符串以字符数组 char[] ...

  7. Srcum冲刺_Day05

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

  8. 结对项目Myapp

    ·Github地址:https://github.com/Dioikawa/Myapp ·成员:陈杰才(3118005089) 蔡越(3118005086) ·耗费时间估计: PSP2.1 Perso ...

  9. 【opencv】学习笔记

    安装 此笔记仅对python36实用 OpenCV装3.4.1.15 指令:pip install -i https://pypi.tuna.tsinghua.edu.cn/simple opencv ...

  10. 【Pyhton 】 装饰器

    # -*- coding:utf8 -*-# Author : Mr·Yang''' 装饰器,带参数装饰器,装饰器中带参数''' import time# 普通装饰器'''def time_decor ...