css基础知识整理篇

转自某个大神整理的面试题

盒子模型

标准盒子模型

内容（content）+ 填充（padding）+ 边界（margin）+ 边框（border）;

低版本IE盒子模型

content部分把border和padding算进去了

CSS选择符

1、id选择器  #myid
2、类选择器  .myClassName
3、标签选择器  div,h1,p
4、相邻选择器  h1+p
5、子选择器  ul>li
6、后代选择器  li a
7、通配符选择器  *
8、属性选择器  a[rel = "external"]
9、伪类选择器  a:hover,li:nth-child

可继承的样式：font-size  font-family  color  ul  li  dl  dd  dt;
不可继承的样式：border  padding  margin  wdith  height

CSS3新增伪类

p:first-of-type  选择属于父元素的首个P元素的每个p元素
p:last-of-type  选择属于父元素的最后一个p元素的每个p元素
p:only-of-type  选择属于父元素的唯一的p元素的每个p元素
p:only-cild  选择属于父元素的唯一子元素的每个p元素
p:nth-child(2)  选择属于其父元素的第二个子元素的每个p元素
:after  在元素之后添加内容
:before  在元素之前添加内容
:enabled  控制表单控件的禁用状态
:disabled  同上
:checked  单选框或复选框被选中

垂直居中

https://segmentfault.com/a/11...

display有哪些值

block  像块类型元素一样显示
inline  像行内元素一样显示
inline-block  像行内元素一样显示，但其内容像块类型元素一样显示
list-item  像块类型元素一样显示，并添加样式列表标记
table  次元素会作为块级表格来显示
inherit  规定应该从父元素继承

position:relative/absolute

absolute:生成绝对定位的元素，相对于值不为static的第一个父元素进行定位
fixed:生成绝对定位的元素，相对于浏览器窗口进行定位
relative:生成相对定位的元素，相对于其正常位置进行定位
static:默认值，没有定位，元素出现在正常的流中，忽略top,bottom,left,right,z-index声明 
inherit:规定从父元素继承

CSS3有哪些新特性

https://segmentfault.com/a/11...

用纯CSS创建一个三角形

#demo {
    width:0;
    height:0;
    border-width:20px;
    border-style:solid;
    border-color:transparent transparent red transparent;
}

满屏 品 字布局

html:
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css:
#div {
    width:100%;
    height:50%;
}
#div2,#div3{
    width:50%;
    height:50%;
}
#div2{
    float:left;
}

li与li之间的空白间隔

行框的排列会受到中间空白（回车、空格）等影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了

初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

visibility:collapse;

CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，
它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。   
在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别;
在火狐浏览器、Opera和IE11里，使用collapse值的效果就相当于display:none;

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

position跟display和float相互叠加的结果：

若display:none,则position和float都不起作用；

display不是none,当position:absolute或fixed的时候，float的计算值都为none,且display的计算方法为
inline-table ——> table
inline,run-in,table-row-group,table-column,table-column-group,table-eader-group,table-footer-group,table-row,table-cell,table-caption,inline-block ——> block
其他 ——> 同设定值

display不是none,position不是absolute或fixed,
当float不是none，即有设定值，则display按照上述计算方法计算；

当float是none，即没有设定值：
若元素时根元素，display按照上述计算方法计算，
如果不是，则应用设定值

margin collapse

1.两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。

折叠后 margin 的计算:
1). 参与折叠的 margin 都是正值:
在 margin 都是正数的情况下，取其中 margin 较大的值为最终 margin 值。   
2). 参与折叠的 margin 都是负值:
当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移。
3). 参与折叠的 margin 中有正值，有负值
有正有负，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
4). 相邻的 margin 要一起参与计算，不得分步计算

2. 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠

3.创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠 

4.元素自身的 margin-bottom 和 margin-top 相邻时也会折叠        

BFC

形成BFC的条件：
1、浮动元素，float 除 none 以外的值； 
2、绝对定位元素，position（absolute，fixed）； 
3、display 为以下其中之一的值 inline-block，table-cell，table-captions； 
4、overflow 除了 visible 以外的值（hidden，auto，scroll）

CSS优化、提高性能的方法有哪些？

1、避免使用多类选择符
2、移除空的css规则
3、正确使用display属性
4、不滥用浮动
5、不滥用web字体
6、不声明过多的font-size
7、不在选择符中使用id标示符
8、不重复定义h1~h6元素
9、值为0的时候不需要任何单位
10、标准化各种浏览器前缀
11、使用CSS渐变等高级特性，需要指定多有浏览器前缀
12、遵守盒模型规则

浏览器是怎样解析CSS选择器的？从右向左

在网页中的应该使用奇数还是偶数的字体？为什么呢？

偶数用得比较多，可能是因为便于计算吧

margin和padding分别适合什么场景使用？

何时当用margin:
需要再border外侧添加空白时；
空白处不需要背景时；
上下相连的两个盒子之间的空白，需要相互抵消时。

何时当用padding:
需要在border内侧添加空白时；
空白处需要背景时；
上下相连的两个盒子之间的空白，希望能与 两者之和时

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。