CSS知识点及技巧整理

这些个知识点是我我的认为的，下面咱们就来看看这些个知识点。

1.怎么让一个不定宽高的 DIV，垂直水平居中?

使用Flex

• 只须要在父盒子设置：display: flex; justify-content: center;align-items: center;

使用 CSS3 transform

• 父盒子设置:display:relative
• Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

使用 display:table-cell 方法

• 父盒子设置:display:table-cell; text-align:center;vertical-align:middle;
• Div 设置: display:inline-block;vertical-align:middle;

2.position 几个属性的做用

2.1 relative，absolute，fixed，static

position 的常见四个属性值: relative，absolute，fixed，static。通常都要配合"left"、"top"、"right" 以及 "bottom" 属性使用。

• static:默认位置。 在通常状况下，咱们不须要特别的去声明它，但有时候遇到继承的状况，咱们不肯意见到元素所继承的属性影响自己，从而能够用Position:static取消继承，即还原元素定位的默认值。设置为 static 的元素，它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。通常不经常使用。
• relative:相对定位。 相对定位是相对于元素默认的位置的定位，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而无论其余元素会怎么 样。注意 relative 移动后的元素在原来的位置仍占据空间。
• absolute:绝对定位。 设置为 absolute 的元素，若是它的 父容器设置了 position 属性，而且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。若是其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。
• fixed:固定定位。 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。

2.2 sticky

position新增的属性“sticky”： 设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

sticky属性有如下几个特色：

• 该元素并不脱离文档流，仍然保留元素本来在文档流中的位置。
• 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即若是你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，再也不向上移动。

比较蛋疼的是这个属性的兼容性还不是很好，目前还是一个试验性的属性，并非W3C推荐的标准。它之因此会出现，也是由于监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要经过硬件加速来提高滚动的体验是相悖的。

详见：blog.csdn.net/sinat_37390…

3.浮动与清除浮动

3.1 浮动相关知识

float属性的取值：

• left：元素向左浮动。
• right：元素向右浮动。
• none：默认值。元素不浮动，并会显示在其在文本中出现的位置。

浮动的特性：

• 浮动元素会从普通文档流中脱离，但浮动元素影响的不只是本身，它会影响周围的元素对齐进行环绕。
• 无论一个元素是行内元素仍是块级元素，若是被设置了浮动，那浮动元素会生成一个块级框，能够设置它的width和height，所以float经常用于制做横向配列的菜单，能够设置大小而且横向排列。

浮动元素的展现在不一样状况下会有不一样的规则：

• 浮动元素在浮动的时候，其margin不会超过包含块的padding。PS：若是想要元素超出，能够设置margin属性
• 若是两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
• 若是有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。
• 若是有多个浮动元素，后面的元素高度不会超过前面的元素，而且不会超过包含块。
• 若是有非浮动元素和浮动元素同时存在，而且非浮动元素在前，则浮动元素不会高于非浮动元素
• 浮动元素会尽量地向顶端对齐、向左或向右对齐

重叠问题

• 行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上
• 块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上

clear属性 clear属性：确保当前元素的左右两侧不会有浮动元素。clear只对元素自己的布局起做用。 取值：left、right、both

3.2 父元素高度塌陷问题

为何要清除浮动，父元素高度塌陷 解决父元素高度塌陷问题：一个块级元素若是没有设置height，其height是由子元素撑开的。对子元素使用了浮动以后，子元素会脱离标准文档流，也就是说，父级元素中没有内容能够撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。

3.3 清除浮动的方法

方法1：给父级div定义 高度 原理：给父级DIV定义固定高度（height），能解决父级DIV 没法获取高度得问题。 优势：代码简洁 缺点：高度被固定死了，是适合内容固定不变的模块。（不推荐使用）

方法二：使用空元素，如<div class="clear"></div> (.clear{clear:both}) 原理：添加一对空的DIV标签，利用css的clear:both属性清除浮动，让父级DIV可以获取高度。 优势：浏览器支持好 缺点：多出了不少空的DIV标签，若是页面中浮动模块多的话，就会出现不少的空置DIV了，这样感受视乎不是太使人满意。（不推荐使用）

方法三：让父级div 也一并浮起来 这样作能够初步解决当前的浮动问题。可是也让父级浮动起来了，又会产生新的浮动问题。 不推荐使用

方法四：父级div定义 display:table 原理：将div属性强制变成表格 优势：不解 缺点：会产生新的未知问题。（不推荐使用）

方法五：父元素设置 overflow：hidden、auto； 原理：这个方法的关键在于触发了BFC。在IE6中还须要触发 hasLayout（zoom：1） 优势：代码简介，不存在结构和语义化问题 缺点：没法显示须要溢出的元素（亦不太推荐使用）

方法六：父级div定义 伪类:after 和 zoom

.clearfix:after{
    content:'.';
    display:block;
    height:0;
    clear:both;
    visibility: hidden;
}
.clearfix {zoom:1;}
复制代码

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点相似，zoom(IE转有属性)可解决ie6,ie7浮动问题 优势：结构和语义化彻底正确,代码量也适中，可重复利用率（建议定义公共类） 缺点：代码不是很是简洁（极力推荐使用）

