css基础知识整理篇

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

盒子模型

标准盒子模型

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

低版本IE盒子模型

content部分把border和padding算进去了

CSS选择符

一、id选择器  #myid
二、类选择器  .myClassName
三、标签选择器  div,h1,p
四、相邻选择器  h1+p
五、子选择器  ul>li
六、后代选择器  li a
七、通配符选择器  *
八、属性选择器  a[rel = "external"]
九、伪类选择器  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的条件：
一、浮动元素，float 除 none 之外的值； 
二、绝对定位元素，position（absolute，fixed）； 
三、display 为如下其中之一的值 inline-block，table-cell，table-captions； 
四、overflow 除了 visible 之外的值（hidden，auto，scroll）

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

一、避免使用多类选择符
二、移除空的css规则
三、正确使用display属性
四、不滥用浮动
五、不滥用web字体
六、不声明过多的font-size
七、不在选择符中使用id标示符
八、不重复定义h1~h6元素
九、值为0的时候不须要任何单位
十、标准化各类浏览器前缀
十一、使用CSS渐变等高级特性，须要指定多有浏览器前缀
十二、遵照盒模型规则

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

在网页中的应该使用奇数仍是偶数的字体？为何呢？

偶数用得比较多，多是由于便于计算吧

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

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

什么时候当用padding:
须要在border内侧添加空白时；
空白处须要背景时；
上下相连的两个盒子之间的空白，但愿能与 二者之和时

若是须要手动写动画，你认为最小时间间隔是多久，为何？

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

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

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