1. 1. css篇回顾
    1. 1.1. css引入方式
    2. 1.2. 选择器
    3. 1.3. 优先级
    4. 1.4. 浮动
    5. 1.5. 定位
    6. 1.6. 单位
    7. 1.7. BFC
      1. 1.7.1. BFC定义
      2. 1.7.2. BFC布局规则
      3. 1.7.3. BFC的生成条件
    8. 1.8. FONT
    9. 1.9. 盒模型
    10. 1.10. 清除浮动
    11. 1.11. 垂直居中
    12. 1.12. 自动换行
    13. 1.13. opcity
    14. 1.14. Overflow

css篇回顾

css引入方式

  • 内联样式，行间样式，把css把css代码写在html标签中。
  • 优点：优先级最高，不易被其他样式影响。缺点：不利于代码的后期维护，有悖于分离思想，html看起来杂乱不堪。
  • 内部引入，把css代码用style标签包裹放在head标签内。
  • 优点：没有请求，适合单页面。缺点：不能够复用样式
  • 外部引入，用link标签在head内引入外部css文件。
  • 缺点：多发送一次请求。优点：分离思想，规范化，模块化。

  • @import url(‘xx.css’),xx.css是对应你的css 文件所在路径，写入正确的路径即完成导入。少用或不用。

    选择器

  • 标签选择器：直接作用于选择的标签元素，是一个集合a h p

  • id选择器：直接作用于叫该名称的标签元素，名称是唯一的，标签也是唯一的，是一个单数 #id
  • 父子选择器：又叫层级选择器。body div{ }
  • 类选择器：css写法.就像#。
  • 通配选择器：*，所有标签。
  • 分组选择器：html，body{width：100%；height：100%；}用于代码优化，把相同样式合并。
  • 伪类选择器： a的4个状态伪类：link visited hover active
  • 伪元素选择器：：：

    优先级

同等级以最后的为准，标签选择器优先级若为1 (a h p)，类选择器优先选择级则为100 (class)，id选择器优先选择级则为1000，行间样式最高级style；（优先级中的极品 ！important;不建议使用）

  • 群组选择器h1,.duanluo,#lianjie
  • 通配选择器*，常用功能清除默认格式
  • 通配选择器慎用，id选择器少用；

浮动

  • Css样式的float浮动属性，用于设置标签对象（如：div标签盒子、span标签、a标签、em标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。

  • Float常跟属性值left、right、none

    1.Float:none 不使用浮动

    2.Float:left 靠左浮动

    3.Float:right 靠右浮动

    float语法：
    float : none | left |right

    参数值：
    none : 　对象不浮动
    left : 　对象浮在左边
    right : 　对象浮在右边

定位

  • 通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。常用的有3种

  • static
    元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

  • relative
    元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
  • absolute
    元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  • fixed
    元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

单位

px em rem vh和vw

  • px
  • em 父级为基准，不好控制
  • rem html根大小为基准，可控性强
  • vh和vw 手机端可视窗，如width为890px 则1vw为8.9px。height为480px，则1vh为4.8px，为1/100.

BFC

BFC定义

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

BFC布局规则

  • 内部的Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算

BFC的生成条件

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

FONT

  • 再次认识font

http://www.cnblogs.com/fsjohnhuang/p/4310533.html#a32

盒模型

  • 标准盒模型

外盒模型

元素空间宽度 = content width + padding + border + margin的宽度

元素空间高度 = content height + padding + border + margin的高度

内盒模型

元素宽度 = content width  + padding + border的宽度

元素高度 = content height + padding + border的高度
  • IE盒模型 当IE6~8处于怪异模式下就会使用IE盒子模型，否则将使用W3C标准盒子模型。

外盒模型

元素空间宽度 = content width + margin的宽度

元素空间高度 = content height + margin的高度

内盒模型

元素宽度 = content width

元素高度 = content height

－box-sizing IE8+

box-sizing有三个值，默认是content-box（表示元素使用W3C盒子模型），而border-box（表示元素使用IE盒子模型），inherit（从父元素上继承）

清除浮动

  • 使用带clear属性的空元素
  • 使用CSS的overflow属性 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

  • 给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

  • 使用邻接元素处理 给浮动元素后面的元素添加clear属性。

  • 使用CSS的:after伪元素 结合 zoom

结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

.clearfix:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
/ 触发 hasLayout /
zoom: 1;
}

  • IE hack 有IE就有hack hack主要是针对IE 浏览器

所有 IE{property:value\9;}
大于或等于 IE 8{property:value\0;}
小于或等于 IE 7{*property:value;}
.IE 8/9{property:value\0;}
.IE 9{property:value\9\0;}
.IE 7{+property:value;}
.IE 6{_property:value;}
非 IE{property//:value;}

－ zoom 定义缩放比例。不允许负值 有兼容问题 主要用于IE67浏览器 触发haslayout 达到清除浮动等功能

zoom:1

垂直居中

－ 使用绝对定位垂直居中

兼容性最好 absolute结合margin 需要知道尺寸

http://www.cnblogs.com/dojo-lzz/p/4419596.html

自动换行

word-wrap 是控制换行的

break-word 是将强制换行

word-break 表明是否断开单词换行 面对长度较长单词

break-all 允许断开单词换行

white-space

pre :空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签

nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止

pre-wrap: 保留空白符序列，但是正常地进行换行

当文本溢出包含元素时发生的事情

  • text-overflow: clip|ellipsis|string;

clip默认值 超出裁剪
ellipsis 超出显示…

  • 单行文本溢出显示省略号(…)

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap; 不换行

部分浏览器 需要带上width

  • 多行文本溢出显示省略号(…) 仅支持webkit内核浏览器 移动端

display: -webkit-box; 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; 伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3; 用来限制在一个块元素显示的文本的行数
overflow: hidden;

  • 利用 after

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: “…”; position: absolute; bottom: 0; right: 0; padding-left: 40px;

opcity

  • Opacity属性用来设置一个元素的透明度，取值范围是0~1之间，不可为负值。opacity取值为1是完全不透明，取值为0是完全透明

opacity:0.5;
filter:alpha(opacity=50);/ IE 4+ / ||

filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /ie 8+/

Overflow

overflow属性有四个值：visible (默认),

hidden 将所有超出盒子的所有内容都给隐藏掉。

scroll 始终出现滚动条

auto 现代浏览器的默认属性 有超出内容 才有滚动条

overflow-x

overflow-y