经益求精写法

.clearfix:after {
    content:”\200B”; 
    display:block; 
    height:0; 
    clear:both;
 }
.clearfix { *zoom:1; } 照顾IE6，IE7就能够了
复制代码

详细关于浮动的知识请参看这篇文章： http://luopq.com/2015/11/08/CSS-float/

4.BFC相关知识

定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参 与， 它规定了内部的 Block-level Box 如何布局，而且与这个区域外部绝不相干。

BFC布局规则 BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

• BFC这个元素的垂直方向的边距会发生重叠，垂直方向的距离由margin决定，取最大值
• BFC 的区域不会与浮动盒子重叠（清除浮动原理）。
• 计算 BFC 的高度时，浮动元素也参与计算。

哪些元素会生成 BFC

• 根元素
• float 属性不为 none
• position 为 absolute 或 fixed
• display 为 inline-block， table-cell， table-caption， flex， inline-flex
• overflow 不为 visible

5.box-sizing是什么

设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，二IE模型包括border和padding box-sizing属性能够为三个值之一：

• content-box，默认值，只计算内容的宽度，border和padding不计算入width以内
• padding-box，padding计算入宽度内
• border-box，border和padding计算入宽度以内

6.px，em，rem 的区别

px 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算 机系统的数字化图像长度单位，若是 px 要换算成物理长度，须要指定精度 DPI。

em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置， 则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，所以并非一个固定的值。

