切图与CSS入门

不会CSS的后端不是好的程序猿

JS 对于后端小伙伴来说不算难点，能够顺手的使用，涉及到 CSS 就会有点懵逼了。为了让后端同事更愉快的玩转 CSS，做一个好的切图仔，下面我将讲一些如何提升自己的 CSS 技巧，帮助后端同事快速还原 PSD。

前端页面的书写顺序

  1. 先看设计稿
  2. 编写 HTML 代码
  3. 编写 CSS 代码
  4. 编写 JS 代码

今天我们主要关注编写 CSS 代码，在写 CSS 代码时，我们需要从PSD中拿到各种数据，如何精准的拿到这些数据，保证页面能够像素级还原呢？

PSD切图

打开PSD，我们看到一个PSD里面有很多的智能参考线，设计师在设计的过程中，根据某些模块给出适当的智能参考线，帮助前端同事更好的去切图。
如果我们发现要切的图没有参考线，那我们可以手动加，智能参考线有助于我们更精准的丈量元素的尺寸，比如宽高、内边距、外边距、行高等。

Photoshop快捷键

Photoshop常用快捷键 http://www.ip138.com/photoshop/、https://helpx.adobe.com/cn/photoshop/using/default-keyboard-shortcuts.html

操作 window Mac
自由变换 Ctrl + T Cmd + T
选择工具： V V
矩形/椭圆工具 M M
剪裁/切片工具 C C
放大和缩小 Ctrl++、Ctrl+- Cmd++、Cmd+-

两种切图方法

第一种：使用切片工具
1.使用切片工具划分好你要切的模块
2.点击’存储为web所有格式’，在存储之前可以修改图片的品质来改变文件的大小。
3.在存储时切片有三种选择方式，按照自己的需要选择。

第二种：使用矩形选择工具
1.使用矩形选择工具选中要切的模块
2.ctrl+shift+c合并拷贝图层
3.ctrl+n新建文档
4.ctrl+v粘贴图层，保存。

选中图层

切换到移动工具
alt+鼠标右键
或
ctrl+鼠标左键
注：选择有组与图层两个选项，根据自己的需要选择，一般我们选中图层。

自由变化选区

选中图层，ctrl+t自由变化选区。
设置栏包括x/y,w/h，度等选项。

放大缩小

alt+滑轮

查看图层或模块的宽高

方式一：点击图层的缩略图+ctrl,可在信息项里面看到图层的宽高。
方式二：ctrl+T自由变化图层大小，也可以在信息项里看到图层的宽高。
方式三：使用矩形选择工具量。

修改字体、颜色等。

设计师做完了psd图后，有时我们需要自己改动一些细节。
选中图层后，点击图层的缩略图，可以直接修改颜色。
或直接调为前景色或后景色。ctrl+delete(后景色)，alt+delete(后景色)

隐藏与显示图层或组。

隐藏：alt+点击眼睛图标，即只显示或隐藏当前图层、组。

上面简单的所有了切图，还有一些更高级的，比如图片雪碧，圆角，阴影和蒙版等。在切图的时候，我们已经想到了怎么写好HTML代码，这时写好HTML代码。

编写CSS代码。

1. CSS样式重置

首先引入一个CSS重置样式，这样子可以帮助我们统一各个元素在不同浏览器之间的差异。

