文章目录
1.CSS的引入
1.1什么是css？
使用一个“定义列表”的简单页面，来对比实现有css和没有css的时候的不同做法。
对比HTML和CSS改变文字大小
1.2为什么需要css？
css，是这三个单词“Cascading Style Sheet"的首字母缩写，含义是“层叠样式表”。
css专门负责网页的外观表现，美化页面的！
2.css入门
2.1css基本语法
css的基本语法形式如下所示：
选择器{属性名：属性值；属性名：属性值；……}<style>
选择器 { 属性名1：值1； 属性名2：值2； … }<style>
注意：
1.在css中，属性和值中间使用冒号隔开。
2.在css语法中，所有的特殊符号都是英文输入法下的符号。
2.2css简单的选择器
选择器的作用是“确定要进行样式设定的标签（元素）”。
选择页面元素的工具
2.2.1通配符选择器
2.2.2标签选择器
标签名{属性名：属性值；属性名：属性值；…}
2.2.3类选择器
说明：
类（class）也是任何一个标签都可以使用的通用属性，但可以重名。
举例：
`<p class=”cc1” >.....</p>
<hr>
<p class=”cc1” >.....</p>
<hr>
<div class=”product” >......</div>`
2.3css属性
2.3.1概念
属性就是特征，就是描述性信息。就像人的特征信息有：姓名，性别，学历，年龄，身高，体重等等。
每个特征自然具有相应的特征值（数据）。
属性名和数据值，构成“一对”，通常会称为“名值对”。
css属性跟html属性对比如下：
html的属性写法： <标签名 属性1=”值1” 属性2=”值2” … >
css的属性写法： 选择器{ 属性1：值2； 属性2：值2； … }
2.3.2简单常用的几个css属性：
color： 文字颜色
font-size： 文字大小【px】
font-family：字体，例如：微软雅黑，黑体，宋体，仿宋体
font-style：就是设置字形是“正体”还是“斜体（rtalic）”
font-weight：设置是否粗体【100-900】
background：背景色
border：设置边框
text-decoration：【underline下划线，line-through中划线，overline上划线，none不设置】设置“装饰线”（下划线，中划线，上划线）
text-align：对齐
line-height：行高
width：宽
height：高
2.3.2.1Font简写：
2.3.2.2Color：颜色
2.3.3颜色
2.3.3.1预定义方式
预定义方式：
英文单词：red，blue，green，yellow，pink，purple
2.3.3.2十六进制方式
十六进制方式
16进制表示法：
形式：#6个16进制数字！
前两个数字表示“红的配比”，中间两数字表示绿的配比，后两个数字表示蓝的配比。
举例：
color: #FF0000;
color: #0F0000;
color: #110000;
color: #123456;
color: #008800;
color: #0000FF;
2.3.3.3RGB方式
2，RGB表示法：
将一个颜色，使用红（R，red）， 绿（G，green）， 蓝（B，blue）来表示。
这3个叫做“基本颜色”，都按0-255分为256个层级。
所有颜色，都可以使用这3个颜色的不同层级（配比）来调配而成。
形式：rgb(红的配比， 绿的配比，蓝的配比）；
举例：
color: rgb(100, 30, 70),
color: rgb(255, 0, 0) //这是红色
color: rgb(0,255, 0); //这是绿色
color:rgb(0, 0, 255); //蓝色
color:rgb(255, 255, 0); //黄色
2.3.3.4RGBA方式：
RGBA表示法：
A代表“透明度”，值从0到1的小数。0表示全透明。1表示不透明，此时就是RGB颜色
形式：rgba(红的配比， 绿的配比，蓝的配比，透明度）；
举例：
color: rgba(100, 30, 70, 0.5),
color: rgba(255, 0, 0, 0.66) //这是红色
2.4css样式分类
2.4.1内联样式
2.4.2外联样式
2.4.3行内样式
3.选择器详解
3.1选择器综述
3.1.1选择器分类
CSS中的选择器，大致可以分为以下几类：
基础选择器
关系选择器
属性选择器
伪类选择器
伪元素选择器：
3.1.2选择器语法的符号含义
E： 代表“Element”，即元素；
S： 代表“Seletor”，即选择器；
attr： 代表“attribute”，即属性；
3.2基础选择器
基础选择器是最早的css标准（css1.0）中规定的选择器，最简单易懂。它是通过特定标识或符号来确定所选元素。
3.2.1标签选择器：E
标签选择器的形式上是一个标签名（一个单词）。
比如：
P{ … }
div{ … }
img{ … }
3.2.2类选择器：.class类选择器的形式上是一个英文点（.）后面紧跟一个类名（className）。
类名是在标签上通过class属性而设定。我们可以自己设定类名。
如下所示：
<style>
.cc{color: red; font-size: 18px; width: 500px; }
</style>
<p class=”cc”> 这是一个信息化的时代</p>
注意：
1， 一个类可以供多个标签使用！
2，一个标签可以同时设定多个类，用空格隔开。
这样设定后，多个类所设定的属性都可以作用在该标签上。
类似这样：
<style>
.cc1{color: red; font-size: 18px; width: 500px; }
.cc2{font-weight: bold; }
</style>
<p class=”cc1 ccs2”> 这是一个信息化的时代</p>
<div class=”cc1” >。。。。</div>
3.2.3id选择器：#id
id选择器的形式上是一个英文井号（#)后面紧跟一个id名。
id名是在标签上通过id属性而设定。我们可以自己设定如下所示：
<style>
#p1{color: red; font-size: 18px; width: 500px; }
</style>
<p id=”p1”> 这是一个信息化的时代</p>
特别注意：
一个网页中的id不能“重名”（但class名可以重复）。
id名。
3.2.4通配符选择器：*
通配符选择器非常简单，就一个星号(*)，表示“所有标签”，同得不多。
*{ …声明…}
表示所有标签都应用该css样式的设定。
3.3.关系选择器
3.3.1子代选择器：S1>S2
匹配S1中的下一级S2。下一级就是“子级”，或子代。
其中S1，S2都可以是独立使用的选择器（比如id选择器，class选择器，标签选择器等）。
比如S1为div， S2为p，即形式为“div > p”，就表示找出div中的所有子级p标签。
又比如：
#p1>a{ … } ：表示找出id为p1的标签中的所有子代a标签。
.cc>p{ … } ：表示找出class为cc的标签中的所有子代p标签。
#p2>.cc2>img{ … } ：表示找出id为p2中的子代的class为cc2中的所有子代img标签。
3.3.2.后代选择器：S1 S2
匹配S1内部的所有后代S2。
此时就不仅仅局限于子代标签了，还包括孙代，曾孙代，等等。
简单说，就是找出放在S1所选中的标签中的所有S2所选中的标签。
比如：
div p{ … } ：匹配div中的所有后代p标签，即凡是放在div中的p标签都会找出来。
#p1 a{ … } ：匹配id为p1的标签中的所有a标签，即只要a标签在#p1中就可以。
.cc p{ … } ：匹配class为cc的标签中的所有p标签，即只要p标签在.cc中就可以。
#p2 .cc2 img{ … } ：匹配id为p2中的class为cc2中的所有img标签。
3.3.3相邻选择器：S1+S2
匹配S1后面紧挨着的同级（兄弟）元素S2。
3.3.4兄弟选择器：S1~S2
匹配S1后面的所有同级（兄弟）元素S2
3.3.5分组选择器
分组选择器即并列选择器，标签名使用,号分开；对于相同属性的标签，可以使用并列选择器
3.4属性选择器
属性选择器是通过元素的属性的特征信息来确定所选元素。
3.4.1[attr]
匹配具有所给定属性名称的所有标签。
其中attr是一个“示意性符号”，表示“属性名”。
比如：
[color] { background: yellow; } //能选中具有color属性的所有标签。
[width] { border: 1px solid red; } //能选中具有width属性的所有标签。
3.4.2[attr=“val”]
匹配具有某个属性且属性值为给定值的标签，全等。
比如：
[color=”red”] { background: yellow; } //能选中具有color属性且值为”red”的所有标签。
[width=”100”] { border: 1px solid red; } //能选中具有width属性且值为”100”的所有标签。
<hr color=”red” />
<table width=”100” >....</table>
3.4.3[attr~=“val”]
匹配具有某个属性且属性值包含所给定单词的标签。
注意：
1，必须是一个“单词”形式，比如属性值为”a dog”，则使用”dog”可以匹配，而使用”do”不能匹配。
2，对于中文，除非有明确的空格，否则一句连续的句子（含中文标点符号）也只能算一个单词。
3.4.4[attr*=“val”]
匹配具有某个属性且属性值以给定的字符开头的标签。
匹配具有某个属性且属性值包含给定的字符的标签。
<p title=”a dog”>...</p>
[title*=”dog”]{ .... } //可以选中上面那个p标签
[title*=”do”]{ ..... } //也可以选上
3.4.5.[attr^=“val”]
匹配具有某个属性且属性值以给定的字符开头的标签。
<p title=”a dog”>...</p>
[title^=”dog”]{ .... } //选不上
[title^=”a”]{ .... } //能选上
[title^=”a d”]{ ..... } //也可以选上
3.5伪类选择器
类选择器使用点(.),而伪类选择器是通过单冒号（：）和特定的具有某种含义的单词来确定所选元素。
所谓伪类选择器，是相对于“类选择器”来说的，对比如下：
类选择器：
说明：类的名称是由我们程序员来设定的，符合命名规范就行。
形式：.类名称{ … }
伪类选择器：
说明：伪类的名称是css标准中所预先设定的，我们不能自己设定。可用的伪类名不多。
形式：:伪类名称{ … }
下面分别介绍一些常用的伪类选择器（伪类名）。
3.5.1：link，:visited,:hover,:active,
这4个伪类主要用于表示一个链接（也就是a标签）的4种不同状态。
它们可以设定一个链接在不同状态下的外观表现（样式表现）。
:link ——表示一个链接初始时候的状态。
:visited ——表示一个链接在访问（点击）过之后的状态。
:hover ——表示一个链接在“鼠标移上去”（鼠标悬停）的时候的状态。
:active ——表示一个链接在“活动状态”的时候的状态，通常就是点击的瞬间（按住不放能看到）。
注意：
1，:hover可以用于其它标签，并且经常用！
2，对于a链接的这4个状态，他们有顺序问题，必须按上述顺序才有合理效果（lvha，Lv)
3.5.2E:focus
表示一个元素在成为可输入状态（获得焦点）的时候，改变状态，主要用于表单元素。
其中“E”表示某个元素（或某个选择器所选中的元素）。
例：选中后，加一个红色的边框；
3.5.3 E:first-child, E:last-child, E:only-child, E:nth-child(n)
这几个伪类用于表示（或选中）“具有某种特征的子元素E”。
E:first-child ——匹配作为父元素的第一个子元素E。
E:last-child ——匹配作为父元素的最后一个子元素E。
E:only-child ——匹配作为父元素的唯一一个子元素E。相对于父标签中只有一个子标签时使用；
E:nth-child(n) ——匹配作为父元素的第n个子元素E。括号中的n是一个具体数字
还可以这样用：nth-child(2n+1）表示奇数项， nth-child(2n+2)表示偶数项
举例：
li:first-child{ … } //表示作为第一个子元素的li标签
td:last-child{ … } //表示作为最后一个子元素的td标签
p:only-child{ … } //表示作为父元素中只有这一个子元素的p标签
li:nth-child(2){ … } //表示作为第2个子元素的li标签
示例1：
3.5.4.E:empty，E:checked，E:enabled，E:disabledE:empty
——匹配元素内部为空（没有内容）的元素。
“内容”指的是一个标签内是否有其他html代码或文字。显然，单标签内是不可能有内容的。
E:checked
——匹配被选中的元素（用于input且type为radio或checkbox的时候）
E:enabled
——匹配“可用的/有效的元素”（用于表单元素）。
E:disabled
——匹配“不可用的/有效的元素”（用于表单元素）。
示例：
3.6伪元素选择器
伪元素选择器是通过双冒号（：：）和特定的具有某种含义的单词来确定所选元素。
伪元素选择器通常是“本没有这个元素（标签）”，但会创建出一个隐性元素并对其进行样式设定。
伪元素选择器又称为“伪对象选择器”。
3.6.1 E：before
表示在元素E的内部的最前面创建一个元素
其中必须写上一个属性：content:”内容”;
3.6.2.E::after
表示在元素E的内部的最后面创建一个元素（伪元素）。
其中必须写上一个属性：content:”内容”;
3.6.3.E::selection
表示将元素E中“选中的文字”单独作为一个元素
3.6.4.E::first-letter
表示元素E中的“第一个字符或第一个汉字”可以单独作为一个元素
3.6.5.E::first-line
表示元素E中的“第一行”可以单独作为一个元素
3.7常见选择器的组合
3.7.1.E.className
举例：
div.c1{ … }
p.cc2{ … }
注意：他们是“紧挨在一起的”！ 否则就成为了后代选择器了
3.7.2.E#id
div#id1{ … }
p#id2{ … }
3.7.3.E[属性选择器]
[src] //找所有有src属性的标签
img[src] //找img标签并且有src属性
img[src*=”dog”] 找img标签并且有src属性并且属性中包含“dog”这个字符
3.7.4.并集选择器：S1, S2
两个选择器，可以使用一个英文逗号（,）连接起来。
表示这两个选择器，都使用同样一个样式设定（属性设定）。
比如：
p, div{ … }
#price, .addr{ … }
p.cc, .cc, div .cc2{ … }
3.8css样式的特性
3.8.1.层叠性
所谓层叠性，是指对同一元素同一属性的设定，后设定的某个样式（属性），会覆盖之前设定的样式。
比如：
.cc1{ color: red;}
.cc1{color: blue;}
<div class=”cc1”>文字内容</div>
则class为cc1的元素中的文字颜色就是blue，即后者覆盖了前者的设定。
分两种情况：
１，两个相同的选择器，设置了同样的属性，后者覆盖前者——层叠性体现之一。
２，两个不同但同级优先性的选择器，设置了同样的属性，也是后者覆盖前者——体现之二。
3.8.2继承性
所谓继承性，是指对某个元素所设定的样式，不但影响该元素本身，还可能影响该元素的后代元素。
比如：
.cc1{color:red;}
<div class=”cc1”>
文字1
<p>文字2</p>
</div>
则此时文字1和文字2实际都是红色。
3.8.3.优先性
所谓优先级，就是指一个标签的显示效果（样式表现），可能受若干个因素的影响，但哪一个因素的影响大，则最终效果就按该因素的设定，也就是“更优先”的意思。
比如：
#pro{ font-size: 20px; }
.ppp{ font-size: 18px; }
<div id=”pro” class=”ppp”> 小米Note 4 </div>
则此时该文字的大小实际是20px。
伪元素选择器 > !important > 行内样式 > id选择器 > 类选择器（或伪类选择器） > 元素选择器 > * > 继承样式 > 浏览器默认样式
其中，伪元素选择器又有： ::first-letter > ::selection > ::first-line
4.有关文字的属性
4.1字体属性
常用字体属性如下所示：
属性名称 含义与说明 举例 其他
color 文字的颜色，又称为“前景色” color: red;
color:#ff0000;
color:rgb(255, 50, 100)
color:rgba(250,0,0,0.7) 颜色值可以有多种写法
font-family 文字的字体，比如宋体，黑体，微软雅黑，隶书。 font-family: 宋体；
font-family: 微软雅黑，宋体；
font-family: “Times New Roman”; 可以设定多个值，浏览器优先使用前面的，没有再依次找后面的，或使用内部字体。
font-size 文字的大小 font-size: 14px; px是长度单位，表示“像素”
font-style 文字的样式（决定字体是正体还是斜体） font-style: itatic;
font-style: normal;（默认值） normal（正常字体，默认值）；itatic（斜体）
font-weight 文字的粗细度 font-weight: bold;
font-weight:bolder; 有4个值可用：
normal, bold, bolder, lighter
font 上述所有文字属性的综合属性。
font:red 宋体 14px italic bold; 属性值依次写出，空格隔开，不分顺序
font综合属性的语法：
font：[ <’ font-style ‘> || <’ font-weight ‘> ]? <’ font-size ‘> [ / <’ line-height ‘> ]? <’ font-family '> ];
4.2文本属性
常用属性有：
属性名称 含义 举例 其他说明
text-align 一段文字的对齐方式 text-align: center; 可用值：left， center， right
text-decoration 一段文字的”修饰线” text-decoration：underline 可用值：underline（下划线），overline（上划线），line-through（中划线）
text-indent 设置一段文本的“首行缩进”的宽度（距离） text-indent: 24px; px是长度单位，表示“像素”
line-height 设定文字的“行高” line-height: 30px;
line-height: 2em; em是长度单位，表示“字高”
letter-spacing 设定文字的“字符间距” letter-spacing: 3px; 注意：中文的每个字都算一个字符
word-spacing 设定文字的“单词间距” word-spacing: 15px; 注意：单词通常是以“空格”隔开的。因此，连续的中文即使很长也只能算一个单词。
5.有关盒子的属性
5.1.盒子概述
所谓盒子，就是将html网页中的标签在网页版面中所占据的平面范围，抽象出来的一个“视觉形状”。
一个最简单的理解就是：几乎所有标签，都可以看做是一个“矩形盒子”，具有一定的宽高（区域）。
总体上来说，一个盒子，是由若干个部分构成的，从内到外依次包括：
盒子内容区，内边距区，边框，外边距区
图示如下：
content：内容
padding：内边距，又称为内补白，是一片空白区域
border：边框
margin：外边距，又称为外补白，也是一片空白区域
top，right，bottom，left：上，右，下，左
特别注意：
1，一般情况下，一个盒子中放置内容或其他元素（元素也是盒子），实际是放在内容区的。
2，平常我们看不到内边距，边框和外边距，是因为他们默认都是0（宽度，或厚度）。
5.2.盒子的宽高属性width和height
设置盒子的宽高属性，实际上设置的是盒子内容区的宽高。比如：
div{
width: 100px;
height: 100px;
}
除了这个基本宽高属性，还有以下4个范围限定性宽高属性，有时候也会用：
min-width： 设定最小宽度
max-width： 设定最大宽度
min-height： 设定最小高度
max-height： 设定最大高度
5.3边框属性border
边框属性就是设置一个盒子的边框线的具体特性。
边框线的特性有3个：
border-style：
线型，属性值通常有：solid(实线)， dashed(虚线)， dotted(点线)
border-width：
线的粗细，长度单位，比如1px
border-color：
线的颜色，颜色值，比如red， rgb(255, 0, 0)， #FF3366
又由于一个盒子的边框有4个方位(top, right, bottom, left)，则总体上就至少有12个边框属性，形式为：
border-方位-特性，比如：
border-top-style， border-top-width，border-top-color， border-right-width， border-left-color，等等。
示例：
border-top-style: solid;
border-right-color: #FF0000;
border-left-width: 2px;
应用中，最常用的其实是“border”这一个最大的综合属性，它一次性设置4个边的3个特性，比如：
border： 1px solid red; //表示4变的边框线都是宽度为1px的红色实线。
5.4.内边距属性padding
含义：
内边距是指在盒子结构中，盒子的边框线和内容之间的一段空白区域（内容放不进去）。
我们能设置的就是这个空白区域的大小（宽度）。
同样分4个方向，分别可以单独设置：
padding-top：1px； //上内边距
padding-right：2px； //右内边距
padding-bottom：4px； //下内边距
padding-left：8px； //左内边距
还有一个综合属性：
padding：宽度1 [宽度2] [宽度3] [宽度4]；
这个综合属性可以设置1-4个值，不同个数的值，其含义不同，如下所示：
1个值： 表示4个方向都是这个值。
2个值： 第1个表示上下边距的值，第2个表示左右边距的值。
3个值： 第1个表示上边距的值，第2个表示左右边距的值，第3个表示下边距的值。
4个值： 依次代表top， right， bottom， right这4个方向的内边距的值。
记忆：
按给出值的个数，按顺时针依次给上，右，下，左去“赋值”
5.5.外边距属性margin
含义：
外边距是指在盒子结构中，盒子的边框线，跟盒子的外部其他元素之间的一段空白区域。
我们能设置的就是这个空白区域的大小（宽度）。
它的属性设置和含义，跟内边距（padding）非常类似：
margin-top：1px； //上外边距
margin-right：2px； //右外边距
margin-bottom：4px； //下外边距
margin-left：8px； //左外边距
margin：宽度1 [宽度2] [宽度3] [宽度4]；
做法1（不带边框）：
做法2（带边框）：
外边距的“重叠性”：
当两个垂直方向的外边距（即margin-top和margin-bottom）挨在一起的时候（就是垂直方向上相邻），则这两个外边会“重叠在一起”，表现为只有更大的那个外边距的高度(本来“按理”是两个相加的高度)。
5.6.背景属性background
含义：
背景是指在盒子结构中，衬托在边框线范围以内的背景颜色或背景图。
可以设置背景颜色，或背景图，或同时设置。其中背景图有多项参数可设置。
主要的背景属性设置有：
设置背景颜色：
background-color：yellow;
设置背景图：
background-image：url(图片路径); //注意，图片路径是相对于当前网页或css文件(对外部样式来说)
设置背景图的位置（有背景图的前提下有效）
background-position：水平位置 [，垂直位置]
说明：
1，如果不设置该属性，默认值为“0,0”，即在盒子的左上角。
2，可以设置1个值或2个值；设置1个值的时候，第二个默认为center（居中）。
3，水平位置：可以设置为长度值，或百分比，或以下固定值：left/center/right。
4，垂直位置：可以设置为长度值，或百分比，或以下固定值：/top/center/bottom
设置背景图是否重复（有背景图的前提下有效）：
background-repeat：属性值1 [,属性值2]； //有以下几个属性值可用：
repeat： 重复，默认值；
no-repeat： 不重复；
repeat-x： 只在x方向重复；
repeat-y： 只在y方向重复；
背景综合属性background：
可以同时设置上述几个有关背景的属性，相互之间用空格隔开，比如：
background：yellow； 只设置背景颜色；
background：yellow url(./images/bg.jpg) no-repeat；
background：yellow url(./images/bg.jpg) repeat-y lelft top；
background：yellow url(‘/images.bg.jpg) repeat no-repeat 5px 10px；
5.7.轮廓属性outline
含义：
轮廓指的是盒子边框线外面再套一层“修饰性”线条，该线条只有视觉效果，不占版面空间。
实际上，如果有外边距（margin），轮廓线是可以跟margin有重叠的。
轮廓属性主要有：
outline-width： 轮廓线宽度
outline-style： 轮廓线线型
outline-color： 轮廓线颜色
outline-offset： 轮廓线距离边框线的距离（间隙）
6.有关布局的属性
6.1布局属性
6.1.1.盒子的显示效果属性display
含义：
指设置一个盒子（元素，标签）在网页中的基本显示特性，最常见的就是显示为块元素特性还是行内元素特性。
tip：通过这个属性，则所有表现型元素，都可以任意将其作为块元素或者行内元素来使用！
常用的属性值有：
block： 显示为块状元素
inline： 显示为行内元素
block-inline：显示为行内块元素
含义：整体表现为块元素(不会自动折行)，但可以跟其他行内元素并行在一行(表现为行内元素)。
说明：一个img就是典型的行内块元素（它本身不会折行，但一行可以放置多个）。
none： 不显示（隐藏元素）
关于元素按显示特性分类：
块状元素：
元素独占“一行”。
典型标签：div, p, h1~h6, pre, hr, ul, ol, li, dl, dt, dd, table。
行内元素：
元素在一行内从左到右“流式显示”，直到碰到行尾，再自动换行下一行显示。
典型元素：span, a, b, strong, i, font, em,
行内块元素：
元素本身不换行（不折断），但只要能显示得下，则一行可以显示多个（跟行内元素一样）。
典型元素：img, input, select, textarea, button, video, audio
特别注意：
1，行内元素不能设置宽高值。行内元素的宽高值由其中的内容多少、文字大小和行高决定。
2，行内元素不能设置上下外边距和上下内边距（实际可以设置，但无效，不占空间）。
3，行内元素可以设置边框，但上下边框不占空间（左右边框会占空间）。
4，行内块和块元素都具有盒子的所有属性，唯一区别是行内块可以多个出现在一行中。
6.1.2.浮动属性float
6.1.2.1.浮动的含义与作用：
浮动就是让一个元素往左或右边“尽量挤靠”，以使其周边文字（行内元素）可以围绕该浮动元素显示。
其典型的表现就是一张图片向左对齐（align=”left”）的时候，图片标签前后的文字都能够绕着图片展示。
浮动属性float的值包括：
left（向左浮动）， right（向右浮动）， none（不浮动）。
语法：
float：left； 或 float：right；
6.1.2.2.浮动的特性：
1，对行内元素来说：浮动元素会先于同一行中的行内元素而占据其所设定方向的水平空间；
2，对块状元素来说：浮动元素相当于“浮起来了”，块状元素会被浮动元素“遮挡”；
3，多个浮动元素会依次往设定的方向“挤靠”，直到放不下，再往“下一行”，继续“挤靠”；
4，浮动元素往下一行挤靠时，如碰到“突出物”，则会被“卡住”，但仍然按挤靠规则进行显示；
5，浮动盒子失去“垂直支撑力”，表现为不占它外层盒子高度，但仍然有宽度；
案例：
对块状元素来说：浮动元素相当于“浮起来了”，块状元素会被浮动元素“遮挡”：
代码如下：
案例：
多个浮动元素会依次往设定的方向“挤靠”，直到放不下，再往“下一行”，继续“挤靠”：
代码：
6.1.2.3.浮动的清除：
当一个盒子内部出现浮动元素，则该盒子不会被该浮动元素“撑高”，也就是说，父盒子失去了理应包住子盒子的高度。
这通常都不符合正常的文档布局的需要——正常的需要就是外层盒子需要包住内层盒子。
——清除浮动。
使用属性clear，有常见的3个值：
clear: left:表示该元素左边不要出现浮动元素；
clear: right：表示该元素右边不要出现浮动元素；
clear:both：表示该元素两边都不要出现浮动元素；——这是最常见的需求（场景）。
6.1.3.溢出属性overflow
含义：
就是设置一个盒子内部的内容，超出了该盒子的设定大小的时候，怎么显示该内容的问题。
overflow常用值有：
auto： 自动，按浏览器的默认设置自动处理，可能各浏览器会有所不同。
scroll： 滚动，就是超出范围的时候，盒子出现滚动条（像浏览器的滚动条那样）。
hidden： 隐藏，就是将超出部分隐藏起来（视觉上不可见）。
visible： 显示，就是虽然，超出去了，但仍然显示出来，这是这个属性的默认值，无需设置。
此时，虽然可能超出外层盒子，但不会影响外层盒子后续的位置（布局）。
6.1.4.可见性属性visibility
含义：
设置元素的可见性。主要有两个值：
visible： 可见；
hidden： 隐藏。
特别注意：
设置visibility为hidden，虽然元素不可见了，但元素原本所占的空间仍然存在（效果是一片空白）
对比：设置display为none，也是隐藏，但此时该元素不但不可见，而且不占版面空间。
6.2.页面布局应用
6.2.1.布局思想
表格布局思想：
使用表格，将页面分割为若干区域：
纵向：就用表格的tr。
横向：就用表格的td实现。
层层分割：每个区块只考虑是“横向”还是“纵向”。
表格布局思想，被抛弃的原因是：网页展示速度慢！非常慢！
div+浮动布局思想：
纵向：使用div，自然上下排列出来。
横向：使用浮动div，并做好清除浮动工作（使浮动元素不影响后续元素）。
层层分割：每个区块只考虑是“横向”还是“纵向”。
典型布局效果：
6.2.2.纵向布局的实现
若干div自然就实现的纵向布局（自然从上到下排列出来）
6.2.3.横向布局的实现
若干div使用浮动，就横过来了。
注意清除浮动以使外层盒子有正常的高度（包住内层浮动盒子，并避免影响后续内容）。
6.2.4 整体布局的实现
非常简单，就是“层层分割”：
1，确定当下要进行布局设计的区域范围（毫无疑问是矩形盒子，而且最初肯定是整个网页区域）；
2，确定该区域按纵向布局还是横向布局，依此进行盒子样式设计；
3，对第2步中分割出来的“小区域”，继续用第2步的思路进行布局设计，以此类推，层层细分。
6.2.5.经典圣杯布局
7.定位属性
7.1.定位方式属性position
position用于设定一个元素的位置按什么方式来确定。
通俗说就是设定元素“放在哪个位置”（可由4个定位属性确定：top，left, right, bottom）。
有如下4个值可用：
static： 静态定位（其实就是没有定位）
是一个元素的默认定位方式，也就是一个文档中元素的正常文档流所确定的定位。
对其给定定位位置（top，left, right, bottom）的值无效。
relative：相对定位
相对于其本来应该所处的位置而设定一个相对性定位。
需给定位置（top，left, right, bottom）
absolute：绝对定位
相对于其上层最近的一个非static定位元素而设定的一个绝对性定位。
需给定位置（top，left, right, bottom）；
而如果其所有上级都没有非static定位元素，就相对于窗口来定位
fixed： 固定定位
相对于当前网页窗口而设定的一个绝对性定位。
需给定位置（top，left, right, bottom）。
注意：
1，relative定位虽然会改变元素的位置，但不影响上级盒子和相邻盒子该有的正常宽高和位置。
2，absolute定位和fixed定位的元素脱离了文档流，也就是上级盒子中不会计算其宽高（像没有一样）
7.2.定位位置属性：top，left，right，bottom
就是对于3种定位方式（relative， absolute， fixed），所给定的具体位置值。
可以是使用距离“上”，“左”，“下”，“右”各多少来定。
比如：
.cc1{
position: absolute;
left: 5px; top: 10px;
}
注意：top和bottom不能同时用；left和right不能同时用！
7.3.层叠属性z-index
含义：
就是将一个元素（盒子）默认情况下所展示在的那个平面（就是屏幕所在面）的垂直线当做z轴方向（就是眼睛盯屏幕时的那个“视线”方向），朝眼睛方向为z轴的正方向。则z-index可以设定一个元素（盒子）在z轴方向的“叠放层次”的高低，用整数表示。越大值表示越高，也就是离眼睛越近，自然就会覆盖住比它低的其他盒子。
如下图所示：
8.列表与表格样式
列表样式指的是ul（无序列表）和ol（有序列表）的表现特性；
表格样式指的是table的表现特性。
8.1.列表样式
列表样式主要是设置ul或ol前面的那个“列表符”的特性，包括：
list-style-type：
用于设置列表样式的类型，比如原点(disc)，圆圈(circle)，阿拉伯数字(decimal)，罗马数字，英文字母。
list-style-image
用于设置列列表前面的小图标（图像），也就是说，用一个图片来代替上面的列表符。
如果设置了这项，则list-style-type就失效。
list-style-position：
用于设置列表项目符的位置，只有两个值：outside(外面，默认），inside（里面）。指的是列表符，是放在li盒子的里面，还是放在li盒子的外面。
list-style：上述3个属性的综合属性。
说明：
实际应用中，通常使用背景图像来代替“list-style-type”和“list-style-image”。
8.2表格样式
表格样式主要是从整体上设置一个表格的外观表现，而不涉及到具体的每一个单元格。
表格样式的属性主要包括：
border-collapse：
设置表格的单元格边线是否合并；有两个值可用：separate（分离），collapse（合并）
border-spacing：
设置表格单元格之间的间隙，长度单位。
注意：只有在border-collapse的值为separate时才有效。
caption-side：
设置表格标题（caption标签）的放置位置，可用值有：top，bottom。（FF还有left和right）
扫一扫
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
