前端重点知识总结—CSS基础

2.相邻的两个inline-block节点为什么会出现间隔，该如何解决

原因：元素被当成行内元素排版的时候，原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度。这个宽度会随着字体大小变化而变化。

解决办法：

1. font-size：父元素字体为0，子元素设置字体大小。
2. 改变书写方式，子元素书写代码时不要换行。
3. 使用margin负值将子元素向左偏移。
4. 父元素display: table;letter-spacing: 0

3.display有哪些取值

1. none 此元素不会被显示，并且不占据页面空间，这也是与visibility:hidden不同的地方，设置visibility:hidden的元素，不会被显示，但是还是会占据原来的页面空间。
2. inline 行内元素会在一行内显示，超出屏幕宽度自动换行，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。示例元素：span,b,i,a,u,sub,sup,strong,em
3. block 块级元素 会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。示例元素：div,h1-h6,ul,ol,dl,p
4. inline-block 行内块元素 与行内元素一样可以再一行内显示，而且可以设置宽高，可以设置margin和padding。示例元素：input,button,img
5. list-item 列表元素。示例元素：li
6. table 会作为块级表格来显示(类似于<table>)，表格前后带有换行符。
7. inline-table 会作为内联表格来显示(类似于<table>)，表格前后没有换行符。
8. flex 弹性布局，火狐可以直接使用，谷歌和欧朋需要在属性值前面加-webkit-前缀（当前已支持），比较适合移动端开发使用。

4. CSS选择符有哪些?优先级?内联和important哪个优先级高?

标签选择符、class类选择符、id选择符、属性选择符[herf^='http']、伪类选择符:hover/::before/::after、相邻选择符+/~、子级选择符>、继承选择器，通配符*、

优先级：!important > 内联样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

5.清除浮动的几种方式,各自的优缺点

1. 使用空标签清除浮动 clear:both，但会增加无意义的标签
2. 父级元素使用overflow:auto，可以清除子元素的浮动。（overfolow形成bfc，可以清除浮动）
3. 是用::afert伪元素清除浮动(用于非IE浏览器，兼容ie67用zoom:1)

6. CSS首行缩进

设置text-indent属性

7.字间距

设置letter-spacing属性

8.行内元素和块级元素的转换

使用display:block和display:inline

9.隔行变色的两种方法

1. 使用JS循环所有li标签，对其index取模运算（如i%2==0），值为0或不为0设置两种背景色
2. 使用css3的结构伪类选择器:nth-child(even)、:nth-child(odd)、:nth-child(2n) 、:nth-child(2n-1)等设置不同背景色。Even\2n代表偶数行，odd/2b-1代表奇数行

10.css文字竖排显示的方法

① 使用writing-mode属性

• 语法：writing-mode:lr-tb 或 writing-mode:tb-rl
• 参数：lr-tb：从左向右，从上往下；tb-rl：从上往下，从右向左。

② 限制宽度，使用换行实现

width: 30px;
word-break: break-word;

11.CSS实现垂直、水平居中

1) 文字内容居中

水平居中：text-align设置行高line-height

2) 块级元素居中

1. 设置元素宽高，使用左右margin值为auto实现水平居中，然后使用css3的calc语法设置上边距为父级元素高度的一半减去元素高度的一半。缺点是必须支持css3,且元素宽高固定。
2. 设置元素宽高，父级相对定位，当前元素绝对定位，设置top和left分别为父级元素宽高的50%,然后在使用负的margin回退自身宽高的一半。缺点是元素宽高必须固定。
3. 利用定位及margin:auto实现，父级相对定位，当前元素绝对定位，设置然后设置定位的上下左右都为0，magin:auto自动适应。可以实现水平垂直居中。缺点是当前元素宽高固定。
4. 父级相对定位，当前元素绝对定位，设置top和left分别为父级元素宽高的50%,然后使用transform:translate(-50%,-50%)。优点是解决元素宽高不固定情况。缺点是浏览器需支持css3
5. 使用flex伸缩布局，父级元素添加display: flex; justify-content: center;//使子项目水平居中align-items: center;//使子项目垂直居中，缺点是兼容性较差，不支持IE低版本。
6. 使用table布局，父级元素添加display:table-cell;vertical-align:middle;//实现垂直居中，text-align:center;//水平居中。子元素设置为内联元素，添加display:inline-block;优点是元素宽高可以不固定。
7. 使用浮动实现水平居中，需要在元素外嵌套两层元素。最外层元素设置左浮动，宽度100%（即float:left;width:100%）。中间层元素设置左浮动、相对定位，左边距为50%(即float:left;position:relative;left:50%)。当前元素设置左浮动、相对定位，右边距为50%（即float:left;position:relative;right:50%）。

12.CSS相邻兄弟选择器

1. 选择下一个元素 `h1 + p {margin-top:50px;}`(可以选取h1之后的第一个p节点)
2. 选择后续的所有兄弟 `h1 ~ p {background: #aaf;}`(可以选取h1之后的所有p节点)

13.pointer-events 指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target

1. 常用值为none`pointer-events:none;`,默认值为`auto`，其它值针对SVG。
2. 常用`none`来取消遮罩块的鼠标事件，避免遮罩块影响主元素层的事件。

14.触发BFC的条件

BFC：上下文块状格式化，是一个独立的布局环境，其中的元素布局是不受外界的影响，有独立的渲染区域，他的子元素可以被BFC定义位置。

说明：BFC与其他块状元素不同的是他脱离文档流，隔离开不受其他元素的影响，自己定义自己的样式位置，以及其他属性。

BFC布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

触发条件：

1. 当添加了float属性，且float不为none时
2. 添加定位，position值为absolute或fixed
3. 将元素强制转换类型（display：inline-block，table-cell，table-caption，flex，inline-flex）
4. 块元素添加overflow属性，且属性不能为visible

注：浮动元素不会影响BFC的页面布局，且在清除浮动时只能将BFC前面的浮动元素清除掉。