CSS 是什么

css(Cascading Style Sheets)，层叠样式表，
选择器{属性:值；属性：值}
h1{color:red;size:14px;}
/*这是注释*/
使用css的作用，是给网页穿一身华丽的衣服，写好html之后，不是很好看，加上css后，可以让元素呈现想要的样样子

如何在页面引用CSS

1.内联样式
<h1 style="color:red;font-size:20px;"></h1>
2.内部样式

<style type="text/css">
h1:{
color:red;
font-size:20px;
}
</style>

3.外部样式(一般是放在head里)
<link rel="stylesheet" type="text/css" href="index.css">

<style>
@import url("hello.css");
@import "world.css";
</style>

@是放在样式文件里

浏览器的默认样式

认识开发者工具

文件路径

相对路径，相对于当前的一个路径 ./代表当前文件夹，../代表上级路径

css/a.css
./css/a.css
b.css
../imgs/a.png

绝对路径，在本地时，通过完整路径寻找本地文件的绝对地址
/Users/hunger/project/css/a.css
网站路径

/static/css/a.css
css/a.css
http://cdn.jirengu.com/kejian1/8-1.png

用jsbin时，预览线上图片，，需要把本地图片上传一个地址，生成一个网址，然后就可以了

chorme调试

鼠标右键，审查元素，测试边界条件，
stye调试css
sources/console调试js
console.log()只在控制台显示，不在页面显示
断点breakdown
Emulation模拟手机网速/屏幕/触摸

css学习常识

1.css没有为什么，你只能接受现实。css是一种声明式的语言，当自己的知识与浏览器产生冲突时，要相信浏览器，更改自我认识的认识。
2.css有些属性是相互影响的，如行高和字体大小，是相互影响的。
3.css有些属性是很独立的，跟其他属性没有一点关系。

主要是观察，从表象反推理论。如transform可以结合调试，以知道是干什么的

css的精髓是知道元素的边界在哪里，以及宽高

body的宽度和高度不会自动适应屏幕大小
border大法，*{border:1px solid red}
两个span在一起，只要里面有内容（包括空格），都会有间隙，大概是一个空格的宽度，但是两个div之间不会有空格。
css包括文字，结构，
东西较分撒，从小到大学，从做小按钮，小东西做起，所有的页面都是由小东西组合成的，从局部到整体
按照一个成熟的框架，一次做一个

书写规范

• 尽量优雅，简洁，规范
• 语法不区分大小写，但建议统一使用小写
• 不使用内联的style属性定义样式
• id和class使用有意义的单词，分隔符建议使用-
• 有可能就是用缩写
• 属性值是0的省略单位
• 块内容缩进，提高阅读性
  -属性名冒号后面添加一个空格

如何切图

把一张psd文件切成若干小图片，在设计网页时可用到
切图之前，要思考要让文件最小化，让图片最清晰
切图的具体步骤
1.用ps打开文件
2.需要把不相关的内容的图层隐藏，一般会选择把背景变为透明
3.在左边工具栏选择切片工具，选中该图片
4.选择，文件，存储为web所用格式的文件，一般存储为PNG-24,透明的文件，
5.保存，选择选中的切片
6.如果图片过大，先查看图片大小，过大再可以无准压缩，Y
一般建议用tinypng.com可以压缩png和jpeg格式图片，，图片可以变小70%，压缩完一般是1k。2k

压缩注意事项：

切图思考，背景图片很大的时候，不要一次性把整个图片考下来，如图片是由很多小格子组成的，只切一个格子，去压缩下，再复制，排列的时候去重复即可
页面清晰度高，而且不占内存

块级元素和行内元素的区别：

• 块级（block-level），可以包含块级和行内，行内（内联、inline-block）只能包含文本和行内，
• 块级元素占据一整行空间，行内元素占据自身宽度空间；
• 块级和行内元素宽高设置、内外边距的差异，一般块级元素只设宽度即可，高度自动撑开，防止元素溢出
  块级元素
  div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre tblr li dd dt tr td th
  行内元素
  em strong span a br img button input label select textarea code script

css的属性

• 宽高
  只对块级元素设置生效，对行内元素设置无效、
• 边框 边框涉及三个属性，宽度，颜色，类型 border-width border-color border-style (一般明信片会用到
  border-style:dotted )border:2px blue solid
  不要下边框可用border-bottom:none

使用边框做三角形

height:20px;
width:20px;
border-top:solid 20px red;
border-left:solid 20px green;
可以做上三角。下三角、梯形，保留某一个或一个边框，其他的设置为transparent
做三角形、斜形
边框也可做圆角,圆形（只需要让border-radius>=宽度的一半即可）

width:100px;
height:100px;
border:1px solod black;
border-radius:50px 

边距

