CSS初识- 选择器 &背景& 浮动& 盒子模型

时间 2020-04-29

标签 css 选择器背景浮动盒子模型栏目 CSS 繁體版

原文原文链接

# CSS初识-目标:css

> 1. 学会使用CSS选择器

> 2. 熟记CSS样式和外观属性

> 3. 熟练掌握CSS各类基础选择器

> 4. 熟练掌握CSS各类复合选择器

> 5. 熟练掌握CSS三种显示模式(inline、block、inline-block)

> 6. 熟练掌握CSS背景属性

> 7. 熟练掌握CSS三大特性(层级性、继承性、优先性)

> 8. 熟练掌握CSS盒子模型(border、padding、margin)

> 9. 熟练掌握CSS浮动（left、right）

> 10.熟练掌握CSS定位

CSS初识

　　CSS:cascading style sheets，css样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。html

　　CSS以HTML为基础，提供丰富的功能，如字体、颜色、背景的控制及总体排版等，并且还针对不一样的浏览器设置不一样的样式。chrome

一、引入CSS样式（书写位置）

CSS能够写到那个位置？是否是必定写到html文件里面呢？

1.1 内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并用style标签订义，语法：浏览器

<head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head>

1.2 行内式（内联样式）

　　内联样式，又有人称行内样式、行间样式、内嵌样式，是经过标签的style属性来设置元素的样式，其基本语法格式以下：ide

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

1.3 外部样式表（外链式）

链入式是将全部的样式放在一个或多个以.css为扩展名的外部样式表文件中，经过link标签将外部样式表文件连接到HTML文档中，其基本语法格式以下：工具

<head> <link href="CSS文件的路径" rel="stylesheet" /> </head>

Link：单标签，且必须指定link标签的三个属性：href、type、rel。布局

href定义所连接外部样式表文件的URL，能够是相对路径，也能够是绝对路径。
type:定义所连接文档的类型，在这里须要指定为：type/css，表示连接的外部文件。
rel:定义当前文档与被连接文档之间的关系，在这里须要指定为：stylesheet,表示被连接的文档是一个样式表文件。

CSS样式规则

在上面的样式规则中：字体

选择器用于指定CSS样式做用的HTML对象，花括号内是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“：”链接
多个“键值对”之间用英文“；”进行区分

二、选择器（重点）

2.1 CSS基础选择器

每一条CSS样式声明（定义）由两部分组成，以下：url

2.1.1 标签选择器（元素选择器）spa

　　标签选择器就是html标签名称做为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。好比div span,其基础语法格式以下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

2.1.2 Class(类)选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式以下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 标签调用的时候用 class="类名" 
eg: <head> <style>  .blue { color: blue;
            } </style> </head> <body> <span class="blue">G</span> </body>

类选择器最大的优点是能够为元素对象定义单独或相同的样式,能够选择一个或多个标签。

2.1.3 多类名选择器

　　样式显示效果跟HTML元素中的类名前后顺序没有关系，受css样式书写的上下顺序有关。

且各个类名中间用空格隔开。

<div class="pink fontWeight font20">亚瑟</div> <div class="font20">刘备</div> <div class="font14 pink">安其拉</div> <div class="font14">貂蝉</div>

2.1.4 id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式以下：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类和ID选择器的区别

相同点：能够应用于任何元素

不一样点：ID选择器只能在文档中使用一次。而类选择器可使用屡次：

可使用类选择器词列表方法为一个元素同时设置多个样式。

咱们能够为一个元素同时设多个样式，但只能够用类选择器的方法实现，ID选择器是不能够的（不能使用 ID 词列表）：

2.1.5 通配符选择器

通配符选择器用“*”号表示，他是全部选择器中做用范围最广的，能匹配页面中全部的元素。其基本语法格式以下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
eg:
* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

2.2 复合选择器

　　复合选择器是由2个或多个基础选择器，经过不一样的方式组合而成的，目的是能够选择更准确更精细的目标元素标签。

2.2.1 交集选择器

标签连写 div.one(表示类名为one的div标签) div#two

　　交集选择器是而且的意思，既...又的意思，由2个选择器构成，第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。

2.2.2 并集选择器

　　用逗号隔开，集体声明，相一样式。

　　并集选择器是和的意思，只要逗号隔开的，全部选择器都会执行后面样式。

好比：.one, p , #test {color: #F00;} 表示.one和p和 #test 这三个选择器都会执行颜色为红色。一般用于集体声明。

2.2.3 后代选择器

　　用空格隔开，选取子孙后代的。

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代。

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。

选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你能够理解为做用于子元素的第一代后代。然后代选择器是做用于全部子后代元素。后代选择器经过空格来进行选择，而子选择器是经过“>”进行选择。

