~

行内元素特点：

1. 和相邻行内元素在一行
2. 高、宽无效，但水平方向的padding和margin可以设置，垂直方向无效
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或则其他行内元素。

6.3 行内块元素(inline-block)

　　在行内元素中有几个特殊的标签：、、，可以对它们设置宽高和对齐属性。

行内块元素特点：

1. 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙
2. 默认宽度就是它本身内容的宽度
3. 高度，行高、外边距以及内边距都可以控制 

6.4 标签显示模式转换display

块转行内：display:inline;
行内转块：display：block;
块、行内元素转换为行内块：display:inline-block;

6.5 行高的测量

　　行高利用最多的一个地方是：可以让一行文本在盒子中垂直居中对齐

做法就是：文字的行高等于盒子的高度

如果行高 = height 高度  文字会 垂直居中

如果行高 > 高度   文字会 偏下

如果行高 < 高度   文字会  偏上

7.1 CSS层叠性

所谓的层叠性是指多种CSS样式的叠加,是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个属性就会将另一个属性层叠掉。

一般出现冲突后，会按照CSS书写的顺序，以最后的样式为准

1、样式冲突，就近原则，哪个样式离结构近，就执行那个样式

2、样式不冲突，不会层叠

7.2 CSS继承性

　　子标签会继承父标签的某些样式，如文本颜色和字号。

　　子元素可以继承父元素的text- font- line- color等

7.3 CSS优先级

继承或者*的贡献值

0，0,0，0

每个元素（标签）贡献值为

0，0，0，1

每个类，伪类贡献值为.class

0，0，1，0

每个ID贡献值为#id

0，1，0，0

每个行内样式贡献值

1，0，0，0

每个!important贡献值 重要的

∞

权重如下：

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
#数位之间没有进制 eg：0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

CSS可以添加背景颜色和背景图片，以及来进行图片设置。

background-color

背景颜色

background-image

背景图片地址

background-repeat

是否平铺

background-position

背景位置

background-attachment

背景固定还是滚动

背景的合写（复合属性）

background：背景颜色、背景图片地址、背景平铺、背景滚动、背景位置

背景平铺：background-repeat

background-repeat：repeat | no-repeat| repeat-x| repeat-y|
repeat: 背景图像在纵向和横向上平铺
no-repeat: 背景图像不平铺
repeat-x: 背景图像在横向上平铺
repeat-y: 背景图像在纵向平铺

背景图片地址：backgroun-image

background-image : none | url (url)
none : 　无背景图（默认的）
url : 　使用绝对或相对地址指定背景图像
background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。
如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。

背景位置:backgroud-position

backgroud-position:length || position

1. position后面可以跟方位名词，他们之间可以没有上下顺序

2. Position如果只写一个方位名词，另外一个默认是居中的

3. Position 后面也可以跟 值px 但是 必须有顺序 x 在前面， y后面  不能颠倒

   background-position:left; #top 上 bottom 下 left 左 right 右
   background-position:bottom; #top 上 bottom 下 left 左 right 右
   background-position:12px 50px;
   background-position:50px 12px;

背景附着:background-attachment

background-attachment：scroll | fixed
scroll:背景图像是随对象内容滚动
fixed:背景图像固定

说明：设置或检索背景图像是随对象内容滚动还是固定的。

背景简写:background

background属性的值的书写顺序官方并没有强制标准的。

background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

背景透明:background：rgba

background：rgba(0,0,0,0.3)

最后一个参数是alpha透明度，取值0-1之间

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

CSS就3个大模块：盒子模型、浮动、定位，其余都是细节。

所谓盒子模型就是把HTML页面中的元素看做是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框(border)、外边距(margin)组成。

看透网页布局的本质

本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

盒子模型（Box Model）

盒子边框（border）

边框就是那层皮。

语法如下：

border:border-width || border-style || border-color

边框属性-设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

None：没有边框即忽略所有边框的宽度（默认值）

Solid:边框为单实线（最常用）

Dashed:边框为虚线

Dotted:边框为点线

Double：边框为双实线

掌握如下：
/*border: 1px solid blue;*/
border-top: 1px solid red; /*上边框*/
border-bottom: 2px solid green;/*下边框*/
border-left: 1px solid blue;/*左边框*/
border-right: 5px solid pink; /*右边框*/

盒子边框写法总结表

边框 宽度、边框 颜色设置 、边框 综合设置（按顺时针进行展示：上 右 下 左）

    /\*border-width: 1px;  
    border-color: red;\*/  
    /\*border-style: solid; 实线\*/  
    /\*border-style: dashed; 虚线 大使的 \*/  
    /\*border-style: dotted; 点线 大使的 \*/  
    /\*border: 1px solid blue;\*/  
    border-top: 1px solid red; /\*上边框\*/  
    border-bottom: 2px solid green;  
    border-left: 1px solid blue;  
    border-right: 5px solid pink;  
    border: 1px solid blue; 

表格的细线边框

Table {border-collapse:collapse;}collapse单词是合并的意思，表示相邻边框合并在一起。

园角边框（CSS3）

radius半径（距离），语法格式：

border-radius: 50%

内边距(padding)

padding属性用于设置内边距，是指边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

掌握如下：
/*padding: 20px; 上下左右都是 20px*/
/*padding: 10px 20px; 上下 10 左右 20*/
/*padding: 10px 20px 30px; 上 10 左右 20 下 是 30 */
padding: 10px 20px 30px 40px; /* 上 10 右20 下 30 左 40*/