用于描述当前元素的属性--盒模型
margin border padding
padding代表内边距，有四个方向的值可以合写，值可以是数值，也可以是百分比（相对于父容器，不是自身）
margin代表外边距，有四个方向的值，可以合并，值可以是数值也可以是百分比（相对于父容器，不是自身），还可以是负值，需要注意外边距合并问题（当两个元素都有margin时，二者会合并）对于行内元素来说，上下的margin是无效的，只有左右margin才生效，上下padding也是无效的，但是会出现一个奇怪的现象，上下padding在视觉上能看到，但实际上只起到撑开元素的作用，对于元素真正的占据的空间是不变的，本身高度没有发生变化，撑开的可以被其他元素占据
块级元素的居中：margin:0 auto一般是块级元素设置一个宽度，如果不设置，块级元素默认撑满，就无所谓居不居中了，但是设置width再设置自动居中即可
*{marigin:0;padding:0}去除默认的边距
这样做的好处：
不同的浏览器，会有不同的默认样式，去除之后，可以你想要什么样的样式就设置什么样，会直达目的。

display

块级：block list-item table
行内：inline inline-table inline-block
默认是inline
可以应用到所有元素上，是不继承的

font

• font-size:字体大小
• font-family:字体样式
• font-weight:文体粗细程度，常用的是默认值reglaur和bold
• line-height:行高，可以用百分比、倍数或者固定宽度
• 以上属性都可继承给子元素
  boody{font:12px/1.5 tahoma,arial,"Hiragino Sans GB",'\5b8b\4f53',sans-serif;}
  按顺序来写才可以
  1.font-family使用浏览器打开页面时，浏览器会对去HTML文件，进行解析渲染。当读到文字时会转换成对应的unicode码，再根据HTML里设置的font-family（如果没有设置则使用浏览器默认设置）去查找电脑里（如果没有自定义字体@font-face,则加载对应字体文件）对应字体的字体文件。找到文件后根据unicode码去查找绘制外形，找到后绘制到页面上。
  英文字母可以通过自定义的字体库加载，但是中文不行，一般不用css加载字体库，占存太大。
  如果是一个很漂亮的中文字体，可以直接否则，用户电脑一般不会安装此字体，是自己安装的，一般不会显示
  在css设置字体时，直接写字体中文或英文名称，浏览器都能识别，直接写中文的情况下编码为（GB2312/UTF-8）不匹配时会产生乱码。保险的方式将字体名称用UNICODE表示
  'Microsoft YaHei'两个字符的要加引号
  “5B8B”对应宋
  “4F53”对应体
  可以在浏览器的console输入escape('黑体')，回车之后看到的内容就是对应的unicode码
  chorme最小字体是12px,默认的字体是16px
  如果想让字体小于默认字体，则可以用放大缩小功能 trassform:scale(0.75);

文本

• text-align:文本对齐方式：left center right justify，是用在块级元素上，对里面包含的行内元素生效。justify对两端的空白填充，如果只有一行字是没有任何效果的
• text-indent:文案第一行缩进距离
• text-decoration:none underline line-through overline 。a链接的下划线常用
• color:文字颜色
• text-transform:改变文字大小写 none uppercase lowercase capitalize首字母大写
• word-spacing:可以改变字（单词）之间的标准间距
• letter-spacing:字母间修改的是字符或字母之间的间隔

行内元素居中

可将行内元素display:inline-block可以用margin:0 auto
单行文本溢出加
如果内容过多，以。。。显示

white-spacce:nowrap;
overflow:hidden;
text-overflow:ellipsis;

颜色

单词: red, blue, pink, yellow, white, black
十六进制: #000000（黑色）, #fff（白色）, #eee（淡灰色）, #ccc, #666, #333, #f00, #0f0, #00f一般网站都是用十六进制。
rgb: rgb(255, 255, 255), rgb(0, 255, 0)
rgba: rgba(0,0,0,0.5)

单位：

• px： 固定单位*
• 百分比(宽高？文字大小？line-height? position?)
• em: 相对单位，相对于父元素字体大小
• rem: 相对单位，相对于根元素(html)字体大小
• vw vh: 相对屏幕宽度的单位，1vw 为屏幕宽度的1%

a链接

若想更改a链接字体的颜色，可直接对a进行设置，不能对其父元素进行设置

a{
color:red;
text-decoration:none;
}

列表去掉点,两个都可以

ul{list-style:none;}
li{list-style:none;}

隐藏或透明

opacity:0 透明度为0，本身还在，占用位置
visibility:hidden和opacity：0类似
display:none消失不占位置
background-color:rgba(0,0,0,0.2)只是背景透明

css选择器

• 基础选择器

• 通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）

id id选择器，匹配特定id的元素

.class 类选择器，匹配class包含(不是等于)特定类的元素
element 标签选择器

• 组合选择器（E和F代表两种不同的选择器）
  E,F 多元素选择器，用,分隔，同时匹配元素E或元素F
  E F 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
  E>F 子元素选择器，用>分隔，匹配E元素的所有直接子元素
  E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F
  E~F 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否），选中后面所有的令居
  .class1.class2 两者同时满足，id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
  element#id id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