总结：>做用于元素的第一代后代，空格做用于元素的全部后代。

2.2.4 子元素选择器

用>隔开，选取亲儿子

还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。

Class=food下的子元素li加入红色实线边框

2.2.5 伪类选择器

　　伪类选择器用于向某些选择器添加特殊的效果。好比给连接添加特殊效果，好比能够选择第一个，第n个元素。

连接伪类选择器： 标签选择器:link /*未访问的连接*/ 标签选择器:visited ：/*已访问的连接*/ 标签选择器:hover /*鼠标移动到连接上*/ 标签选择器:active /*选定的连接*/ eg： a {   /* a是标签选择器 全部的连接 */ font-weight: 700; font-size: 16px; color: gray;
        } a:hover {   /* :hover 是连接伪类选择器 鼠标通过 */ color: red; /* 鼠标通过的时候，由原来的 灰色 变成了红色 */
}

注意写的时候，顺序不要写反了，按照lv ha顺序进行编写。

2.2.6 属性选择器

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每一个元素。
[attribute$=value]	匹配属性值以指定值结尾的每一个元素。
[attribute*=value]	匹配属性值中包含指定值的每一个元素。

2.2.7 紧邻兄弟选择器

2.2.8 分组选择符

当你想为html中多个标签元素设置同一个样式时，可使用分组选择符（，）

三、CSS字体样式属性

3.1 font-size:字号大小

font-size属性用于设置字号，该属性的值可使用相对长度单位，也可使用绝对长度单位。

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素、最经常使用，推荐使用
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

3.2 font-family:字体设置

font-family属性用于设置字体。网页中经常使用的字体有宋体、微软雅黑、黑体等。

如今网页中广泛使用14px+
尽可能使用偶数的数字字号。
各类字体之间必须使用英文状态下的逗号隔开
中文字体须要加英文状态下的引号，英文字体通常不须要加引号。当须要设置英文字体时，英文字体必须位于中文字体以前。
若是字体名称中包含空格、#、$等符号，则该字体必须加英状态下的单引号或双引号，例如：font-family、”times new roman”
尽可能使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

3.3 CSS Unicode字体

黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

3.4 font-weight:字体粗细

　　字体加粗除了用b和strong标签以外，可使用CSS来实现。

Font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900(100的整数倍)

font-weight:400 /*400 = normal*字体粗细/ font-weight:700 /*700 = bold*/

3.5 font-style：字体风格

　　字体倾斜除了用i 和 em标签以外，可使用CSS来实现，可是CSS是没有定义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值以下：

normal:默认值，浏览器会显示标准的字体样式

Italic:浏览器会显示斜体的字体样式

Oblique:浏览器会显示倾斜的字体样式

3.6 font：综合设置字体样式（重点）

　　font属性用于对字体样式进行综合设置，其基本语法格式以下：

选择器{font: font-style font-weight font-size/line-height  font-family;} #使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。 #注意：其中不须要设置的属性能够省略（取默认值），但必须保留font-size和font-family属性，不然font属性将不起做用。

四、CSS外观属性

4.1 color:文本颜色

　　color属性用于定义文本的颜色，其取值方式有以下3种：

预约义的颜色值，如red,green,blue等
十六进制，如#FF0000
RGB代码，如红色能够表示rgb（255,0,0）

4.2 line-height:行间距

　　line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，通常称为行高。Line-height经常使用的属性主要有3种，像素px,相对值em和百分比%，最经常使用的是px，通常状况下，行距比字号大7.8个像素左右就能够了。

4.3 text-align:水平对齐方式

　　text-align属性用于设置文本内容的水平对齐，至关于html中的align对齐属性，其可用属性值以下：

Left:左对齐（默认值）

right：右对齐

Center：居中对齐

text-aline是让盒子里面的内容水平居中，而不是让盒子居中对齐

4.4 text-indent:首行缩进

　　text-indent属性用于设置首行文本的缩进，其属性值可为不一样单位的数值、em字符宽度的倍数，或相对于浏览器窗口宽度的百分比%，容许使用负值，建议使用em做为设置单位。

1em就是一个字的宽度，若是是汉字的段落，1em就是一个汉字的宽度。

4.5 text-decoration:文本的装饰

　　text-decoration:一般咱们用于给连接修改装饰效果。

值	描述
none	默认，定义标准的文本，取消删除线
underline	定义文本下的一条线，下划线也是咱们连接自带的，下划线
overline	默认文本上的一条线，上划线
line-though	定义穿过文本下的一条线,删除线

五、开发者工具（chrome）

