04-如何让一个元素水平垂直居中？
title: 04-如何让一个元素水平垂直居中？publish: true
前言老板的手机收到一个红包，为什么红包没居中？
如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。
你也许能顺手写出好几种实现方法。但大部分人的写法不够规范，经不起千锤百炼。换句话说：这些人也就面试的时候夸夸其谈，但真的上战场的时候，他们不敢这么写，也不知道怎么写最靠谱。
这篇文章中，我们来列出几种常见的写法，最终你会明白，哪种写法是最优雅的。
当然，我还会拿出实际应用中的真实场景来举例，让你感受一下标准垂直居中的魅力。
如何让一个行内元素（文字、图片等）水平垂直居中
行内元素的居中问题比较简单。
行内元素水平居中给父容器设置：
text-align: center;
行内元素垂直居中让文字的行高 等于 盒子的高度，可以让单行文本垂直居中。比如：
.father { height: 20px; line-height: 20px;}
如何让一个块级元素水平垂直居中
这一段是本文的核心。如何让一个块级的子元素在父容器里水平垂直居中？有好 ...
05-CSS样式表的继承性和层叠性
title: 05-CSS样式表的继承性和层叠性publish: true
本文重点
CSS的继承性
CSS的层叠性
计算权重
权重问题大总结
CSS样式表的冲突的总结
权重问题深入
同一个标签，携带了多个类名
!important标记
CSS的继承性我们来看下面这样的代码，来引入继承性：
上方代码中，我们给div标签增加红色属性，却发现，div里的每一个子标签<p>也增加了红色属性。于是我们得到这样的结论：
有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
继承性是从自己开始，直到最小的元素。
但是呢，如果再给上方的代码加一条属性：
上图中，我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。于是我们可以得出结论：
关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
关于盒子、定位、布局的属性，都不能继承。
以后当我们谈到css有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪 ...
05-DOM操作练习：访问关系的封装
title: 05-DOM操作练习：访问关系的封装publish: true
访问关系的函数封装（1）函数封装
新建一个文件名叫tools.js，然后在里面封装访问关系。代码如下。
tools.js:
/** * Created by smyhvae on 2018/01/28. */function getEle(id){ return document.getElementById(id);}/** * 功能：给定元素查找他的第一个元素子节点，并返回 * @param ele * @returns {Element|*|Node} */function getFirstNode(ele){ var node = ele.firstElementChild || ele.firstChild; return node;}/** * 功能：给定元素查找他的最后一个元素子节点，并返回 * @param ele * @returns {Element|*|Node} */function ...
06-CSS盒模型详解
title: 06-CSS盒模型详解publish: true
盒子模型前言盒子模型，英文即box model。无论是div、span、还是a都是盒子。
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
盒子中的区域一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。
盒子模型的示意图：
代码演示：
上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
注意：宽度和真实占有宽度，不是一个概念！来看下面这例子。
标准盒模型和IE盒模型
我们目前所学习的知识中，以标准盒子模型为准。
标准盒子模型：
IE盒子模型：
上图显示：
在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：
widt ...
07-DOM操作练习：innerHTML的方式创建元素
title: 07-DOM操作练习：innerHTML的方式创建元素publish: true
动态创建DOM元素的三种方式
document.write(); 不常用，因为容易覆盖原来的页面。
innerHTML = (); 用的比较多。绑定属性和内容比较方便。(节点套节点)
document.createElement(); 用得也比较多，指定数量的时候一般用它。
1、方式一：
document.write();
这种方式的好处是：比较随意，想创建就创建，可以直接在write里写属性都行。但是会把原来的标签给覆盖掉。所以不建议。
举例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><ul> smyhvae</ul><script> / ...
07-浮动
title: 07-浮动publish: true
文本主要内容
标准文档流
标准文档流的特性
行内元素和块级元素
行内元素和块级元素的相互转换
浮动的性质
浮动的清除
浏览器的兼容性问题
浮动中margin相关
关于margin的IE6兼容问题
标准文档流宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。
标准文档流的特性（1）空白折叠现象：
无论多少个空格、换行、tab，都会折叠为一个空格。
比如，如果我们想让img标签之间没有空隙，必须紧密连接：
<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />
（2）高矮不齐，底边对齐：
举例如下：
（3）自动换行，一行写不满，换行写。
行内元素和块级元素学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等 ...
08-CSS属性：定位属性
title: 08-CSS属性：定位属性publish: true
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
position: absolute; <!-- 绝对定位 -->position: relative; <!-- 相对定位 -->position: fixed; <!-- 固定定位 -->
下面逐一介绍。
相对定位相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
我们之前学习的背景属性中，是通过如下格式：
background-position:向右偏移量 向下偏移量;
但这回的定位属性，是通过如下格式：
position: relative;left: 50px;top: 50px;
相对定位的举例：
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generat ...
09-CSS案例讲解：博雅互动
title: 09-CSS案例讲解：博雅互动publish: true
前言
CSS已经学了一些基础内容了，我们来讲解一个小案例吧。以博雅互动的官网首页举例。
版心首页的版心如下：
这里我们要普及一个概念，叫“版心”。版心是页面中主要内容所在的区域。
比如说，网站左上角的logo，设计图给出的左边距是143像素，此时，我们千万不要以为，logo的左边距真的是143像素。因为设计图只是一个版心；而整个页面是处于浏览器的中间，浏览器的宽度是可以随时调整的。
我们量一下中间四个方形图的width，是1000px，所以，网页版心的宽度是1000px。
网页的结构从结构上来看，网页分为头部（导航栏）、banner区、内容区、底部。
导航栏的制作在此我们只讲基础知识的使用，不涉及浏览器的优化。
class==header这个div是顶部的通栏，我们在里面放一个1000px宽的div，作为通栏的版心，我一般把这个版心称为class=inner_c，c指的是center。
class=inner_c不需要给高，因为它可以被内容撑高。
现在我们需要在class=inner_c里放三个东西：左侧的 ...
10-CSS3选择器详解
title: 10-CSS3选择器详解publish: true
CSS3介绍CSS3在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。
CSS3的现状
浏览器支持程度不够好，有些需要添加私有前缀
移动端支持优于PC端
不断改进中
应用相对广泛
应对的策略：渐进增强
（1）坚持渐进增强的原则：让低版本浏览器能正常访问页面，高版本的浏览器用户体验更好。【重要】
比如说，同样是一个头像，可能在低版本的浏览器中，头像方的；在高版本的浏览器中，头像是圆的。
（2）考虑用户群体。
（3）遵照产品的方案。
参考链接：
渐进增强 VS 优雅降级 | 简书
渐进增强和优雅降级之间的不同（面试题目）
浏览器的版本问题由于CSS3普遍存在兼容性问题，为了避免因兼容性带来的干扰，浏览器的建议版本为：
Chrome浏览器 version 46+
Firefox浏览器 firefox 42+
如何使用手册CSS参考手册的网址：http://css.doyoe.com/
CSS参考手册的下载链接：http://down ...
11-CSS3属性详解（一）
title: 11-CSS3属性详解（一）publish: true
前言我们在上一篇文章中学习了CSS3的选择器，本文来学一下CSS3的一些属性。
本文主要内容：
文本
盒模型中的 box-sizing 属性
处理兼容性问题：私有前缀
边框
背景属性
渐变
文本text-shadow：设置文本的阴影格式举例：
text-shadow: 20px 27px 22px pink;
参数解释：水平位移 垂直位移 模糊程度 阴影颜色。
效果举例：
举例：凹凸文字效果text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开。我们来看个例子。
代码如下：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { background-color: #66 ...
12-CSS3属性详解：动画详解
title: 12-CSS3属性详解：动画详解publish: true
前言本文主要内容：
过渡：transition
2D 转换 transform
3D 转换 transform
动画：animation
过渡：transitiontransition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
参考链接：补间动画基础
transition 包括以下属性：
transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
transition-duration: 1s; 过渡的持续时间。
transition-timing-function: linear; 运动曲线。属性值可以是：
linear 线性
ease 减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速 ...
13-CSS3属性：Flex布局图文详解
title: 13-CSS3属性：Flex布局图文详解publish: true
前言CSS3中的 flex 属性，在布局方面做了非常大的改进，使得我们对多个元素之间的布局排列变得十分灵活，适应性非常强。其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。
flex 初体验我们先来看看下面这个最简单的布局：
上面这张图中的布局是我们都熟悉的：默认文档流中，在一个父容器里放置多个块级的子元素，那么，这些子元素会默认从上往下排列。
在此基础之上，如果我给父容器仅仅加一个 display: flex属性，此时，这些子元素的布局会摇身一变：
没错，子元素们会在水平方向上，从左至右排列，就是这么神奇。到此为止，你已经掌握了关于 flex 的一半的知识。
flex 布局的优势1、flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”。
但你如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的。
2、flex 是一种现代的布 ...
14-CSS3属性详解：Web字体
title: 14-CSS3属性详解：Web字体publish: true
前言开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站点中），无需考虑用户电脑上是否安装了此特殊字体。从此，把特殊字体处理成图片的方式便成为了过去。
支持程度比较好，甚至 IE 低版本的浏览器也能支持。
字体的常见格式
不同浏览器所支持的字体格式是不一样的，我们有必要了解一下字体格式的知识。
TureTpe格式：(.ttf).ttf 字体是Windows和Mac的最常见的字体，是一种RAW格式。
支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+。
OpenType格式：(.otf).otf 字体被认为是一种原始的字体格式，其内置在TureType的基础上。
支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+。
Web Open Font Format格式：(.woff)woff字体是Web ...
15-Sass入门
title: 15-Sass入门publish: true
Sass简介大家都知道，js 中可以自定义变量，css 仅仅是一个标记语言，不是编程语言，因此不可以自定义变量、不可以引用等等。
面对这些问题，我们现在来引入 Sass，简单的说，他是 css 的升级版，可以自定义变量，可以有 if 语句，还可以嵌套等等，很神奇吧！那下面我们就来介绍返个神奇的 Sass。
Sass比Less的功能更强大，也更复杂。
Sass 的定义Sass：英文是 Syntactically Awesome Stylesheets Sass。最早由 Hampton Catlin 开发和设计。 一种帮助你简化 CSS 工作流程的方式，帮助你更容易维护和开发 CSS 内容。
官网是：https://sass-lang.com/
Sass 是这个世界上最成熟、稳定和强大的专业级 CSS 扩展语言。
Sass专注的是怎样创建优雅的样式表，而不是内容。
Sass、Compass与CSS关系：
Less/Sass是语法、Compass是框架、CSS是目标。
Sass&Compass的好处：
写出更优秀的 ...
16-浏览器的兼容性问题
title: 16-浏览器的兼容性问题publish: false
我们在div里放一个img，发现：
在html和html5中，div的长宽是不同的，后者的高度要超过几个像素。
比如说，下面这个是html的。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } </style></head><body> <div> <img src="/Users/smyhvae/Dropbox/img/20170813_1143.jpg" alt=""> </div></body ...