• 属性选择器
  E[attr] 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
  E[attr = value] 匹配属性attr值为value的元素，div[id=test],匹配id=test的div
  E[attr ~= value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
  E[attr ^= value] 匹配属性attr的值以value开头的元素
  E[attr $= value] 匹配属性attr的值以value结尾的元素
  E[attr *= value] 匹配属性attr的值包含value的元素
  input[type=password]{width:100px;}匹配type属性为password的元素
• 伪类选择器
  代表一个元素的另外一种状态，当鼠标放在元素上以及点击之后，是一种状态而不是另外的元素
  a:hover（鼠标放上不按） a:foucs（获取焦点的元素）
  a:active（鼠标按着不松） a:visited(访问过的)
  如果按照 hover focus active visited的顺序，会出现当访问visited之后再点击其他的，由于样式覆盖，页面始终保留最后一种形式，不会产生变化，如要避免，可选择visited hover foucs active的顺序
  E:first-child 匹配作为长子（第一个子女）的元素E
  E:link 匹配所有未被点击的链接
  E:visited 匹配所有已被点击的链接
  E:active 匹配鼠标已经其上按下、还没有释放的E元素
  E:hover 匹配鼠标悬停其上的E元素
  E:focus 匹配获得当前焦点的E元素
  E:lang(c) 匹配lang属性等于c的E元素
  E:enabled 匹配表单中可用的元素
  E:disabled 匹配表单中禁用的元素
  E:checked 匹配表单中被选中的radio或checkbox元素
  E::selection 匹配用户当前选中的元素，一般用于浏览时选中元素的高亮显示
  E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
  E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
  nth-child(1)与first-chid一致
  E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
  E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素，匹配其父元素下使用同种标签（比如是p都是p，是h1都是h1）第n个的元素
  E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
  E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
  E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
  E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
  E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
  E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
  E:empty 匹配一个不包含任何子元素的元素，文本节点也被看作子元素
  E:not(selector) 匹配不符合当前选择器的任何元素
  n的取值
  1，2，3，4，5
  2n+1, 2n, 4n-1
  odd, even

伪元素选择器用的较多是before和after

• E::first-line 匹配E元素内容的第一行
• E::first-letter 匹配E元素内容的第一个字母
• E::before 在E元素之前插入生成的内容
• E::after 在E元素之后插入生成的内容
  选择器优先级
  如果多条规则作用于同一个元素上，且定义的相同属性的不同值，比如

  <style>
    #test {color: #666;}
    p {color: #333;}
  </style>

<p id="text">Text</p>
这种场景下，p元素文本颜色应该是哪个呢？

css优先级，从高到低依次为

• 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
• 作为style属性写在元素标签上的内联样式
• id选择器
• 类选择器
• 伪类选择器
• 属性选择器
• 标签选择器
• 通配符选择器
• 浏览器自定义
  当一个元素的样式是一个组合时，可以将选择器分abcd等级
  如出现行内样式时 视为a
  出现ID选择器时。视为b
  出现类、属性选择器和伪类选择器时，视为c
  出现标签选择器、伪元素,视为d

css常见样式

背景

background 简写属性，作用是将背景属性设置在一个声明中
background-attachment 背景图像是否固定或者随着页面的其余部分滚动，默认是会滚动，但是可设置fix
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-repeat 设置背景图像是否及如何重复
background-attachment:fixed
background-position 设置背景图像的起始位置
可以缩写成一句：
background:#f00 url(background.gif) no-repeat fixed 0 0;
background-size 设置背景的大小(兼容性)
窗口指的盒子的宽高，background-size:50% 100% 200px contain(有时图片和窗口比例不一样，让图片刚好能放在窗口里面，图片进行等比缩放)
cover图片的高度刚好充满窗口，但是宽度有可能显示不完全，会隐藏，当宽度变大时，展示出来的内容会变多

CSS Sprite

将不同的图片/图标合并放在一张图上。
使用CSS Sprite可以减少网络请求，提高网页加载性能。

inline-block

既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
又呈现 block 特性 (可设置宽高，内外边距)
缝隙问题：不会让外边距产生合并

line-height，行高，单行文本的行高，是可继承的属性

line-height: 2
line-height: 200%
height = line-heihgt 来垂直居中单行文本

其中line-height:2是本身单行文本高度的2倍，line-height:200%是父元素的两倍，如果用%浏览器会立刻计算大小，类似于是固定的，line-height:2是页面上的每个元素都继承自2。如果想让页面上每个元素都有几倍的行高，应该使用line-height:2

让元素居中的两种方法：让元素display:inline-block.让父元素text-align:center就可以
div包括这些元素，用浮动让元素水平排列，给其设置宽度再用margin:0 auto
在使用inline-block后，会发现如果两个并排的元素行高不一样，将不在一个水平线上，行内元素对齐，默认是以元素基线对齐，如果想顶部对齐，在元素上添加vertical-align:topvertical是和行内元素和表格绑定在一起的

盒模型

盒模型一般是由content padding border margin 组成，在标准盒模型中设置的width一般是指content的宽度
IE盒模型下的width指的是以边框为计算标准，是border,padding,content
ie678怪异模式（不添加doctype，使用ie盒模型，宽度=边框+padding+内容宽度）
使用css3新样式box-sizing

box-sizing:content-box:w3c标准盒模型，默认情况下是标准 的盒模型
box-sizing:border-sizing：IE盒模型

icon

实现方式，大概介绍5种
1.image
2.CSS Sprites
3.Icon Font
4.CSS Icon
5.SVG

需求

一个页面上有多少个小图标

1.使用image实现 兼容性好

在需要使用小图标的时候，可以把小图标当成图片，使用img标签<img src="">
注意事项：

• img的大小设置。
  (如果一般的input文本输入框内，设置为height为20px即可，宽度会自适应，不需要设置)
• img的vertical-align
• 请求数过多
  （如果页面包含很多小图标，会造成很多次请求。请求是没有问题的，但是如果明明可以发更少的请求，却发很多请求，就是不合理的）
  请求过多，在浏览器端会影响页面打开速度，当浏览器升到http2时代，100个请求跟1个请求速度差不了多少。但是之前是不行的。在服务器端会造成更大压力。请求过多会对网站流量造成影响，流量是需要收费的，减少请求会节约成本。

2.CSS Sprites css精灵图 兼容性好

自己做雪碧图？
把两个图片做成一个图片
使用background-position:-40px 0px,一个是x偏移值，一个是y的偏移值
优点:解决了请求过多的问题
缺点：
无法缩放，想要多大的图片，先缩下，再合成
不好修改，如果中间想增加一个图标，所有步骤都要重新来。

3.icon font

字体什么样是由设计师设计的，采取一些简单的代码代替有些内容，比如1代表xx，2代表00这类

• 制作字体文件
• 声明 font-family 使用本地连接 使用第三方连接
• 使用 font-famly 使用HTML实体 使用css:before
  iconfont使用步骤：
  1>登陆iconfont.cn,输入需要查找的内容的英文，如购物车cart
  2>将选择的图标加入购物车，如果里面没有想要的，可以上传再下载
  3>然后在购物车栏，点击添加到项目，给项目起个名字
  4>下载至本地
  5>会发现里面有ttf woff svg sot四个字体样式
  6>将以上4个字体样式拷贝至一个新的文件夹，即将引用的文件夹名字
  7>声明字体 @font-face
  8>使用字体，可以在iconfont直接找到下载的图标对应的unicode码，直接复制，放在<span class="">&#Xe5360</span>
  html里有一些转义符，是以&开头的
  © &#x0031分别是名字和unicode码对应的实体符合
  或者用css:before

.icon-search:before{content:"&#xe630";}
<span class="" ></span>

按照上述写法，&#不会发生变化，但是x会变成打印机，转义出了问题，以&开头的转义是只适用于html，不适用css
更改为

.icon-search:before{content:"\e630";}
<span class="" ></span>

4.css icon 用css来画 ie以前的版本不支持

比较无聊，费时的做法

5.svg ie9以后支持，用移动端首先这种方法

svg可以直接作为图片url的链接方式，但是一样会造成请求较多
另外一种就是做成svg“精灵图”，类似于用锚点电定位
步骤
1>声明
使用svg标签<svg xmlns=""><symbol id="cart"><path d=""></symbol></svg>
2>使用
<svg> <use xlink:href="#cart"></use></svg>
好处：颜色大小随便改

css浮动基本概念

浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.
行框 浮动会让元素脱离普通流, 如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框
浮动后虽然绿色div布局不受浮动影响，正常布局，但是文字部分却被挤到了红色浮动div外边，要想阻止行框围绕在浮动元素外边，可以使用clear属性，属性的left rigght both none 表示框的哪些边不挨着浮动框。
浮动加clear，对谁清除浮动就把clear放在哪，想让他clear只对自己生效，比如一个方块2在使用了浮动后，想让他单独一行，不允许其左右有元素，那加上clear:both即可
浮动元素相当于是让文字围绕浮动元素来走，有浮动元素的地方没有文字，浮动元素没有涉及的地方就有文字
一个块级元素里面如果包含浮动元素，那么不设置高度的情况下，高度为0，块级元素是感受不到浮动元素的。后面的div也会受影响，会认为上面的元素没有内容，直接按照文档流往上浮，但是里面的文字同样会感受到浮动元素的存在。
如果包含块太窄无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间，如果浮动元素的高度不同，那么向下移动的时候可能被卡住。
清理浮动，解决浮动父容器高度塌陷问题

为什么要清理浮动？

1、用完浮动，文字会围绕浮动元素周围
2、浮动元素父容器高度塌陷
3、浮动元素父容器后面的块级元素位置往上浮
想让浮动元素的父容器正常包裹浮动元素，有高度，(撑开父容器)可在浮动元素后，父容器内添加一个<div style="clear:both;">，但是增加了一个没有特别语义的元素
另外一种清除浮动的方式，是形成BFC（Blck Format Content）
块级格式上下文形成方式：

position:absolute;
position:fixed;
float:left right 
display:inline-block;
display:table-cell;
overflow:auto  hidden  scroll;(overflow不为visible的)；

以上元素属于块容器但不是简单的display:block;
块级元素之间是上下排列的且元素之间的外边距会产生合并。
但是使用上述内容时：
1>都会建立新的块级格式上下文（也会至上往下排列）
2>不会边距合并
3>浮动
清理浮动两种方式

BFC特性
其中第二个BFC不会重叠浮动元素，指的是使用块级格式上下文时，文字不再围绕浮动元素，而是作为整体在一块
第三个BFC可以包含浮动是指可以用于清除浮动
在正常文档流从上住下排列的情况中，会有一种情况，如果当两个是相邻元素，外边距会进行合并，如果两个是父子元素，则子元素设置的margin会直接影响父元素，如：
<div class="ct" > <h1>h1</h1>
对h1直接设置margin，会直接让ct的外边距发生改变。解决办法是对ct加个边框border:1px solid red之类或者加个padding,或者把ct生成块级格式上下文，如上。但是每一种方法都有自己的副作用

通用的浮动清理方法

.clearfix{
      *zoom:1;  /*IE6/7版本中清除浮动副作用最小的办法*/
  }
  .clearfix:after{  /*IE8以上可用伪元素*/
      content:"";
      display:block;
      clear:left;
  }


  /*方法2*/
  .clearfix{
    *zoom:1;
  }
  .clearfix:after{
    content:"";
      display:table;
      clear:both;
  }

利用 clear属性，清除浮动
使父容器形成

定位

inherit 规定应该从父元素继承 position 属性的值 一般不怎么用
static 默认值,没有定位，元素出现在正常的流中，类似于普通元素设置top bottom left right没有用（忽略 top, bottom, left, right 或者 z-index 声明） 没有加position和position:static一样
relative 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px
absolute 生成绝对定位的元素，脱离文档流，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
sticky CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置
定位机制
CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute,fixed)

普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中position: static与position:relative属于普通流的定位方式
浮动元素的定位是对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变。

作用：

比如一个萝卜一个坑，萝卜移走了，但是坑还在，其他坑挨着坑排序。在页面添加一个icon时但是不知道什么原因总是对不起，可选择使用relative

绝对定位包括 absolute和 fixed

Position 的几个值
static

<div style="border: solid 1px #0e0; width:200px; position: static;">
<div style="height: 100px; width: 100px; background-color: Red;">
</div>
<div style="height: 100px; width: 100px; background-color: Green;">
</div>
<div style="height: 100px; width: 100px; background-color: Red;">
</div>
</div>

定位机制

CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute,fixed)

