前端（三）“流”又叫文档流，是css的一种基本定位和布局机制。流是html的一种抽象概念，暗喻这种排列布局方式好像水流一

一css基本概念

1.1流

“流”又叫文档流，是css的一种基本定位和布局机制。流是html的一种抽象概念，暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是html默认的布局机制，如你写的html不用css，默认自上而下（块级元素如div）从左到右（内联元素如span）堆砌的布局方式。

1.2css宽高样式

width、height的默认值都是auto。

对于块级元素，流体布局之下width: auto自适应撑满父元素宽度。

对于内联元素，width: auto则呈现出包裹性，即由子元素的宽度决定。

无论内联元素还是块级元素，height: auto都是呈现包裹性，即高度由子级元素撑开。

注意父元素height: auto会导致子元素height: 100%百分比失效。

如果块级元素的width是个固定值，margin是auto，则margin会撑满剩下的空间；如果margin是固定值，width是auto，则width会撑满剩下的空间。

1.3css的单位

html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。 CSS中的单位是必须要写的，因为它没有默认单位。常用过的是px或者是百分比（相对于父标签）

1.4css的基本写法

选择器{
	属性名: 属性值;
	属性名: 属性值;
}

选择器代表页面上的某类元素，选择器后一定是大括号。
属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号）。
属性名和冒号之间最好不要有空格（经验）。
如果一个属性有多个值的话，那么多个值用空格隔开

1.5行高line-height样式

行高和块级还是行内标签没有关系，就是指定的每一行的高度。如

    p {
            width: 400px;
            line-height: 30px;
            font-size: 10px;
        }

 <p >你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好</p>

那么显示p的高度就是 = 多少行*30px。

二字体样式

 p{
            font-size:50px; 		/*字体大小*/
            line-height: 30px;      /*行高*/
            font-family:幼圆,黑体; 	/*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
            font-style:italic ;		/*italic表示斜体，normal表示不倾斜*/
            font-weight:bold;	/*粗体：属性值写成bolder也可以*/
            font-variant:small-caps;  /*小写变大写*/
  }

字体属性说明：

网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装。
为了防止用户电脑里，没有幼圆这个字体。就要用英语的逗号，隔开备选字体。
行高可以用百分比，表示字号的百分之多少。举例： font-size:50px; line-height: 200%; 就等同于line-height:100px。

三列表样式

 list-style-image:url(../static/logo.png) ;  /*列表项前设置为图片*/

四超出范围样式

我们在css中设置宽度和高度都是100px，这个时候我们在容器中放置一个很长的文本，文本所需要的区域，已经超过了这个宽度和高度的时候我们需要怎么样显示呢？

使用overflow属性，可以定义超出的文本怎么显示，样式值有：

auto：浏览器自己解决。在必需时裁切对象多余的内容或显示滚动条。一般采用这个属性值。
visible：默认值。全部显示出来（溢出）。
hidden：不显示超过对象尺寸的内容。
scroll：总是显示滚动条。

五背景样式

CSS样式中，常见的背景属性有以下几种：（经常用到，要记住）

background-color:#ff99ff; 设置标签的背景颜色。
background-image:url(images/2.gif); 设置标签的背景图片。
background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要）
- no-repeat不要平铺；
- repeat-x横向平铺；
- repeat-y纵向平铺。
background-position:center top; 设置背景图片在当前标签中的位置。
background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。属性值可以是：scroll（与fixed属性相反，默认属性）、fixed（背景就会被固定住，不会被滚动条滚走）。
另外还有一个简写属性叫做background，它的作用是：将上面的多个属性写在一个声明中。

tips：padding也是有背景图和颜色的。

background-position样式值可以是top、left、right、bottom，同时还可以是具体数值，可是是正数还可以是负数：

 background-position:向右偏移量 向下偏移量;

background 综合属性

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：

background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

六css和html结合方式

行内样式：在某个特定的标签里采用style属性。范围只针对此标签。
内嵌样式：在页面的head里采用<style>标签。范围针对此页面。
引入外部样式css文件的方式。这种方式又分为两种：
- 采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
- 采用import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;

6.1行内样式

采用style属性。范围只针对此标签适用。

<p style="color:white;background-color:red">以后所有的时光里</p>

6.2内嵌样式

在head标签中加入<style>标签，对多个标签进行统一修改，范围针对此页面。

<style type="text/css">
    p{
        font-weight: bold;
        font-style: italic;
        color: red;
    }

</style>

 <body>
        <p>小哥哥</p>
	<p>洗白白</p>
	<p style="color:blue">你懂得</p>
 </body>

6.3引入外部样式css文件

我们先在html页面的同级目录下新建一个a.css文件，那说明这里面的代码全是css代码，此时就没有必要再写<style>标签了

<link rel = "stylesheet" type = "text/css" href="a.css">

这样我们就在当前页面引入了一个外部样式。

这里再讲一个补充的知识：link标签的rel属性 <link>标签的rel属性： 其属性值有以下两种：

stylesheet：定义的样式表
alternate stylesheet：候选的样式表