一.说下盒模型?

有两种盒模型，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. PyQt（Python+Qt）学习随笔：QListWidget的信号简介

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 不含继承信号,QListWidget自身的信号包括如下: currentItemChanged(QL ...

  2. PyQt(Python+Qt)学习随笔：Qt Designer中图像资源的使用及资源文件的管理

    一.概述 在Qt Designer中要使用图片资源有三种方法:通过图像文件指定.通过资源文件指定.通过theme主题方式指定,对应的设置界面在需要指定图像的属性栏如windowIcon中通过点击属性设 ...

  3. 分布式计算框架-Spark(spark环境搭建、生态环境、运行架构）

    Spark涉及的几个概念:RDD:Resilient Distributed Dataset(弹性分布数据集).DAG:Direct Acyclic Graph(有向无环图).SparkContext ...

  4. 题解-洛谷P5410 【模板】扩展 KMP（Z 函数）

    题面 洛谷P5410 [模板]扩展 KMP(Z 函数) 给定两个字符串 \(a,b\),要求出两个数组:\(b\) 的 \(z\) 函数数组 \(z\).\(b\) 与 \(a\) 的每一个后缀的 L ...

  5. Python零散知识点记录

    1.关于setdefaultencoding之前必须reload(sys): 要在调用setdefaultencoding时必须要先reload一次sys模块,因为这里的import语句其实并不是sy ...

  6. JDK11 下载安装与配置环境变量

    1.jdk11本身也包含jre,不需要安装jre,低版本需要安装jre 2.jdk下载地址:https://www.oracle.com/technetwork/java/javase/downloa ...

  7. layui的登录页面设计

    主要的结构 先导入layui的主要的js和css等 <html> <head> <meta charset="utf-8"> <title ...

  8. 闭关修炼180天--手写IOC和AOP(xml篇)

    闭关修炼180天--手写IOC和AOP(xml篇) 帝莘 首先先分享一波思维导图,涵盖了一些Spring的知识点,当然这里并不全面,后期我会持续更新知识点. 在手写实现IOC和AOP之前(也就是打造一 ...

  9. phpMyadmin(CVE-2018-12613)后台任意文件包含漏洞分析

    前言 影响版本:4.8.0--4.8.1 本次复现使用4.8.1     点击下载 复现平台为vulhub.此漏洞复现平台如何安装使用不在赘述.请自行百度. 漏洞复现 漏洞环境启动成功. 访问该漏洞地 ...

  10. 用Python写个开心消消乐小游戏

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 提到开心消消乐这款小游戏,相信大家都不陌生,其曾在 2015 年获得过玩家最喜爱的移动单机游戏奖,受 ...