外边距（margin）

外边距实现盒子居中,可以让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素
2. 盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto,就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

文字盒子居中图片和背景区别

1. 文字水平居中是text-align:center

2. 盒子水平居中 左右margin 改为auto

   text-align: center; /* 文字居中水平 */
   margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto 就阔以了 */

   　　3.插入图片 我们用的最多 比如产品展示类

   　　 4.背景图片我们一般用于小图标背景或者超大背景图片

section img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}
aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-size: 200px 210px; /* 背景图片更改大小只能用 background-size */
background-position: 30px 50px; /* 背景图片更该位置 我用 background-position */
}

清除元素的默认内外边距

制作网页时，使用如下代码清除元素的默认内外边距：

* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}

外边距（margin）合并

　　使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

PS:行内元素只有左右边距，没有上下边距。

相邻块元素垂直外边距的合并

　　当上下相邻的两个块元素相遇时，如果上面的元素有下边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并。（也成为外边距塌陷）

嵌套块元素垂直外边距的合并

　　对于两个嵌套关系的元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

content宽度和高度

　　使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

大多数浏览器，符合CSS规范的盒子模型的总宽度和总高度的计算原则：

/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）

1、宽度属性width和高度属性height仅适应于块级元素，对行内元素无效（img和input除外）

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子大小。

盒子模型布局稳定性

按照 优先使用 宽度（width） 其次 使用内边距（padding） 再次 外边距（margin）

width > padding > margin

原因：

1. margin会有外边距合并 还有ie6下面margin加倍的bug 所以最后使用
2. Padding会影响盒子大小，需要进行加减计算其次使用
3. Width 没有问题 我们经常使用宽度剩余法 高度剩余法来做

圆角边框（CSS3）

让一个正方形，变成圆圈。

border-radius: 50%; #让一个正方形 变成圆圈

盒子阴影（CSS3）

值

描述

h-shadow

必需。水平阴影的位置，允许负值

v-shadow

必需。垂直阴影的位置，允许负值

blur

可选，模糊距离

spread

可选，阴影的尺寸

color

可选，阴影的颜色

inset

可选，将外部阴影（outset）改为内部阴影

1. 前2个属性是必须写的，其余可以省略。

2. 外阴影（outset）但是被改写 默认 想哟

   div {
   width: 200px;
   height: 200px;
   border: 10px solid red;
   /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
   /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */
   box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
   }

普通流(normal flow)

　　文档流，CSS定位机制有3种：普通流（标准流）、浮动和定位。

普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例如的情况叫做普通流布局。

什么是浮动？

　　元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。其语法格式如下：

选择器{float:属性值;}

属性值

描述

left

元素向左浮动

right

元素向右浮动

none

元素不浮动（默认值）

**

浮动详细内幕特性**

　　浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

1、浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找离他最近的父级元素对齐，但是不会超出内边距的范围。

　　浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

2、一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

3、元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

浮动的目的就是为了让多个块级元素同一行上显示。 最核心的关键点就是怎么排列的，是否占有位置。

Float 浮 漏 特

浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。

漏：加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子

特：特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次 特别的注意浮动可以使元素显示模式体现为行内块特性。

版心和布局流程

　　版心（可视区）是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px,980px,1000px,1200px等。

布局流程

　　为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）

2、分析页面中的行模块，以及每个行模块中的列模块

3、制作HTML结构

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

一般固定宽度且居中

两列左窄右宽型

<style>  
.top {  
    width: 900px;  
    height: 80px;  
    margin: 0 auto;  
}  
.banner {  
    width: 900px;  
    height: 150px;  
    margin: 0 auto;  
}  
.main {  
    width: 900px;  
    height: 500px;  
    margin: 0 auto;  
}  
.left {  
    width: 288px;  
    height: 500px;  
    float: left;  
    border: 1px solid red;  
}  
.right {  
    width: 600px;  
    height: 500px;  
    float: right;  
}  
.footer {  
    width: 900px;  
    height: 120px;  
    margin: 0 auto;  
}  
 </style>  
<div class="top"></div>  
<div class="banner"></div>  
<div class="main">  
    <div class="left">left</div>  
    <div class="right">right</div>  
</div>  
<div class="footer"></div>

通栏平均分布型

清除浮动

为什么要清除浮动

　　浮动本质是用来做一些文字混排效果的，但是被拿来用布局后，会出现问题。浮动元素不再暂用原文档流的位置，会对后面的元素排版产生影响，为了解决这个问题，就需要在该元素中清除浮动，即清除浮动后造成的影响。

清除浮动本质

清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。

清除浮动的方法

清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。在CSS中，clear属性用于清除浮动，其基本格式为：

属性值

描述

left

不允许左侧有浮动元素（清除左侧浮动的影响）

right

不允许右侧有浮动元素（清除右侧浮动的影响）

both

同时清除左右两侧浮动的影响

**

额外标签法**

　　在浮动元素末尾添加一个空的标签例如

父级添加overflow属性方法

给添加浮动的父级元素添加overflow.

可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。

优点:代码简洁

缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动

　　:after 方式为空元素的升级版，好处是不用单独加标签了,使用方法：

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

.clearfix {*zoom: 1;} /* IE6、7 专有 */

使用before和after双伪元素清除浮动

.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}