rem 是 CSS3 新增的一个相对单位(root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小， 但相对的只是 HTML 根元素。

7.CSS 引入的方式有哪些? link 和@import 的区别是?

有四种：内联(元素上的style属性)、内嵌(style标签)、外链(link)、导入(@import) link和@import的区别：

• link是XHTML标签，除了加载CSS外，还能够定义RSS等其余事务；@import属于CSS范畴，只能加载CSS。
• link引用CSS时，在页面载入时同时加载；@import须要页面网页彻底载入之后加载。
• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• link支持使用Javascript控制DOM去改变样式；而@import不支持。

8.流式布局与响应式布局的区别

流式布局 使用非固定像素来定义网页内容，也就是百分比布局，经过盒子的宽度设置成百分比来根据屏幕的宽度来进 行伸缩，不受固定像素的限制，内容向两侧填充。

响应式开发 利用CSS3 中的 Media Query(媒介查询)，经过查询 screen 的宽度来指定某个宽度区间的网页布局。

• 超小屏幕(移动设备) 768px 如下
• 小屏设备 768px-992px
• 中等屏幕 992px-1200px
• 宽屏设备 1200px 以上

因为响应式开发显得繁琐些，通常使用第三方响应式框架来完成，好比 bootstrap 来完成一部分工做，固然也 能够本身写响应式。

区别

-	流式布局	响应式开发
开发方式	移动Web开发+PC开发	响应式开发
应用场景	通常在已经有PC端网站，开发移动的的时候只须要单独开发移动端	针对一些新建的网站，如今要求适配移动端，因此就一套页面兼容各类终端
开发	正对性强，开发效率高	兼容各类终端，效率低
适配	只适配移动设备，pad上体验相对较差	能够适配各类终端
效率	代码简洁，加载快	代码相对复杂，加载慢

9.渐进加强和优雅降级

关键的区别是他们所侧重的内容，以及这种不一样形成的工做流程的差别

• 优雅降级一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。。
• 渐进加强针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

区别：

• 优雅降级是从复杂的现状开始，并试图减小用户体验的供给
• 渐进加强则是从一个很是基础的，可以起做用的版本开始，并不断扩充，以适应将来环境的须要
• 降级（功能衰减）意味着往回看；而渐进加强则意味着朝前看，同时保证其根基处于安全地带

10.CSS隐藏元素的几种方式及区别

display:none

• 元素在页面上将完全消失，元素原本占有的空间就会被其余元素占有，也就是说它会致使浏览器的重排和重绘。
• 不会触发其点击事件

visibility:hidden

• 和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，因此它只会致使浏览器重绘而不会重排。
• 没法触发其点击事件
• 适用于那些元素隐藏后不但愿页面布局会发生变化的场景

opacity:0

• 将元素的透明度设置为0后，在咱们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。
• 和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但咱们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
• 能够触发点击事件

设置height，width等盒模型属性为0

• 简单说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，若是元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素，这算是一种奇技淫巧。
• 若是元素设置了border，padding等属性不为0，很显然，页面上仍是能看到这个元素的，触发元素的点击事件彻底没有问题。若是所有属性都设置为0，很显然，这个元素至关于消失了，即没法触发点击事件。
• 这种方式既不实用，也可能存在着着一些问题。但平时咱们用到的一些页面效果可能就是采用这种方式来完成的，好比jquery的slideUp动画，它就是设置元素的overflow:hidden后，接着经过定时器，不断地设置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom为0，从而达到slideUp的效果。

其余脑洞方法

• 设置元素的position与left，top，bottom，right等，将元素移出至屏幕外
• 设置元素的position与z-index，将z-index设置成尽可能小的负数

11.消除图片底部间隙的方法

• 图片块状化 - 无基线对齐：img { display: block; }
• 图片底线对齐：img { vertical-align: bottom; }
• 行高足够小 - 基线位置上移：.box { line-height: 0; }

12."nth-child"和"nth-of-type"的区别

“nth-child”选择的是父元素的子元素，这个子元素并无指定确切类型，同时知足两个条件时方能有效果：其一是子元素，其二是子元素恰好处在那个位置；“nth-of-type”选择的是某父元素的子元素，并且这个子元素是指定类型。参考

13.CSS中的颜色体系有哪些？

参考

14. CSS流体布局下的宽度分离原则

所谓“宽度分离”原则，就是CSS中的width属性不与影响宽度的 pading/border（有时候包括margin）属性共存，width 独立占用一层标签，而padding、border、margin 利用流动性在内部自适应呈现。

举例：元素边框内有20px的留白问题

.father { width:102px; }
.son {
    border:1px solid;
    padding:20px;
}
复制代码

15. !important问题

超越!important：max-width会覆盖width，并且这种覆盖是超级覆盖，比!important的权重还要高

超越最大：min-width覆盖max-width，此规则发生在min-width和max-width冲突的时候，以下：

.container{
    min-width:1400px;
    max-width:1200px;
}
复制代码

16. 任意高度元素的展开收起动画

使用 height + overflow:hidden 实现会比较生硬。好的方式是使用max-height。

.element{
    max-height:0;
    overflow:hidden;
    transition: height .25s;
}
.element.active {
    max-height: 666px; /* 一个足够大的最大高度值 */
}
复制代码

17. 基于伪元素的图片内容生成技术

需求：图片还没加载时就把 alt 信息呈现出来。

实现：图片没有 src ，所以，::before和::after 能够生效，咱们能够经过 content 属性呈现 alt 属性值。

img::after{
    /* 生成 alt 信息 */
    content: attr(alt);
    /* 尺寸和定位 */
    postion:absolute; bottom: 0;
    width:100%;
    background-color:rgba(0,0,0,.5);
    transform: translateY(100%);
    transition: transform .2s;
}
img:hover::after{
    transform: translateY(0);
}    

复制代码

当咱们给图片添加src 属性时图片从普通元素变成替换元素，本来还支持的::before和::after 此时所有无效，此时再hover图片，是不会有任何信息出现的。

18. 轻松实现hover图片变成另一张图片

img:hover{
    content: url(laugh-tear.png);
}
复制代码

content 改变的仅仅是视觉呈现，当咱们鼠标右键或其余形式保存这张图片时，所保存的仍是原来 src 对应的图片。这种方法还能够用在官网标志上。

因为使用 conetnt 生成图片没法设置图片的尺寸，要想在移动端使用该技术，建议使用SVG图片。

19. content属性的特色

咱们使用 content生成的文本是没法选中、没法复制的，好像设置了user-select:none声明通常，而普通元素的文本能够被轻松选中。content生成的文本没法被屏幕阅读设备读取，也没法被搜索引擎抓取，所以，千万不要自觉得是地把重要的文本信息使用 content属性生成， 由于这对可访问性和SEO都不友好，content属性只能用来生成一些可有可无的内容，如装饰性图形或者序号之类；一样，也不要担忧本来重要的文字信息会被 content替换，替换的仅仅是视觉层。

content 动态生成值没法获取。content是一个很是强大的CSS属性，其中一个强大之处就是计数器效果，能够自动累加数值。如：

.total::after{
    content: counter(icecream);
}
复制代码

示例：jsrun.net/6VyKp

20. content换行符与打点loading效果

正在加载中<dot>...</dot>
复制代码

dot {
    display: inline-block; 
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}

dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}
复制代码

在线demo

21. margin:auto的应用

margin:auto的填充规则：

1. 若是一侧定值，一侧auto，则 auto 为剩余空间大小
2. 若是两侧均是 auto，则平分剩余空间

块级元素垂直方向居中：

1. 使用 writing-mode 改变文档流方向

   复制代码

.father{ height200px; writing-mode:vertical-lr; } .son{ height:100px; margin:auto; } ```

2. 绝对定位下的margin:auto居中

   复制代码

.father{ width:300px; height150px; position: relative; } .son{ position:absolute; top:0; right:0; bottom:0; left:0; width:200px; height:100px; margin:auto; } ```

在线效果：demo.cssworld.cn/4/3-5.php

22. border-width支持的关键字

• thin：薄薄的，等同于1px
• medium：（默认值）薄厚均匀，等同于3px
• thick：厚厚的，等同于4px

23.border-color和color

border-color 默认颜色就是color色值，就是当没有指定border-color颜色值的时候，会使用当前元素的color计算值做为边框色，如：

.box{
    border: 10px solid;
    color: red;
}
复制代码

此时，.box 元素的 10px 边框颜色就是红色。

(持续更新)

欢迎在留言区补充或提出不一样的看法

---

延伸阅读

• 你必须知道的HTTP基本概念
• JavaScript ES5+ES6继承总结
• JavaScript面向对象核心知识概括