css知识点回顾

好吧，css如何下手还真有点迷茫。。。那我就从如何引入css说起吧！

css的引入方式

css:层叠样式表单有三种引入方式，分别是：

  • 行间样式（优先级别是最高的，一般不建议这么使用）
  • 内部引入（在header部分用下列代码引入）
<style type="text/css">...</style>
  • 外部引入（在header部分用下列代码引入）
<link rel='stylesheet' type="text/css" href="css的路径"/>

各自优缺点、场景、优先级

  • 行间样式—优点：优先级最高，不会被其他样式覆盖影响，缺点：不利于代码维护，没有行为样式内容分离、不可通用、影响阅读体验
  • 外部引入—内容样式分离，利于样式复用，修改需要警慎，增加了一次请求
  • 内部引用—优点：不利于复用，适用于单一页面
  • @import url()—会发生一次请求，该方法不常用,了解就好，不建议使用

important的优先级别>行间样式的优先级别
!important 为某些样式设置最高权值

注释方法：

/…/

一、css样式

1、width、height

块级元素可以设置width、height，但是行级元素只可以设置width，不能直接设置height

2、background

  • background-color:背景颜色
    颜色值：
    1、关键词：浏览器支持140种颜色、css合法17标准颜色：aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal
    2、16进制：
    3、rgb：红绿蓝、0～255、黑～白
    4、rgba：（IE8以下不支持）
    5、hsl：（IE8以下不支持）色调、饱和度（0～100%）、亮度（0～100%）
    6、hsla：（IE8以下不支持）
  • background-image：url():背景图片，该属性不会撑开容器
  • background-position：背景图片位置
  • background-size:背景图片的大小
  • background-repeat:no-repeat/repeat-x/repeat-y/repeat;
background-position:0px 0px;
background-size：100px 100px;
background:red url() 0px 0px no-repeat;//复合写法

3、font

font-family:字体，如Tohoma，serif，sans-serif
font-size:字体大小，一般浏览器的默认字体大小是16px;
color:字体颜色
font-weight:加粗（bold/bolder/normal）
font-style:字体样式，如italic（斜体）、normal（默认样式）、oblique
text-decoration:line-throw(中划线)/underline(下划线，默认样式)/none(无)/overline(上划线)/blink/inherit(继承)
line-hight:基线到基线的距离

(补充行距：基线到下一行的顶线的距离)

这里字体颜色单位见上文2、background

font:font-weight,font-size/line-height,font-family;//复合写法
font:bold,14px/1.5,Tohoma,sans-serif;

这里字体：
按顺序查找字体，如果都没有，以缺字符代替，一般是小正方形。
加引号时保留空格字符。
为了防止不能阅读，以sans-serif或serif结尾。

4、列表的样式

list-style-type:序列号

5、表格的样式

待续

7、轮廓

待续

二、css定位

1、position

  • 相对定位：relative
  • 绝对定位：absolute
  • 固定定位：fixed

具体的可以移步:http://wj1213180604.github.io/2015/11/26/float-position/

2、float

清除浮动等具体的可以移步:http://wj1213180604.github.io/2015/11/26/float-position/

三、css盒子模型

1、margin

  • margin-top、margin-right、margin-bottom、margin-left是margin的四个属性值。
margin: top right bottom left;//复合写法，单位是px或者%

2、padding

  • padding-top、padding-right、padding-bottom、padding-left是padding的四个属性值。
padding: top right bottom left;//复合写法，单位是px或者%

3、border

  • border-color:默认与字体颜色一样
  • border-width:不可以为负数，默认是3px
  • border-style:
    solid（实线）/dotted（点状线，IE6不兼容）/dashed（虚线）/double（双边线）
  • border-radius:圆角边，单位是px或者%

有属性border-right-width,可以以此类推

4、类选择器(.class)

5、分组选择器(,,,,,)

偏重于代码优化，减少css体积

6、通配选择器(*)—无兼容问题

态度：尽量不要用

7、伪类选择器—a链接的四种状态

:link、:hover、:active、:visited
遵循lovehate法则，顺序最好不要打乱

8、伪元素选择器（css3）::

继承：

待续

单位：

单位有
1、px
2、%（百分比，根据父级的width、height来确定自身的宽高）
3、em（倍数，根据父级的大小来确定自身的大小）
4、rem（倍数，根据html标签层级的大小来确定自身的大小，更加便捷计算和控制！其中字母r是指root，根）
5、视窗单位vh/vw（vh＝viewport/100、vw＝viewport/100）

BFC：

FC：Formatting Content.格式化上下文
BFC：Block Formatting Content.块级格式化上下文
IFC：Inline Formatting Content.行级格式化上下文

BFC的生成条件：(此处我也很迷糊！！！)
1、float值不为none
2、overflow值不为visible
3、display的值为inline-block、table-cell、table-caption
4、position的值是absolute、fixed
BFC的约束规则：
1、生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
2、生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

有道友对它做了分解，我们直接拿来：

1、内部的Box会在垂直方向上一个接一个的放置
2、垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
3、每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
4、BFC的区域不会与float的元素区域重叠
5、计算BFC的高度时，浮动子元素也参与计算
6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

在一个BFC容器里，里面任何一个子元素，不会对外部造成影响。

再次认识font

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

  • 盒模型

  • 标准盒模型

外盒模型

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

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

内盒模型

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

元素高度 = content height + padding + border的高度

－ IE盒模型 当IE6~8处于怪异模式下就会使用IE盒子模型，否则将使用W3C标准盒子模型。

外盒模型

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

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

内盒模型

元素宽度 = content width

元素高度 = content height

－box-sizing 启动IE盒子模型，IE8+，需要特定的环境

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

－float 浮动

具有包裹性 本意作用是做文字环绕 float布局只是歪打正着的产物

  • 清除浮动

－使用带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; <!--line-height:0-->
      /* 隐藏这个after的 */
      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;}（经典的BUG：双倍margin—解决方法：zoom）
非 IE{property//:value;}

.box{
    color:red;
    *color:green;//<=IE7
    _color:blue;//IE6
}

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

zoom:1

.box{
    width:200px;
    height:200px;
    background:blue;
    border:10px solid red;
    padding:10px;
    zoom:2;//1是原始比例，所有的包括宽高边框字体padding等都放大2倍
}

－ 垂直居中

－ 使用绝对定位垂直居中

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

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

-自动换行

word-wrap 是控制换行的

break-word 是将强制换行

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

break-all 允许断开单词换行

white-space

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

 标签

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

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

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

  • text-overflow: clip|ellipsis|string;

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

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

width:200px;//移动端可以不加单位
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap; //不换行

部分浏览器 需要带上width

－多行文本溢出显示省略号(…) 仅支持webkit内核浏览器 移动端（IE10以下不支持）

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;

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

opacity:0.5;
filter:alpha(opacity=50);/* IE 4+ */  ||
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /*i e 8+*/

－Overflow

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

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

scroll 始终出现滚动条

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

overflow-x

overflow-y