个人前端知识梳理-HTML，CSS篇

前言：因为最近在梳理一下我本身的知识体系，为了更好的记录，如今把整理好的资料分享出来，也但愿可以发现错误的地方可以予以指点。谢谢。

======================相关文章和开源库=======================

系列文章

1.前端知识梳理-HTML，CSS篇

2.前端知识梳理-ES5篇

3.前端知识梳理-ES6篇

4.前端知识梳理-VUE篇

我的维护的开源组件库

1.bin-ui，一个基于vue的pc端组件库

2.树形组织结构组件

3.bin-admin ，基于bin-ui的后台管理系统集成方案

4.bin-data ,基于bin-ui和echarts的数据可视化框架

5.其他生态连接

========================================================

（1）dom选择器优先级是什么，以及权重值计算

1.行内样式 1000

2.id 0100

3.类选择器、伪类选择器、属性选择器[type="text"] 0010

4.标签选择器、伪元素选择器(::first-line) 0001

5.通配符*、子选择器、相邻选择器 0000

（2）css3新特性简述

一、颜色：新增RGBA、HSLA模式

二、文字阴影(text-shadow)

三、边框：圆角（border-radius）边框阴影：box-shadow

四、盒子模型：box-sizing

五、背景：background-size设置背景图片的尺寸，background-origin设置背景图片的原点，background-clip设置背景图片的裁剪区域，以“，”分隔能够设置多背景，用于自适应布局

六、渐变：linear-gradient、radial-gradient

七、过渡：transition可实现动画

八、自定义动画

九、在CSS3中惟一引入的伪元素是::selection

十、多媒体查询、多栏布局

十一、border-image

十二、2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)

1三、3D转换

（3）有几种定位方式，有什么区别

`static` 是默认值

`relative` 相对定位 相对于自身原有位置进行偏移，仍处于标准文档流中

`absolute` 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指`position`不是`static`的元素)祖先元素, 以最近的祖先元素为参考标准。若是无已定位祖先元素, 以`body`元素为偏移参照基准, 彻底脱离了标准文档流。

`fixed` 固定定位的元素会相对于视窗来定位,这意味着即使页面滚动，它仍是会停留在相同的位置。一个固定定位元素不会保留它本来在页面应有的空隙。

（4）重排和重绘，什么状况下会触发

部分渲染树（或者整个渲染树）须要从新分析而且节点尺寸须要从新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。 因为节点的几何属性发生改变或者因为样式发生改变，例如改变元素背景色时，屏幕上的部份内容须要更新。这样的更新被称为重绘。

添加、删除、更新 DOM 节点 经过 display: none 隐藏一个 DOM 节点-触发重排和重绘 经过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，由于没有几何变化 移动或者给页面中的 DOM 节点添加动画 添加一个样式表，调整样式属性 用户行为，例如调整窗口大小，改变字号，或者滚动。

（5）css清除浮动的几种方法

清除浮动： 核心：clear:both;

1.使用额外标签法（不推荐使用）

在浮动的盒子下面再放一个标签，使用 clear:both;来清除浮动

a 内部标签：会将父盒子的高度从新撑开

b 外部标签：只能将浮动盒子的影响清除，可是不会撑开盒子

2.使用 overflow 清除浮动（不推荐使用）

先找到浮动盒子的父元素，给父元素添加一个属性：overflow:hidden;就会清除子元素对页面的影响

3.使用伪元素清除浮动(用的最多)

伪元素：在页面上不存在的元素，可是能够经过 css 添加上去

种类：

:after(在。。。以后)

:before(在。。。以前)

注意：每一个元素都有本身的伪元素

.clearfix:after {  content:"";  height:0;  line-height:0;  display:block;  clear:both;  visibility:hidden; /_将元素隐藏起来_/  在页面的 clearfix 元素后面添加了一个空的块级元素 （这个元素的高为 0 行高也为 0 而且这个元素清除了浮动）}.clearfix {  zoom:1;/_为了兼容 IE6_/}复制代码

（6）行内元素和块级元素的区别

块级元素(block)特性：

老是独占一行，表现为另起一行开始，并且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)均可控制;

内联元素(inline)特性：

1和相邻的内联元素在同一行;

2宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和 right 是能够设置的），就是里面文字或图片的大小。

那么问题来了，浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

（7）如何水平垂直居中一个元素

方法一：绝对定位居中（原始版之已知元素的高宽）

.content {  
    width: 200px;  
    height: 200px;  
    background-color: #6699ff; 
    position: absolute; /*父元素须要相对定位*/  
    top: 50%;  
    left: 50%;  
    margin-top: -100px; /*设为高度的1/2*/  
    margin-left: -100px; /*设为宽度的1/2*/
}复制代码

方法二：绝对定位居中（改进版之一未知元素的高宽）

.content {  
    width: 200px;  
    height: 200px;  
    background-color: #6699ff; 
    position: absolute; /*父元素须要相对定位*/  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/
}复制代码

方法三：绝对定位居中（改进版之二未知元素的高宽）

.content {  
    width: 200px;  
    height: 200px;  
    background-color: #6699ff; 
    margin: auto; /*很关键的一步*/  
    position: absolute; /*父元素须要相对定位*/  
    left: 0; 
    top: 0;  
    right: 0; 
    bottom: 0; /*让四个定位属性都为0*/
}复制代码

方法四：flex 布局居中

body {  
    display: flex; /*设置外层盒子display为flex*/  
    align-items: center; /*设置内层盒子的垂直居中*/  
    justify-content: center; /*设置内层盒子的水平居中*/  
    .content {    
        width: 200px;    
        height: 200px;    
        background-color: #6699ff; 
    }
}复制代码

那么问题来了，如何垂直居中一个 img（用更简便的方法。）

.content {  
    //img的容器设置以下  
    display: table-cell;  
    text-align: center;  
    vertical-align: middle;
}复制代码

（8）display:inline-block 为何会显示间隙

间隙产生的缘由是由于，换行或空格会占据必定的位置

推荐解决方法：

父元素中设置 font-size:0;letter-spaceing:-4px;

（9）你了解 CSS Flex 和 Grid 吗

Flex 主要用于一维布局，而 Grid 则用于二维布局。

解析：

Flex

flex 容器中存在两条轴， 横轴和纵轴， 容器中的每一个单元称为 flex item。

在容器上能够设置 6 个属性：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

注意：当设置 flex 布局以后，子元素的 float、clear、vertical-align 的属性将会失效。

Flex 项目属性

有六种属性可运用在 item 项目上:

order

flex-basis

flex-grow

flex-shrink

flex

align-self

Grid

CSS 网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。

像表格同样，网格布局让咱们可以按行或列来对齐元素。 可是，使用 CSS 网格可能仍是比 CSS 表格更容易布局。 例如，网格容器的子元素能够本身定位，以便它们像 CSS 定位的元素同样，真正的有重叠和层次。