面试准备之（二）--CSS常用知识点

   第二部分总结一下CSS相关内容。这部分内有很多，但是从网上各位大神的面经中发现，对于CSS的考核点比较少，主要因为样式相关内容多而杂，在面试的短短时间内，并不可能面面俱到，所以下面总结也不会总结所有的CSS的知识点，而是结合网上大家的经验总结一下面试能用到的知识点。

一、盒模型

W3C标准盒模型的基本结构如上图所示。
布局方式：默认左—右，上—下；可以使用float,absolute来改变这种默认布局。
1、外边距塌陷：指正常文档流中相邻的两个块元素的外边距合称一个的现象，只出现在上下边距。此时计算外边距方法：取绝对值较大的，若为一正一负，则取二者之和。以下4种情况中会出现塌陷：
（以下提到的父元素是没有上边框和上内边距的）
1）父元素+child1：第一个子元素前没有内容，且为其定义了上外边距
2）父元素+lastchild：最后一个元素之后没有内容，且定义了下边外距
3）两个相邻的兄弟元素：分别定义了下外边距和上外边距
4）一个空元素：只定义了上下外边距
2、CSS选择器有哪些？哪些属性可以继承？
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
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]
3、伸缩盒flex：
flex的设置需要使用display元素定义，之后通过其属性进行设置，主要属性和作用如下图：
（在flex中可以用session来绘制块模型）

常见考题：实现一段长文字的…省略显示（一行中…或者多行之后再…）：
1）普通盒中一行中…的实现方法：

style样式：

最终实现效果：

2）伸缩盒中…省略实现方法：

style样式：

最终实现效果：

有一篇文章对于这部分介绍的很详细，可以参考：https://www.cnblogs.com/le220/p/7967591.html
4、BFC—块格式化上下文：一种规定，不是一段代码
1）原则和意义：

• 一个BFC中的元素和外部元素独立
• 一个元素只能存在一个BFC中
• BFC中的内容不会和外部浮动子元素重叠
• 计算BFC高度，需要加上其内部的浮动元素

2）创建BFC的方法：

• 用html元素包裹
• float属性不为none
• position属性为absolute或fixed
• display属性为inline-block、table-cell、table-caption或伸缩盒（flex，inline-flex）
• overflow属性不为visible

3）作用：

• 清除浮动
• 解决外边距塌陷
• 宽度自适应的两栏布局

5、选择器：
1）基本选择器：通配选择器（*）、类型选择器（用元素名选择）、类选择器（在div中用class，style中用.选择）、ID选择器（div中用id）
2）伪选择器：不出现在HTML中，对大小写不敏感

• 伪类选择器：以：开头；描述元素动态特征；常用的有链接伪类、位置伪类、表单伪类；
• 伪元素选择器：以：：开头；处理文档内容；可以过滤或添加内容

6、实现圣杯布局：
最终实现效果图：

代码实现：：：实现方案不确定，且不同浏览器对于某些布局的适应程度不一样，这里的实现方案比较简单粗暴。。。


7、怎么实现居中：
1)水平居中：

<section id="aaa"></section>

a、外边距margin左右相等：

#aaa{
     width: 40px;
     margin: 0 auto;
     }

b、块级改成行内块（display:inline-block），然后再在父级使用text-align:center
c、使用定位 ：left：50%，margin-left：-1/2块宽度；或者left:50%，transform:translateX(-50%) ----常用语浮动元素的水平居中;
d、伸缩盒实现：父级元素display：flex，justify-content：center (相对于主轴居中对齐)

2）垂直居中：
a、单行且高度已知，设置line-height = height = (xxx)px
b、高度不知道不固定，由内容撑起，使用内边距padding，使上下padding相等
c、表格盒模型td：display:table, vertical-align：middle
d、定位，方法同水平居中，只是方向不一样
e、伸缩盒实现：父级元素display：flex，align-items：center （相对于侧轴对齐）