　　左边是HTML元素结构，右边是CSS样式。CSS+滚轮能够放大开发者工具代码大小。

六、标签显示模式(display)

　　HTML标签通常分为块标签和行内标签两种类型，也称为块元素和行内元素。

6.1 块级元素(block)

　　每一个块元素一般独自占一整行或多整行，能够对其设置宽度、高度、对其等属性，经常使用语网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特色：

老是重新行开始
高度，行高、外边距以及内边距均可以控制
宽度默认是容器的100%
能够容纳内联元素和其余块元素

6.2 行内元素(inline)

　　行内元素（内联元素）不占有独立的区域，靠自身字体大小和图像尺寸来支撑结构，通常不能够设置宽度、高度、对齐等属性，经常使用语控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素特色：

和相邻行内元素在一行
高、宽无效，但水平方向的padding和margin能够设置，垂直方向无效
默认宽度就是它自己内容的宽度
行内元素只能容纳文本或则其余行内元素。

6.3 行内块元素(inline-block)

　　在行内元素中有几个特殊的标签：<img />、<input>、<td>，能够对它们设置宽高和对齐属性。

行内块元素特色：

和相邻行内元素（行内块）在一行上，可是之间会有空白缝隙
默认宽度就是它自己内容的宽度
高度，行高、外边距以及内边距均可以控制

6.4 标签显示模式转换display

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

6.5 行高的测量

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

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

若是行高 = height 高度文字会垂直居中

若是行高 > 高度文字会偏下

若是行高 < 高度文字会偏上

七、CSS三大特性

7.1 CSS层叠性

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

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

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

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

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背景

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

position后面能够跟方位名词，他们之间能够没有上下顺序
Position若是只写一个方位名词，另一个默认是居中的
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重点）

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）

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

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

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

实际工做中经常使用这种方式进行网页布局，示例代码以下：

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

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

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

盒子水平居中左右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为内容宽度）

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

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

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

盒子模型布局稳定性

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

 width > padding > margin

缘由：

margin会有外边距合并还有ie6下面margin加倍的bug 因此最后使用
Padding会影响盒子大小，须要进行加减计算其次使用
Width 没有问题咱们常用宽度剩余法高度剩余法来作

圆角边框（CSS3）

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

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

盒子阴影（CSS3）

值	描述
h-shadow	必需。水平阴影的位置，容许负值
v-shadow	必需。垂直阴影的位置，容许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改成内部阴影

前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);            
}

十、浮动（float）

普通流(normal flow)

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

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

什么是浮动？

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

选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

浮动详细内幕特性

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

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

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

二、一个父盒子里面的子盒子，若是其中一个子级有浮动的，则其余子级都须要浮动。这样才能一行对齐显示。

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

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

Float 浮漏特

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

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

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

版心和布局流程

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

布局流程

　　为了提升网页制做的效率，布局时一般须要遵照必定的布局流程，具体以下：

一、肯定页面的版心（可视区）

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

三、制做HTML结构

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

通常固定宽度且居中

 <style> .box { width: 900px; border: 1px dashed #ccc; margin: 0 auto;
    } .top { height: 80px;   
    } .banner { height: 120px;
        /*margin: 0 auto;*/ margin: 5px auto;
    } .main { height: 500px;
    } .footer { height: 100px;
        /*margin: 0 auto; margin-top:5px;*/ margin: 5px auto 0;
    } </style> <div class="top box">top</div> <div class="banner box">banner</div> <div class="main box"></div> <div class="footer box"></div>

View Code

两列左窄右宽型

 <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>

View Code

通栏平均分布型

<style> * { margin: 0; padding: 0;
    } .top { height: 80px;
    } .top-inner { width: 900px; height: 80px; margin: 0 auto;
    } .banner { width: 900px; height: 150px; margin: 0 auto;
    } .banner li { float: left; width: 217px; height: 150px; margin-right: 10px;
    } .one {
    } .two {
    } .three {
    } .banner .four { margin-right: 0; float: right;
    } .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 class="top-inner">123</div> </div> <div class="banner"> <ul> <li class="one">1</li> <li class="two">2</li> <li class="three">3</li> <li class="four">4</li> </ul> </div> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer"></div>

View Code

清除浮动

为何要清除浮动

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

清除浮动本质

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

清除浮动的方法

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

属性值	描述
left	不容许左侧有浮动元素（清除左侧浮动的影响）
right	不容许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

额外标签法

　　在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其余标签br等.

父级添加overflow属性方法

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

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

优势:代码简洁

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

使用after伪元素清除浮动

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

 .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden;  } .clearfix {*zoom: 1;}   /* IE六、7 专有 */

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

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