PC重置代码：http://js.3conline.com/pconline/common/css/zt_base.2.0.css

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0; padding:0;}
html{-webkit-text-size-adjust:none;}
body{background:#4f90d2; font:12px/2em Microsoft Yahei,tahoma,HELVETICA; text-align:center;}
ol,ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img{border:none; vertical-align:top}
i,em{font-style:normal;}
input,select,option,textarea{font-size:12px;}
a{text-decoration:none;} a:hover{text-decoration:underline;}

/* function */
noscript,.spanclass,.pannel,.hidden{display:none;}
.show,.block{display:block;}
.mark,.fl,.mark-sub,.fr{display:inline;}
.mark,.fl{float:left;} .mark-sub,.fr{float:right;}
.fs-14{font-size:14px;} .fs-16{font-size:16px;}
.clear{clear:both; height:0; line-height:0; font-size:0; overflow:hidden;}
.clearfix{*zoom:1} .clearfix:after{content:"\20"; clear:both; height:0; display:block; overflow:hidden;}

移动重置代码：http://js.3conline.com/common/css/wapzt_base_rem.1.0.css


@charset "utf-8";
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
body{line-height:1.5;}
body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;}
b,strong{font-weight:bold;}
i,em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
table th,table td{border:1px solid #ddd;padding:5px;}
table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
img{border:0 none;width:auto\9;max-width:100%;vertical-align:top;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
@media screen and (-webkit-min-device-pixel-ratio:0){input{line-height:normal!important;}}
select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video,progress{display:inline-block;}

2. 样式的级联

浏览器如何确定应将哪些样式应用于某个元素有一套严格的规则。 这些基本特征称为级联，继承和特异性。

级联是CSS的基本特征。 它是一种定义如何组合源自不同源的属性值的算法。 正如其名称所强调的那样，它位于CSS的核心：层叠样式表

浏览器使用以下顺序查找属性值。

  1. 内联样式 – 使用元素上的style全局属性定义的样式
  2. 嵌入式样式 – 在样式元素中定义的样式
  3. 外部样式 – 使用链接元素导入的样式
  4. 用户样式 – 由浏览器的用户提供
  5. 浏览器样式 – 浏览器应用的默认样式

例如，为一个元素选择文本的颜色。

浏览器将需要为CSS颜色属性找到一个值。

首先，它将检查它试图渲染的元素是否具有定义颜色值的内联样式，如下所示：

<a style="color:red" href="http://www.w3cschool.cn">Visit the website</a>

如果没有内联样式，浏览器将查找包含适用于元素的样式的样式元素，如下所示：

<style type="text/css">
a  {
   color: red;
}
</style>

如果没有这样的样式元素，浏览器会查看通过链接元素加载的样式表。
如果仍然找不到颜色属性，则使用默认的浏览器样式。

属性的前三个来源（内联样式，嵌入样式和样式表）统称为作者样式。
用户样式表中定义的样式称为用户样式，浏览器定义的样式称为浏览器样式。

重要样式

您可以通过将属性值标记为重要来覆盖正常的级联顺序。
通过对声明附加！important ，可以将单个值标记为重要。

3. 继承和非继承属性

继承概念不同于级联，它基本上是在DOM中CSS属性如何从父级传递给子级的过程。
并非所有属性都会自动继承。 以下是CSS属性的完整参考以及它们是否被继承 。
最常用属性的一些示例：

继承的属性

  • 颜色 (color)
  • 字体系列 (font-family)
  • 字体大小 (font-size)
  • 字体样式 (font-style)
  • 字体重量 (font-weight)
  • 文本对齐 (text-align)

非继承属性

  • 背景 (background)
  • 边界 (border)
  • 余量 (margin)
  • 填充 (padding)
  • 显示 (display)
  • 浮动 (float)
  • 宽度 (width)
  • 高度 (height)

4. 特异性和顺序评估

在CSS中，可以通过其类，ID或属性以各种方式选择元素。 因此，当某个元素具有由样式表中放置的几个不同选择器应用的不同规则时，浏览器如何确定要应用哪些选择器的样式？

CSS选择器

一.基本CSS选择器

有标记选择器、类别选择器、ID选择器3种：

1.标记选择器
每一种HTML标记的名称都可以作为相应的标记选择器的名称，如h1,p,div等等

2.类别选择器
类别选择器的名称可以由用户自定义
格式如下：.class{color:green;font-size:20px;}

3.ID选择器
与类别选择器相试
格式如下：#id{color:green;font-size:20px;}

二.复合选择器

就是两个或者多个基本选择器，通过不同方式连接而成的选择器

1.“交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集，其中第一必须是标记选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写
如：h3.class{color:red;font-size:23px;} div#special{…} 注意两者间没有空隔

2.“并集”选择器：同时选中各个基本选择器所选择的范围，任何形式的选择器都可以，并集选择器是多个选择器通过逗号连接而成的，
格式如:h1,h2,h3{color:red;font-size:23px;} 注意中间是有逗号分隔

三.后代选择器
如：p span{color: red;} span{color: blue;}

四.子选择器
也就是只有对直接后代有影响的选择器，而对“孙子”以及对个层的后代不产生作用。
p>span{color:blue;}

如果有两个样式应用于在同一级别定义的元素，并且它们都包含浏览器正在寻找的CSS属性的值。
要决定使用哪个值，浏览器会评估每个样式的特异性，并选择最具体的值。
浏览器通过计算四个不同的特征来确定样式的特异性：

  1. 内联样式
<ul style="list-style-type:none"></ul>
  1. 样式选择器中的id值的数量
#users-chart { }
#main-nav { }
  1. 选择器中的类、伪类和属性的数量
.container { }
.list-item:first-child { }
[href^='https://'] { }
  1. 选择器中元素名称和伪元素的数量
div { }
p::after { }

根据以上规则，对于组合选择器，使用四元素组计算特异性:

对于内嵌样式，将第一个项目增加1
1 0 0 0

对于每个ID，将第二个项目增加1
0 1 0 0

对于每个类，伪类或属性将第三个项目增加1
0 0 1 0

对于每个元素或伪元素，将第4项增加1
0 0 0 1

加上有一个important 就更加棘手了，那么如何处理这些特异性呢？

  1. 尽量保持选择器的特异性尽可能低，因为它们更易于理解和维护。
  2. 通常，建议在样式表中组织选择器，使其具有更高的特异性。
  3. 避免使用ID选择器，因为它们难以覆盖。
  4. 尝试使用命名约定，如 BEM,BEMIT 或 SUIT 。

5.认识CSS单位

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

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

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

CSS常用属性


一 CSS文字属性：

color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/  
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/

二、CSS边框空白

padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白

三：CSS边界样式

margin-top:10px; /_上边界_/
margin-right:10px; /_右边界值_/
margin-bottom:10px; /_下边界值_/
margin-left:10px; /_左边界值_/

四、CSS背景样式

background-color:#F5E2EC; /*背景颜色*/  
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/

background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*

布局

这部分可能是后端同事比较头庝的问题：

  • 想让某个元素居中，网上找了半天也没有一个好的方法？
  • 加个了float：left怎么整个页面都乱套了？
  • 怎么让这个元素换行，怎么让那个元素不换行？
  • 怎么把这几个div横向排列不换行？
  • 看别人的代码满屏都是div，眼花缭乱？
  • 书了看了，网上的教程也跟着学了，为什么等到自己要真正开始写的时候却写不出来，那么多标签、那么多css样式，要用哪个？

针对这些问题，我个人的总结如下：

前端知识基本靠实践和经验，而这恰恰是经典书籍所欠缺的，书本上都是介绍基本概念，每一个标签、每一个样式的使用，而实际页面需要多方面结合；

前端知识太灵活多变，框架一年甚至几个月大变血一次

总之，就是后台开发写前端很难，思维模式差别很大。虽然大多数人认为写后台的才是真的的抵达技术巅峰，每天接触的是服务器、数据库、高并发、海量、TCP、黑客。但是却被前端的标签、样式弄得死去活来。

接下来我们就来理解几个和布局相关的概念

  • 理解盒子模型。width、height、margin、padding、bodder
  • position属性定位
  • float属性
  • display属性
  • 行内元素和块级元素

盒子模型

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：

不同部分的说明：
Margin(外边距) – 清除边框外的区域，外边距是透明的。
Border(边框) – 围绕在内边距和内容外的边框。
Padding(内边距) – 清除内容周围的区域，内边距是透明的。
Content(内容) – 盒子的内容，显示文本和图像。

下面的例子中的元素的总宽度为300px：

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

让我们自己算算：
300px (宽)

  • 50px (左 + 右填充)
  • 50px (左 + 右边框)
  • 50px (左 + 右边距)

= 450px

试想一下，你只有250像素的空间。让我们设置总宽度为250像素的元素:

div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

box-sizing

CSS3中新增了一种盒模型计算方式：box-sizing熟悉。盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：

content-box（默认）

布局所占宽度Width：

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

布局所占宽度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

布局所占宽度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

margin叠加

外边距叠加是一个相当简单的概念。 但是，在实践中对网页进行布局时， 它会造成许多混淆。 简单的说， 当两个或更多个垂直边距相遇时， 它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。但是注意只有普通文档流中块框的垂直外边距才会发生外边距叠加。 行内框、 浮动框或绝对定位框之间的外边距不会叠加。

一般来说， 垂直外边距叠加有三种情况：

元素自身叠加 当元素没有内容（即空元素）、内边距、边框时， 它的上下边距就相遇了， 即会产生叠加（垂直方向）。 当为元素添加内容、 内边距、 边框任何一项， 就会取消叠加。
相邻元素叠加 相邻的两个元素， 如果它们的上下边距相遇，即会产生叠加。
包含（父子）元素叠加 包含元素的外边距隔着 父元素的内边距和边框， 当这两项都不存在的时候， 父子元素垂直外边距相邻， 产生叠加。 添加任何一项即会取消叠加。

行内元素和块级元素

相信大家都接触过这两个概念了，那我问一个问题，为什么要搞清楚这两个概念，很简单明确知道哪些标签是行内元素、哪些标签是块级元素对布局有直接影响。主要区别是：

行内元素只是行内的元素，不换行
块级元素是一个元素沾满一行，如果两个块级元素写在一起（比如两个div），默认是分两行展示，除非设置float或者display（后面会讲到），此外块级元素还可以设置边距（盒子模型属性）。
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

因此，判断一个位置到底是用行内元素还是块级元素很明显的一个判断方法就是是否需要换行或者是否需要设置长宽和上下边框/距。 首先选用行内元素，比如在一行中有一个文字需要变颜色/加粗，那么直接用行内元素span即可。

块级元素列表

<address> 定义地址
<caption> 定义表格标题
<dd> 定义列表中定义条目
<div> 定义文档中的分区或节
<dl> 定义列表
<dt> 定义列表中的项目
<fieldset> 定义一个框架集
<form> 创建 HTML 表单
<h1> 定义最大的标题
<h2> 定义副标题
<h3> 定义标题
<h4> 定义标题
<h5> 定义标题
<h6> 定义最小的标题
<hr> 创建一条水平线
<legend> 元素为 fieldset 元素定义标题
<li> 标签定义列表项目
<noframes> 为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript> 定义在脚本未被执行时的替代内容
<ol> 定义有序列表
<ul> 定义无序列表
<p> 标签定义段落
<pre> 定义预格式化的文本
<table> 标签定义 HTML 表格
<tbody> 标签表格主体（正文）
<td> 表格中的标准单元格
<tfoot> 定义表格的页脚（脚注或表注）
<th> 定义表头单元格
<thead> 标签定义表格的表头
<tr> 定义表格中的行

行内元素列表
<a> 标签可定义锚
<abbr> 表示一个缩写形式
<acronym> 定义只取首字母缩写
<b> 字体加粗
<bdo> 可覆盖默认的文本方向
<big> 大号字体加粗
<br> 换行
<cite> 引用进行定义
<code> 定义计算机代码文本
<dfn> 定义一个定义项目
<em> 定义为强调的内容
<i> 斜体文本效果
<img> 向网页中嵌入一幅图像
<input> 输入框
<kbd> 定义键盘文本
<label> 标签为 input 元素定义标注（标记）
<q> 定义短的引用
<samp> 定义样本文本
<select> 创建单选或多选菜单
<small> 呈现小号字体效果
<span> 组合文档中的行内元素
<strong> 语气更强的强调的内容
<sub> 定义下标文本
<sup> 定义上标文本
<textarea> 多行的文本输入控件
<tt> 打字机或者等宽的文本效果
<var> 定义变量

display属性

display 样式决定了元素的展现形式。

值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。

对于后端小伙伴来说，除了 none 外，只需要再了解三个值就足够用了，它们分别是 block，inline-block，inline。

2.1）block 块元素

块元素在浏览器中展示时，通常会以新行来开始（和结束）。

2.2）inline 元素

行内（inline）元素会在一行内从左向右排布，如果一行排满了，会往下一行堆叠。

2.3）inline-block 行内块

行内块元素既可以设置高宽，又可以像行内元素一样并排排列。

常见的行内块元素有 img input button select等。

2.4）display小结

各个元素都有自己默认的 display 属性，但我们可以给元素设置 display 属性覆盖默认的属性。
比如给 div 设置 display: inline-block，就可以让块儿并排排列了。给 span 设置 display:inline-block，就可以设置高宽了。

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

float属性

3.1 浮动相关知识

float属性的取值：

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

浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。
不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。

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 http://nicolasgallagher.com/micro-clearfix-hack/

.clearfix:after, .clearfix:before{
    display:table;
    content:"";
}
.clearfix:after{
    clear:both;
}
.clearfix {*zoom:1;} //照顾IE6，IE7就可以了

position属性定位

元素在页面中的布局遵守一套文档流的方式，默认的定位属性值为static。它其实是未被设置定位的。

元素如果被定位了，那么它的top,left,bottom,right值就会生效，能设置定位的属性是relative,absolute和fixed。

需要注意的另一点是被定位的元素层次(z-index)会得到提高。

值 描述
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

relative（相对定位）

设置了相对定位之后，通过修改top,left,bottom,right值，元素会在自身文档流所在位置上被移动，其他的元素则不会调整位置来弥补它偏离后剩下的空隙。

absolute（绝对定位）

设置了绝对定位之后，元素脱离文档流，其他的元素会调整位置来弥补它偏离后剩下的空隙。元素偏移是相对于是它最近的设置了定位属性（position值不为static）的元素。

且如果元素为块级元素（display属性值为block)，那么它的宽度也会由内容撑开。因为：

默认文档流中块级元素如果没有设置宽度属性，会自动填满整行。

fixed(固定定位)

设置了固定定位之后，元素相对的偏移的参考是可视窗口，即使页面滚动，元素仍然会在固定位置。

常见布局

如何居中一个元素

总结

切图：

  1. Photoshop快捷键
  2. 切图方法
  3. 参考线
  4. 信息图
  5. 行高和间距

CSS编写

  1. 样式重置
  2. 样式级联
  3. 样式继承和非继承
  4. 特异性和顺序评估

布局

  1. 理解盒子模型。
  2. 行内元素和块级元素
  3. display属性
  4. float属性
  5. position属性定位
  6. 常用布局：垂直居中对齐

参考链接

https://10clouds.com/blog/css-backend-developers/
https://juejin.im/post/5a954add6fb9a06348538c0d
https://leohxj.gitbooks.io/front-end-database/
https://juejin.im/post/5a954add6fb9a06348538c0d