普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中position: static与position:relative属于普通流的定位方式
浮动定位定位机制后续讲解
绝对定位包括 absolute和 fixed

absolute 和 fixed

• 相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样

• 绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。 是html非bodydemo。
  在使用positon:absolute时，尽量设置left top right bottom防止继承父元素的padding
  正常块级元素的宽度不用进行设置也是扩张的，默认充满。但是设置display:inline-block 浮动 absolute宽度会收缩，收缩到内容的宽度。绝对定位宽度是收缩的，如果想撑满父容器，可以设置 width: 100%
  当父容器里有position:absolute 的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的 content 等于父元素的 content宽度
  ，如果父容器有padding时，会溢出，可加上left;0 border:0

• 因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
  绝对定位能形成 BFC 可用来清除浮动 可用来阻止外边距合并

绝对定位垂直水平居中

position:absolute;
left:50%;
margin-left:-元素宽度的一半;
top:50%;
margin-top:-元素高度的一半;
width:300px;
height:300px;

此种方法适用于，元素自身宽高固定，且绝对居中（弹出框常用）

负margin和relative的区别：

1>relative使用时位置还在，只是元素偏移，萝卜和坑的问题，萝卜走了，坑还在，不会对后面的元素位置产生影响
2>负margin是文档流的位置发生偏移，萝卜走了，坑也走了，对后面的元素位置也发生变动

