inline-block、inline和block 1. block（块级元素） block 元素会独占一行，多个 block 元素会各自新起一行。默认情况下，block 元素宽度自动填满其父元素宽度。 block 元素可以设置 width，height 属性。块级元素即使设置了宽度，仍然是独占一行。 block 元素可以设置 margin 和 padding 属性。 块元素的居中方法：设置 margin:auto；  常见的块级元素有：div，form，table，p，h1-h6，ol，ul 等。  2. inline（内联元素） inline 元素不会独占一行，多个相邻的行内元素会排列在同...

设置一个元素的背景颜色，背景元素会填充哪些区域 background-color 设置的背景颜色会填充元素的 content、padding、border 区域。除了margin。

line-height和height的区别 line-height 一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的 height 一般是指容器的整体高度。

z-index的定位方法 z-index 属性设置元素的堆叠顺序，拥有更好堆叠顺序的元素会处于较低顺序元素之前，z-index 可以为负，且 z-index 只能在定位元素上奏效，该属性设置一个定位元素沿 z 轴的位置，如果为正数，离用户越近，为负数，离用户越远，它的属性值有auto，默认，堆叠顺序与父元素相等，number，inherit，从父元素继承 z-index 属性的值。

display：table和本身table display:table 和本身 table 是相对应的，区别在于，display：table 的 css 声明能够让一个html 元素和它的子节点像 table 元素一样，使用基于表格的 css 布局，使我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了 table 那样的制表标签导致的语义化问题。 之所以现在逐渐淘汰了 table 系表格元素，是因为用 div+css 编写出来的文件比用 table 编写出来的文件小，而且 table 必须在页面完全加载后才显示，div 则是逐行显示，table 的嵌套性太多，没有div 简洁。

CSS3 的 calc属性  参考：https://www.jianshu.com/p/b9bc930dd316  1. 简介 calc 是英文单词 calculate(计算) 的缩写，是 css3 的一个新增的功能，可以使用 calc() 给元素的 border、margin、pading、font-size 和 width 等属性设置动态值。 calc() 能给元素的某些属性做计算，可以给一个 div 元素，使用百分比、em、px 和 rem 单位值计算出其宽度或者高度，比如说：width:calc(50% + 2em) 2. 语法 .elm { width: calc(expressio...

CSS 三栏布局  参考：https://blog.csdn.net/ganyingxie123456/article/details/77054124  三列布局又分为两种，两列定宽一列自适应，以及两侧定宽中间自适应 两列定宽一列自适应： 1. float + margin HTML结构： <div class="container"> <div class="left">Left</div> <div class="right">Right</div> <div class="main">Main</div&gt...

隐藏页面元素 1. opacity: 0 该元素隐藏起来了，但不会改变页面布局。并且，如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件的。 2. visibility: hidden 该元素隐藏起来了，但不会改变页面布局，不会触发该元素已经绑定的事件。 3. display: none 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。 4. position 移到外部 5. z-index 涂层遮盖

选择器 id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等。 1. id选择器 id表示身份，在页面中元素的id不允许重复，因此id选择器只能选择单个元素。 权重值：100 #id{ }  2. class选择器 选择拥有该类别的多个元素。 权重值：10 .class{ }  3. 标签选择器 根据标签名称，选择对应的所有标签。 权重值：1 4. 通用选择器 针对页面上的所有标签都生效    权重值：0 5. 组合选择器 6. 属性选择器 M[attr] {} =：完全匹配 *=：部分匹配 ^=： $=： M[class][id]： 7. 伪类选择器 M:伪类{ } M:...

浮动清除 1. 使用带 clear 属性的空元素 在浮动元素后使用一个空元素如 <div class="clear"></div> ，并在CSS 中赋予 .clear{clear:both;} 属性即可清理浮动。亦可使用 <br class="clear" /> 或 <hr class="clear" /> 来进行清理。  小结： 空元素：<div class="clear"></div> CSS：.clear{clear: both}  2....

CSS position属性  参考：https://zhuanlan.zhihu.com/p/34486016  position 属性规定元素的定位类型 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 1. 固定定位 fixed fixed 元素脱离正常的文档流，所以它与 absolute 元素很相似，同样会被周围元素忽略，支持 top, bottom, left, right 属性，但 fixed 元素正如它的名字一样，它是固定在屏幕的某个位置，它不会随着浏览器滚...

双边距重叠问题(外边距折叠)  多个相邻（兄弟或者父子关系）普通流的块元素垂直方向 marigin 会重叠  折叠的结果为：  两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外边距一正一负时，折叠结果是两者的相加的和。

CSS3 动画和 js 动画  参考：https://zhuanlan.zhihu.com/p/25225016  1. CSS3 动画 1.1 优点 （1）在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化（比如专门新建一个图层用来跑动画） （2）代码相对简单 1.2 缺点 （1）在动画控制上不够灵活 （2）兼容性不好 （3）部分动画功能无法实现（如滚动动画，视差滚动等） 2. js 动画 JavaScript 的动画正好弥补了这几个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。但 CSS 动画的 transform 矩阵是C++级的计算，必...

水平垂直居中的方法 1. margin: auto法 定位为上下左右为 0，margin：0 可以实现脱离文档流的居中。 div{ width: 400px; height: 400px; position: relative; border: 1px solid #465468; } img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }  <div> <img src="./images/1.jpg" /> </div>   定位为上下左右为0，marg...