CSS

盒模型

盒模型就是在网页中的实际占位
盒模型分为两种
一种是标准盒模型，另一种是IE盒模型
标准盒模型分为：内容content+内边距padding+边框border+外边距margin
IE盒模型分为：内容和内边距和边框为一体，外边距为一体
标准盒模型的宽高指的是conetnt的宽高。
IE盒模型的宽高指的是内容+内边距+边框的宽高
box-sizing：content-box 是标准盒模型
box-sizing：boder-box 是IE盒模型

对BFC的理解

BFC就是一个块级格式化范围。它决定了元素如何对其内容进行定位，以及于其他元素的关系和相互作用。
类似一个作用范围，可以理解成一个独立的容器，并且这个容器里面的box布局与外面的毫不相干。
一个页面由多个box组成，元素的类型和display的属性决定着这个box的类型。
定位方案：
box会在垂直方向上一个接一个布置
属于同一个BFC相邻的两个box的margin会发生重叠
BFC区域不会与浮动的box重叠
计算BFC的高度时，浮动的元素也会计算进去
满足一下一个条件就可触发BFC
根元素是html
浮动值不为none
display值为inline-block

px 和 em 和rem的区别

px是绝对长度单位
em和rem都是相对长度单位
px是一个固定的值，
em的值不是固定的，em会继承父类字体的大小，em是相对于父类的font-size定位大小的
rem是相对于根元素html

box-sizing属性

控制元素盒子模型的解析模式
默认是content-box
content-box是标准盒模型，
border-box是IE盒模型

CSS3的transform，transition

transform是变形
transition是过渡
translate是transform的一个属性，意思是移动
animation是动画
transform有倾斜，移动，3D，转换，缩放，旋转等属性
transiltion有规定设置过渡效果css属性的名称，可以设置多少秒内完成，
还有从什么时候开始，还有过渡的速度

如何垂直居中div，如何居中一个浮动元素

如何水平居中div：
给DIV设置一个高度，然后给margin设置 0  auto

如何居中一个浮动元素：
float：left；
position：absolute；
background-color：red；
lef：50%；
top：50%；
transform:translate(-50%,-50%)

知道宽高的情况下：
position:absolute;
width:200px;
heigh:200px;
margin:auto;
left:0;
top:0;
right:0';
botton:0;

flex方法
width:200px;
height:200px;
dispaly:flex;
justify-content:center;
algin-items:center;

flex的理解

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局，对其布局和分配空间。
并且列表能延伸到占用可用空间。弹性布局没有内在的方向限制。常规布局是基于块和内联流方向，
而flex布局是基于flex布局flex-flow流可以很方便用来做居中，能对不同的屏幕大小自适应。

CSS选择器有哪些，哪些属性可以继承

id选择器
类选择器  class
标签选择器  div  h1 p
子选择器  ul>li
通配符选择器  *
伪类选择器  ：hover

可继承属性
font-size font-famliy color  ul li 
不可继承的属性
border padding margin width heigh

display有哪些值，什么作用

inline 默认属性 此元素会显示为内联元素
block 此元素显示为块元素
none 此元素不会被显示也就是隐藏
inline-block  此元素为行内块元素
list-item 此元素作为列表显示
table 此元素作为块级表格显示

CSS3有哪些新特性

2D转换  transform
过渡   transition
flex布局
盒模型
多媒体查询
动画  	animation
文本效果 阴影   box-shadow
线性渐变

display:none与visibility：hidden的区别

display：none隐藏对应的元素，在文档流中不再布局空间
visibility：hidden隐藏对应的元素，但是在文档流中仍保留原来的空间

position的理解

有absolute，relative，fixed
absolut会使元素脱离文档流，绝对定位是相对于他的父元素进行定位。也就子绝父相
relative不会脱离文档流，相对定位是相对于元素在文档流中原来的位置进行定位
flxed是相对于浏览器窗口进行定位，固定定位会永远固定在浏览器的某个位置，不会随滚动条滚动

为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

在非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开，此时容器就会溢出到容器外面
而影响布局。这时就会出现浮动。他的工作原理就是脱离文档流，不占据空间。引起高度塌陷。浮动元素
碰到包含它的边框或其他浮动元素的边框停留

清楚浮动的方式
给父类添加属性clear：both；
给父类设置：overflow：hidden
添加伪类 :befor和:after
	clearfix:befor,clear:after{
	content: ' ';
	display:table;
	clear:both;
}

::before 和 :after中双冒号和单冒号有什么区别？

单冒号用为css的伪类，双冒号用为css的伪元素

伪元素和伪类的区别和作用

伪元素是在内容元素的前后插入额外的元素和样式，但是这些元素并不会在文档中生成。它们只在外部显示可见
伪类是将特殊的效果添加到特定的选择器上，它是已有元素上添加类别，不会产生新的元素

如何解决外边距重叠

外边距重叠就是margin-collapse
在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距，这种合并外边距的方式成为折叠，
结合而成的外边距成为折叠外边距

如何解决：
外层元素用padding代替
外层元素设置overflow：hidden
内层设置position:absolute
内层加float：left，或者display：inline-block

CSS3新增伪类有那些

：after
：before
：checked
：nth-child（）
：only-child（）
：last-child（）
：first-child（）

设置元素浮动后，该元素的 display 值是多少

自动变成display：block

什么是CSS 预处理器 / 后处理器，有用过吗

Scss Less 了解过Scss

什么是响应式设计

响应式设计就是一个网站能够兼容多个终端，通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport

CSS中有哪几种布局

圣杯布局，flex布局，响应式布局，双飞翼布局

line-height是如何理解的

line-height指一行文字的高度，具体说就是两行文字间基线的距离。如果一个标签没有定义height属性
那么最终表现出来的高度是由line-height来决定的。
把line-height高度设置为height一样的值，可以实现单行文字垂直居中。
设置dispaly-line-height可以i实现多行垂直居中

有哪些行元素和块元素

行元素：img span  a input  em  i  button sub sup select
块元素：div p h1 ul ol li table hr menu  from

选择器的优先级

！important > 行内样式 > ID选择器 >类选择器 >标签 >通配符

什么情况下使用！important

覆盖内联样式的时候 和 覆盖优先级高的选择器的时候

回流，重绘

回流：当页面中一部分或全部的样式因为尺寸，布局或者隐藏等要改变时，那么就需要从新构建样式，重新构建的
这个阶段称为回流
重绘：当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，不会影响布局的时候，这个阶段
称为重绘
回流必将引起重绘，而重绘不一定会引起回流
display:none会引起回流和重绘，visibility:hidden会引起重绘
 元素提升为合成层后，tranform和opacity才不会触发重绘，如果不是合成层则依然会触发重绘
 在 Blink 和 WebKit 内核的浏览器中，具有 transition 或 animation 的 opacity 元素，渲染层被提升为合成层。
 使用position：absolute会提升到单独成，就会触发重绘