CSS居中

居中的分类

水平居中

1>让单行文字在块级元素中居中
text-align:center实现水平居 中
2> 按钮内容的居中
行内元素的padding上下是无效的不占用空间的，但是背景色是占用的，所以一般使用display:inline-block对外层元素设置text-align:center，可实现水平居中
3>图片的居中 同上
4>块级元素的居中
块级元素本来就是占满整个横向空间的，一般设置居中的元素都是有宽度的
让块级元素本身居中，只需设置margin:0 auto
让块级元素中的行内元素居中，只需设置text-align:center

一栏布局

1>非通栏固定宽度居中

main{
      border:1px solid red;
      max-width:800px;
      min-height:1000px;
      margin-left:auto;
      margin-right:auto;
    }

2>非通栏不固定宽度居中

  main{
      border:1px solid red;
      min-height:1000px;
      margin-left:10px;
      margin-right:10px;
    }

一栏通栏布局，内容居中
3>一栏布局，头部通栏，加logo
[http://js.jirengu.com/yuhit/5/edit?html,output]

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body{
      margin:0;
    }
    #topbar{
      border:1px solid blue;
   
    }
    #topbar>.inner{
      max-width:800px;
      margin-left:auto;
      margin-right:auto;
      line-height:40px;
    }
    .clearfix::after{
      content:"";
      clear:both;
      display:block;
    }
 #topbar .logo{
     width:40px;
     height:40px;
     background:#ddd;
     float:left;
   }
    #topbar .buttons{
      float:right;
    }
    #topbar .slogan{
      border:1px solid red;
      margin-left:40px;
      margin-right:100px;
    }
    main{
      border:1px solid red;
      min-height:1000px;
      max-width:800px;
      margin-left:auto;
      margin-right:auto;
    }
  </style>
