css基础

字体属性

• font（所有字体属性）

• font:italic bold 12px/20px arial,sans-serif;
  顺序：
  font-style
  font-weight
  font-size/line-height
  font-family
• swsf,至少要指定font-size和font-family
• 连写会用默认的行高为0，会把前面的层叠掉

• font-family （字体）

• font-famliy: tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;//前面的字体都查找失败后，在系统中找一种sans-serif字体作为默认字体。
• 中文转码，escape()，sans-serif

• font-size（字体尺寸）

• chrome浏览器默认是16px
• h系列标签不继承font-size
• 最小是12px

• font-style（字体样式）

normal 默认值。
italic 斜体，前提是该字体有斜体
oblique 倾斜的字体样式，字体没斜体可用这种方式
inherit 规定应该从父元素继承字体样式。

• font-weight（字体粗细）

  • normal 默认值。定义标准的字符。
    bold 粗体。
    bolder 更粗。
    lighter 更细。
  • 100 200 300 400 500 600 700 800 900
  • 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

• line-height（行高）

  • 设置行高等于height可以让单行文本垂直居中
  • 行高=字高+0.5上间距+0.5下间距
  • 字体默认大小为16px,行高是16xp,大于16px时，默认的行高会变大，跟字体有关
  • 值2em,200%，2表示2倍字体大小的行高
  • 如果单位是em或者%，那么将来行高会先计算出来结果以后再继承给子元素
  • 如果单位是没有，那么将来行高会先继承给子元素，然后再根据自己的字体大小计算出行高

• 有继承性

文本属性

• color（文本颜色）

• color:red;

  color:#00ff00;

  color:rgb(0,0,255);

• a标签不能继承color

• direction（文本方向）
• letter-spacing（字符间距）

消除inline-block的间隔

• text-align（文本水平的对齐方式）

元素或文本居中（只对行内元素或行内块元素有效）

• text-decoration（文本修饰）

• none 默认。定义标准的文本。
  underline 定义文本下的一条线。
  overline 定义文本上的一条线。
  line-through 定义穿过文本下的一条线。
• 消除a标签的下划线
• a便签不能继承

• text-indent（首行缩进）

• text-indent:2em;
  text-indent:-5000px;
• 段落首行的缩进
• 通过负值设置logo文本的隐藏
• 只能设置于块级标签

• text-transform（控制文本的大小写）
• white-space（如何处理元素中的空白）

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。

• word-spacing（单词间距，只对英文单词有效）

word-spacing:25px;

• word-break（自动换行）

• normal 使用浏览器默认的换行规则，不打断单词显示。
  break-all 允许在单词内换行。
  keep-all 只能在半角空格或连字符处换行。
• word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了
• 打断单词

• word-wrap(允许长单词换行到下一行)

• normal 只在允许的断字点换行（浏览器保持默认处理）。
  break-word 在长单词或 URL 地址内部进行换行。
• word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句

• 有继承性

定位模式

• position（元素的定位类型）

• static（自动定位，默认值）,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

• absolute（绝对定位）

  • 1、没有父元素，根据body定位
    2、有父元素，父元素没定位，根据body定位
    3、有父元素，父元素有定位，根据父元素定位

  • 变成display:block;但特点和inline-block一样

  • 脱离标准流,包裹性，破坏性，悬浮性

  • left:50%;margin-left:-width/2;//元素水平居中，垂直居中类似

  • left:0;top:0;right:0;bottom:0;margin: auto//水平垂直居中

  • clip（剪裁绝对定位元素）

    img
      {
      position:absolute;
      clip:rect(0px,60px,200px,0px);
      }
    

  • relative（相对定位）,相对自身，保留原来位置

    • 相对于其原文档流的位置进行定位，在文档流中的位置仍然保留

  • fixed（固定定位）

    • 相对于浏览器窗口进行定位，不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。也脱离标准流

• bottom（底部偏移量）
• top（顶端偏移量），共存是权限比bottom高
• right（右侧偏移量）
• left（左侧偏移量），共存是权限比bottom高
• z-index(可继承)

• 默认是0，可以负值，值高遮挡值低的
• 仅能在定位元素上奏效（非static），元素可拥有负的 z-index 属性值。默认的 z-index 是 0。Z-index -1 拥有更低的优先级。z-index较高的元素会遮挡z-index较低的元素

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

• float（浮动）

• 变成display:block;但特点和inline-block一样
• 包裹性，父容器塌陷（保持原样），后面的非浮动元素上来补位
• 行内元素，行内块元素，文字都会环绕在浮动的元素
• 浮动元素顶部对齐
• 单词太长不能环绕
• margin设置负数可以往上走

• 清除浮动

• 父元素设置高度
• overflow:hidden;
• display:table;
• 额外标签法
  • 内部标签：会将这个浮动盒子的父盒子高度重新撑开
  • 外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子
• clear:both;

.clearfix:after,.clearfix:before{      /*对类名为father父元素应用after伪对象样式*/
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0;
    line-height: 0;
}
.clearfix {
    zoom: 1;//兼容ie6
}

• clear（清除浮动）

left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。

img
  {
  float:left;
  clear:both;
  }

• display

• block（块级）

  • 独占一行，可以设置行高

• inline（行内）

  • 一行可以有多个，不可以设置行高
  • 上下margin和padding会被忽略
  • 左右margin和padding会起作用
  • 默认基线对齐

• inline-block（行内块）

  • 一行可以有多个，可以设置多个
  • 默认底部和基线对齐

• table（块级表格,使用最少的空间包裹子元素）

  • 不定宽的块级元素水平居中

    .wrap{
        background:#ccc;
        display:table;
        margin:0 auto;
    }
    

  • 触发BFC，里面的元素不会影响外面，外面的元素不会影响里面

• none（元素隐藏，不保留原位置）

• visibility（元素的可见性，可继承）

visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。

• overflow（内容溢出元素框时发生的事情）

• visible 默认值。内容不会被修剪，会呈现在元素框之外。
  hidden 内容会被修剪，并且其余内容是不可见的。
  scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
• 除了默认值，其它值都会触发BFC
• 超出浮动盒子的内容，不会影响其他浮动的元素
• overflow:hidden;会切割border上的的子盒子部分，不会切割padding里面的部分
• body默认是overflow:auto;

• vertical-align（元素的垂直对齐方式）

• vertail-align:middle;常用与图片与文字对齐
• baseline 默认。元素放置在父元素的基线上。
  sub 垂直对齐文本的下标。
  super 垂直对齐文本的上标
  top 把元素的顶端与行中最高元素的顶端对齐
  text-top 把元素的顶端与父元素字体的顶端对齐
  middle 把此元素放置在父元素的中部。
  bottom 把元素的顶端与行中最低的元素的顶端对齐。
  text-bottom 把元素的底端与父元素字体的底端对齐。

• cursor（光标的类型（形状），可继承）

span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}