前端知识点总结（html+css）-智码星河

众所周知，前端内容多而杂，经过查阅各种资料，总结了一些知识点，以备后续复习使用。

html篇

html应该是前端中最简单的知识点了，标签用着用着就熟记于心，话不多说，上干货。

1. 常见块级元素、行内元素、行内块元素的特点和区别

块级元素 (常见的块级元素div，p，h，form，li)

一行显示一个;
宽度默认为容器的100%；
可以设置高度宽度内外边距
块级元素可以包含其他的块级元素和文本（如div下可包含div）

行内元素（常见的行内元素a,span.img）

一行显示多个
宽度为内容的宽度
不可以设置高度和宽度
标签内一般不包含标签（如a标签内包含a标签）

行内块元素

行内块元素包含块级元素和行内元素的特征

2. html5有哪些新特性

语义标签（header，footer，nav，artice，section，aside）
音视频标签（audio，video）
画布（canvas）
地理（geolocation）
web存储api（localstorage，sessionstorage）

3. img标签上的title属性和alt属性的区别

alt属性为了给不能看到图片的人提供文字说明，图片加载失败时
title属性可以实现鼠标悬停时提示的内容

css篇

学习css重点就是清楚的了解布局，给你一个页面，你能一眼知道这个页面如何布局。

1. css盒模型

标准盒模型：height/width = content(默认)
IE盒模型：height/width = content+padding+border
通过css3的box-sizing属性设置，设为content-box即为标准盒模型，设为border-box即为IE盒模型

2. css选择器

优先级！important（infinite）>id（1000）>class（100）>伪类选择器（:first-of-type）>伪元素选择器（::after）元素选择器（div）
如果优先级相同，选择最后出现的样式

3. css3新增伪类

p:first-of-type 选择属于父元素的首个p元素
p:last-of-type 选择属于父元素的最后一个p元素
p:only-of-type 选择属于父元素的唯一p元素
p:first-child 选择属于属于父元素的唯一子元素 扩展: 伪元素：::before，::after，::first-line，::first-letter，::selection、::placeholder

4. BFC原理（块级格式化上下文）

含义：是页面中的一块独立渲染区域，并有一套渲染规则。它决定了其子元素如何定位，以及其它元素的关系和相互作用。（属于普通流）

如何创建BFC

overflow不为visible
float不为none
position不为static或者relative
display属性为inline-block、flex、table-cell等

BFC作用

可以避免外边距重叠的问题，将两个元素放在不同的BFC容器中即可。（或者把其中一个margin改为padding）
解决高度塌陷
阻止元素被浮动元素覆盖

5. 高度塌陷

原因

很多情况父盒子不方便给高度，子盒子浮动脱离文档流不占位置，使父盒子高度为0

解决方案

在浮动元素末尾加一个空标签，设clear:both

父级添加overflow:hidden

使用after伪元素

:after {
    content:’’,   
    dispaly:block, 
    height:0, 
    visibilty:hidden, 
    clear:both,
}

6. 自适应布局

两栏布局

左边左浮动，右边margin-left（float+margin）
左元素float:left 右边父元素BFC（float+BFC）
左元素绝对定位，left:0;右边margin-left（定位+margin）
父元素display:flex；右边元素flex:1（flex）

三栏布局

左元素左浮右元素右浮，中间设置margin-left和margin-right（浮动+margin）
左右元素absolute，left:0 right:0 中间margin:0 宽
父元素display:flex;中间元素flex:1;（flex）
表格布局:父元素display:table;width:100% 所有子元素：display:table-cell
calc布局：全部float:left .main:calc(100% - 两宽度) 使用calc符号两边一定要有空格

7. 如何用css创建一个三角形

箭头向下的三角为例

   width : 0
   height : 0
   border : 6px solid transparent
   border-top : 6px solid red

8. display:none、visibilty:hidden和opacity:0的区别

display:none  //不显示对应元素，在文档中不占位置
visibilty:hidden //隐藏对应元素，在文档中仍保留位置
opacity：0 //隐藏元素，占位置，可添加事件

9. css中的overflow属性

 scroll  //必会出现滚动条
 auto //子元素内容大于父元素，显示滚动条，超出显示，不超出不显示
 visible //溢出内容出现在父元素之外
 hidden //溢出隐藏

10. 溢出文字的省略显示

单行文本

white-space: nowrap //(强制一行显示)
overflow: hidden //(溢出隐藏)
text-overflow: ellipsis //(显示省略标记)

多行文本

  -webkit-line-clamp:2 //（用来限制在一个块元素显示的文本的行数）
  display: -webkit-box//（将对象作为弹性伸缩盒子模型显示）
  overflow: hidden;
  -webkit-box-orient: vertical; //（设置对齐模式）
  text-overflow: ellipsis //（以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本）

11. 为什么要初始化css

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

* { 
    padding：0；
    margin：0；
  }

12. 如何使英文单词发生词内断行

word-wrap:break-word。

13. div水平垂直居中的几种方式。

绝对定位(子绝父相)

<div class="father">
  这里是父容器
  <div class="child">
  这里是子容器
  </div>
</div>

.father {
   width: 200px;
   height: 200px;
   background: yellowgreen;
   position: relative;
 }

.child {
   width: 100px;
   height: 100px;
   background: red;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

flex布局

 <div class="father">
    <div class="child">这里是子div</div>
 </div>

.father {
  width: 200px;
  height: 200px;
  background: yellowgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
   width: 100px;
   height: 100px;
   background: slateblue;
 }

div绝对定位水平垂直居中(margin:auto实现绝对定位元素的居中)

 <body>
   <div class="center">这里是div</div>
 </body>

.center {
   width: 200px;
   height: 200px;
   background: yellowgreen;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
 }

14. px和em的区别是什么

px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的值不是固定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px，所以未经调整的浏览器都符合lem=16px，那么12px=0.75em，10px=0.625em。
与em对应的另一个长度单位是rem，是指相对于根元素（通常是HTML元素）字体的大小。
vw和vh：都是针对当前浏览器窗口大小而言，1vw就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一。

15.z-index(层叠上下文)

触发条件：根层叠，html本身的层叠 position非static css3的新特性：