1.css引入方式和样式

(1).内联样式：把css代码直接写在html标签中。
    优先级最高，不会被其他样式覆盖。不利于代码的维护，没有
    样式内容分离，影响阅读体验

(2).内部引入：style,位置在head。不利于复用，适用于单一的
页面  
<style type="text/css">...</style>

(3).外部引入：link,位置在head。解决了内容和样式的分离，更
加美观、可以共用。但是增加了一次请求
<link rel='stylesheet' type="text/css" href="css的
路径"/>

(4).import引入—@import url(reset.css)在css里写,不推
荐使用，会增加请求。
important的优先级别>行间样式的优先级别

注释方法：

/…/

css样式

• width、height 宽、高

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

• 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;//复合写
  法
  

• 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:基线到基线的距离
  font:font-weight,font-size/line-height,font-
  family;//复合写法
  font:bold,14px/1.5,Tohoma,sans-serif;
  

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

2.盒子模型

盒子在页面中所占的宽度＝左右边距+左右边框+左右填充+内容宽度

盒子在页面中所占的高度＝上下边距+上下边框+上下填充+内容高度

• border 边框

  border-width 边框宽度,默认宽度是3px,数值不能为负数
  
  border-color 边框颜色，不设置颜色的情况下，显示的颜色
  和字体颜色相同
  
  border-style 边框样式，主要有四种：solid 实线，
  dotted 点状线，dashed 虚线，double 双线
  
  复合写法 border:1px red solid;
  
  border-radius:50%; 变成圆边；
  
  ridge 3D垄状边框，有兼容性问题，火狐比较好
  

• padding 内间距

  padding:Xpx; 上下左右填充X像素；
  
  padding:Xpx Ypx; 上下填充X像素，左右填充Y像素；
  
  padding:Xpx Ypx Zpx; 上填充X像素，左右填充Y像素，下
  填充Z像素
  
  padding:Xpx Ypx Zpx Tpx; 上填充X像素，右填充Y像
  素，下填充Z像素，左填充T像素
  

• margin 外边距

  margin:Xpx; 上下左右填充X像素；
  
  margin:Xpx Ypx; 上下填充X像素，左右填充Y像素；
  
  margin:Xpx Ypx Zpx; 上填充X像素，左右填充Y像素，下
  填充Z像素
  
  margin:Xpx Ypx Zpx Tpx; 上填充X像素，右填充Y像素，
  下填充Z像素，左填充T像素
  
  margin:0 auto; auto表示居中；
  

3.选择器

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

  div{
      /*样式*/
  }
  

• id选择器：直接作用于叫该名称的标签元素是唯一的，标签也是唯一的，只对该名称标签有效。

  #名字{
      /*样式*/
  }
  

• 类选择器：给一类标签起一个标识

  .名字{
      /*样式*/
  }
  

• 群组选择器

  p, body, img, div{
      /*样式*/
  }
  

• 父子选择器

  div ol li a{
      /*样式*/
  }
  

• 通配选择器，作用于所有标签

  *{
      /*样式*/
  }
  

• 子元素选择器

  div>p{
      /*样式*/
  }
  

• 伪类选择器 :link、:hover、:active、:visited

  E:link{
      /*样式*/
  }
  

• 伪元素选择器

  E:first-line{
      /*样式*/
  }
  

4.优先级

<标签优先级：1

<类class：100

<id：1000

<!important;提高优先级

5.浮动

float:left;向左浮动；

float:right;向右浮动；

float:none;默认值；

清除浮动的方法

1.给父级设个固定高

2.clear:left;right;both;清除左，右，左右；

3.overflow:visible;默认值

overflow:hidden;超出父级边框的内容裁剪掉

overflow:scroll;超出父级边框的内容裁剪掉，当内容高度超过
父级高度的时候出现滚动条

ovrflow:auto；也是滚动条

overflow-x:scroll;x轴滚动条

overflow-x:hidden;x轴没有滚动条

6.定位布局

1.相对定位

position:relative;相对自身当前位置上下左右定位，值可以为
负数。可以对块，行标签使用。不会改变标签属性

z-index:1;表示当前标签的层级。当前标签必须使用position属
性才有效果。取值为数字，不能为负数；

2.绝对定位

position:absolute;如果没有父级标签设置relativ；当前标
签元素是以body可视区域为起点。如果有父级标签设置
relative；则以父级标签位置为起点。脱离文档流，改变标签的属
性，类似于display:block

3.固定定位

position:fixed;相对于浏览器窗口进行定位

7.颜色

• 关键词—css支持17种合法命名：aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal

• 十六进制—将三个介于00-FF的值规定了颜色的成分

• RGB—red, green, blue。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。

8.line-height 行高

上一段基线到下一段基线的距离

行距：基线到下一段顶端的距离

9.BFC 块级格式化上下文

满足下面css声明之一的元素便会生成BFC

1.根元素

2.float的值不为none

3.overflow的值不为visible

4.display的值为inline-block、table-cell、table-
caption

5.position的值为absolute或fixed

在一个bfc容器里面，里面的子元素无论怎么折腾，都不会影响外
部，bfc具有很强的包裹性！