</head>
<body>
  <div id="topbar">
    <div class="inner clearfix">
      <div class="logo"></div>
      <div class="buttons">
        <a href="#">登陆</a>
        <a href="#">注册</a>
      </div>
      <div class="slogan">haha</div>
    </div>
  </div>
  <main></main>
</body>
</html>

image.png

如上所做，虽然实现了效果，但是相当复杂，我们可对元素用flex布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body{
      margin:0;
    }
    #topbar{
      border:1px solid blue;
   
    }
    #topbar>.inner{
      max-width:800px;
      border:1px solid green;
      margin-left:auto;
      margin-right:auto;
      display:flex;
      align-items:center;
    } 
 #topbar .logo{
     width:40px;
     height:40px;
     background:#ddd；
   }
    #topbar .buttons{   
    }
    #topbar .slogan{
     flex-grow:1;
    }
    main{
      border:1px solid red;
      min-height:1000px;
      max-width:800px;
      margin-left:auto;
      margin-right:auto;
    }
  </style>
</head>
<body>
  <div id="topbar">
    <div class="inner">
      <div class="logo"></div>
      
      <div class="slogan">haha</div>
      <div class="buttons">
        <a href="#">登陆</a>
        <a href="#">注册</a>
      </div>
    </div>
  </div>
  <main></main>
</body>
</html>

简单方便快速实现内容
4>行内元素一栏布局

image.png

同一行元素有多个时，内部缝隙去除方法
1.去掉代码之间 的缝隙，让代码紧密挨着
2.用display:innlne-blcok;父元素font-size:0;子元素再设置font-size:16px;
3.最好是让元素浮动，再在外面嵌套一个层，清除浮动，让其变为inline元素，再居中。inline-block一般适用于只有一个元素，没有哥哥元素、也没有弟弟元素的情况

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body{
      margin:0;
    }
    .parent{
      border:1px solid red;
      margin:0 auto;
      text-align:center;
      padding:3px;
     
    }
    .clearfix::after{
      content:"";
      display:block;
      clear:both; 
    }
    .child{
      display:inline-block;
    }
    span{
      border:1px solid green;
      float:left; 
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child clearfix">
    <span>确定</span>
     <span>取消</span>
      </div>
  </div>
</body>
</html>

4.用flex布局，justify-content:center即可

image.png

5> 两栏布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
 body{
  margin:0;
  }
   aside{
      width:200px;
  background:#ccc;
  min-height:200px;
     float:left;
  }
    main{
      background:#eee;
      min-height:600px;
      margin-left:210px;
    }
   .wrapper{
     max-width:800px;
     margin:0 auto;
     border:1px solid red;
   }
  </style>
</head>
<body>
  <div class="wrapper">
 <aside></aside>
  <main> </main>
    </div>
</body>
</html>

实现如下 image.png

用flex布局实现上图

<style>
    body{
      margin:0;
    }
    .wrapper{
      max-width:800px;
      margin:0 auto;
      border:1px solid red;
      display:flex;
    }
    aside{
      min-height:30px;
      border:1px solid;
      width:200px;
    }
    main{
      min-height:50px;
      flex-grow:1;
      border:1px solid;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <aside></aside>
  <main></main>
</div>
</body>

制作一个类似于用户评论的卡片，即左侧只是很小的头像，右侧是内容而且确定高度大于头像高度，可用position（否则，会超出范围）,子元素使用position:absolute时，父元素要使用position:relative;

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body{
      margin:0;
    }
.wrapper{
  border:1px solid red;
  width:300px;
  height:300px;
  position:relative;
  margin:0 auto;
}
 aside{
   width:60px;
   height:60px;
   background:#ccc;
   border-radius:30px;
   position:absolute;
   left:0;
   top:0;
 }
 .text{
   border:1px solid green;
   min-height:200px;
   margin-left:60px;
   
 }
  </style>
</head>
<body>
<div class="wrapper">
  <aside></aside>
  <div class="text">我是一只小小小娘，我飞也飞不高，</div>
</div>

6>三栏布局

 body{
      margin:0;
    }
    aside{
      width:120px;
      background:#ddd;
      min-height:100px;
      border:1px solid;
      float:left;
    }
    .clearfix{
      content:"";
      display:block;
      clear:both;
    }
    #ad{
      width:150px;
      background:#ddd;
      min-height:200px;
      border:1px solid;
      float:right;
    }
    main{
      background:#666;
      border:1px solid;
      min-height:300px;
      margin-left:130px;
      margin-right:160px;
    }
  </style>
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper clearfix">
  <aside></aside>
  <div id="ad"></div>
  <main> </main>
</div>

展示如下

image.png

用flex布局实现如下

 body{
      margin:0;
    }
    .wrapper{
      display:flex;
      border:1px solid red;
    }
    aside{
      width:120px;
      background:#ddd;
      min-height:100px;
      border:1px solid;
      order:1;
    }

    #ad{
      width:150px;
      background:#ddd;
      min-height:200px;
      border:1px solid;
      order:3;
    }
    main{
      background:#666;
      border:1px solid;
      min-height:300px;
      flex-grow:1;
      order:2;
    }
  </style>
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
  <main> </main>
  <aside></aside>
  <div id="ad"></div>
</div>

垂直居中

1>很多其实看着是垂直居中的，只需要设置上下padding一致就可以，内容随便增加，上下padding不影响，一般高度都不用固定
2>按钮 icon 或者明确一般只有一行文字，可以进行设置line-height:heght的高度,此时需要设置height
3>一般网站的宽度都是固定的，需要设置一个layout层，设置layout{width:1000px; margin:0 auto;}
4>绝对居中，完全水平垂直居中
块级元素内，宽高是固定的，多行文本 行内元素水平垂直居中：text-align,margin可以设置为，但是这个不是绝对的垂直水平居中，
块级元素的宽高不是固定的，比如每个页面的展现都是浏览器的大小，但是浏览器大小是不固定的，行内元素实现水平垂直居中：
5>真正意义上让一个高度不固定的元素的垂直水平居中

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
 body{
  margin:0;
  }
    main{
      background:#eee;
      width:400px;
      display:inline-block;
      vertical-align:middle;
    }
   .wrapper{
     width:800px;
     height:600px;
     margin:0 auto;
     border:1px solid red;
     text-align:center;
   }
    .wrapper::before,.wrapper::after{
      content:"";
      display:inline-block;
      height:100%;
      vertical-align:middle;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <main>
真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中
    </main>
    </div>
</body>
</html>

让一个块级元素变为全屏的方法：
1>body，html{height:100%},对块级元素进行设置height:100%,依次对其父元素进行设置，直到设置到html，可不但设置首页全屏，往下翻都是全屏的，整屏全屏或者不止一个页面要全屏
2>设置position:absolute或fixed ;对top riht bottom left均设置为0
即top:0;left:0;bottom:0; right:0 但是全屏之后只有一个，如果多的话会覆盖，这种情况可适用于弹出框。再让里面的元素垂直水平居中，可设置left/top：50%，再加上负margin
如果块级元素内包含的元素宽高不固定，可设置子元素left,top:50%,transform:translate(-50%,-50%)

什么是布局

将一个页面切成豆腐块样的就是布局

• 导航栏+内容
• 导航栏+内容+广告栏
• 从上到下、从左到右、定宽、自适应、。。

div+css布局？

很多年以前，人们习惯用table座布局，但是现在不怎么用了，推崇的是div做替换，实际上div 是无语义的标签，

常见的布局 PC端

固定宽度布局。比如不管浏览器有多宽，所有的内容都集中在中间一块，固定的宽度内，左右有边界线。一般90%的网站都是这种布局。

优点：简单，宽度是写死的，不管浏览器如何变，页面不会变乱。

缺点：如果页面设置的宽度大于浏览器宽度，会出现滚动条

弹性布局。页面内容不是固定宽度，和浏览器页面宽度有关，是通过%进行设置的。

优点：设计合理的话，页面会比较好看

缺点：当浏览器宽度发生变化时，页面内容会随着变化，会出现一个内容过分大、过分小的情况，不美观，设计相对复杂，要考虑到屏幕特别大、特别小的情况

响应式布局。在什么样的宽度下，页面是什么样，适配不同的终端，不同屏幕的大小

如何实现下图

单列布局.png

实现方法：定宽、水平居中

<div class="layout">
 <div id="header">头部</diiv>
<div id="content">内容</diiv>
<div id="footer">尾部</diiv>
</div>

如上设置时，呈现的是所有内容都在固定宽度范围内，包括背景色及内容。

宽度和最大宽度的区别

width是固定的，在使用过程中，不管浏览器如何变化。宽度不变，如果显示不完，会出现滚动条
max-width在使用过程中，如果浏览器的宽度小于max-width，内容为实际展示内容，不会有滚动条

 <div id="header" class="layout">头部</diiv>
<div id="content" class="layout">内容</diiv>
<div id="footer" class="layout">尾部</diiv>

内容同上，只是节省了标签，同样能实现可批量修改样式
带通栏效果的，头部和尾部带通栏背景，但是内容还是居中，集合在中间一块

 <div id="header" >
<div class="layout">头部</diiv>
</div>
 <div id="content" >
<div class="layout">内容</diiv>
</div>
<div id="footer" >
<div class="layout">尾部</diiv>
</div>

当浏览器大于宽度，内容还是集中到中间，但是头部、尾部的背景可以是全屏，里面的内容是集中到中间的，但是如果浏览器的宽度小于内容的宽度，显示不完，会出现滚动条，最右边会有一部分首部和尾部显示不完全的情况。解决办法是对body:min-width:960px;

内部元素水平居中

.parent{text-align:center;} .child{display:inline-block;} ``.child{display:inline;zoom:1;}
如果内部元素不唯一且高度不一样，需要使用verticla-align:top
多块居中一般不建议用绝对定位

双列布局

一列固定宽度，一列自适应宽度
浮动元素+普通元素的margin
浮动元素之后，元素容易移位，但是形成BFC即可，但是比较麻烦，而且都有副作用，所以可以用margin-left之类
浏览器渲染，从上到下，读到元素之后，再读其样式，再接着读以下元素
元素用display:inline-block之间的缝隙，可对父容器设置font-sizes:0,再对元素本身设置font-size:具体大小

transform:scale( ) translateY() translateX()不会对其后面的元素造成影响，只占据原来的位置，移动后的位置，其他元素感知不到，跟flaot一样

FLEX布局

flex布局之前的布局方式

• normal flow()正常流，文档流
• float +clear
• position relative +absolute
• display:inline-block 导航可用，也可用float
• 负 margin
  flex是一种新的布局方式 ，css3带来的
• 块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是跟方向无关的
• flex布局可以实现空间自动分配、自动对齐

• flex 适用于简单的线性布局，更复杂的布局要交给grid布局
  flex的几个属性
  主轴 main axis
  侧轴 cross axis
  主轴起点 main strat，主轴的第一个点
  主轴终点 main end,主轴的最后一个点
  侧轴起点 cross strat 侧轴的第一个点
  侧轴终点 cross end 侧轴的最后一个点
  主轴尺寸 main size 主轴起点和终点之间的距离
  侧轴尺寸 cross size 侧轴起点和终点之间的距离
  里面的元素是item 外面的容器是container

  
  image.png
  

  flex container 的属性

  
  image.png

flex-direction的属性

• inherit继承
• initial起始
• row默认值从左往右一行展示，会一直增加，超出入容器宽度时，会减少宽度，在一行
• row-reverse顺序从右往左排列
• column是从上往下排列的，一列一列排列，
• column-reverse从下往上一列列排列

flex-wrap换行的属性

• 默认是nowrap不换行，即不管如何增加同行元素，只是缩小宽度挤在一行，不会换行
• flex-wrap:wrap;换行即可

flex-flow是flex-direction flex-wrap 的简写

justify-content主轴方向的对齐方式

主轴方向是指flex-direction的属性值，当flex-direction:row时主轴方向是左右方向，当flex-direction:column时，主轴方向是竖直方向
justify-content的属性：

• center 都往中间靠拢
• flex-end 都往终点靠拢
• flex-start 都往起点靠拢
• inherit
• initial
• space-between 空间在中间，即元素之间的距离是均等的，一般可用于导航条的logo和登陆按钮之类
• space-around 空间放到周围，平均放到周围，元素前后都有空间，遇到相邻元素，会叠加

align-items侧轴对齐方式，在高度不写死的情况下，才有效

• align-items: baseline 文字的底线对齐
• align-items:center 所有的元素往侧轴的中间靠拢
• align-items:flex-end 所有的元素往侧轴的终点靠拢
• align-items:flex-start 所有的元素往侧轴的起点靠拢
• align-items:inherit
• align-items:initial
• align-items:stretch 伸展，默认值，把所有的元素伸开，伸成最高元素的高度

align-content多行多列内容

• align-content:center
• align-content:flex-end
• align-content:flex-start 侧轴起点靠拢
• align-content:inherit
• align-content:initial
• align-content:space-around
• align-content:space-between 行与行之间的空隙是平均的
• align-content:stretch 默认值

flex item的属性

image.png

• flex-grow:值最大为1，如果值大于1，也是按照1计算，是所有多余的空间都给这个元素，但是如果里面有不止一个元素使用flex-grow,将按照其值按比例分配
• flex-shrink 收缩比例，当空间不够的时候，按照比例缩放
• flex-basis默认大小，一般不用，如果不写按照原大小
• flex是上面三个的缩写
• order 顺序（代替双飞翼）可以改变子元素的顺序
• align-self:可以让每个孩子自己选择自己的对齐方式
  用浮动，负margin时，通常会有并列几个元素，中间有间隙，可对元素设置margin-left:10px;.再对其父元素设置margin-left:-10px，让父元素整体左移，可省略写第一个元素的margin-left