- A+
1. CSS基础
HTML太丑了，怎么办？
CSS层叠样式表——表现，凡是页面中所有能看见的东西的设置
1.1 什么是CSS?
CSS指的是层叠样式表(Cascading Style Sheets) ，用于为网页创建样式表，对网页进行装饰，如设置HTML页面中的文本内容（字体、大小、对齐方式），图片的外形（宽高、边框样式、边距等）；
1.2 层叠样式表
1、层叠：
网页是一层一层的，层次高的将会覆盖层次低的，我们看到的只是最上面的一层；
2、样式：
CSS可以为网页各个层次分别设置样式；
3、注释：css的注释/* */，必须编写在 <style> 标签中；
4、
.box + tab== <div class="box"></div> 创建一个class为box的div ；
2. CSS基本结构
2.1 书写位置
CSS有专有的<style>样式标签，可以分别为网页各个层次设置样式；
<style>样式可分为三类：行内样式、内部样式、外部样式；
2.11、行内样式
1、特点：
直接将css样式写到<body>标签内部的style属性中，给哪个标签设置就写在哪，直接写声明即可，内联样式又称行内样式；内联样式只对当前元素中的内容起作用；
2、语法：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名> <p style="color:red; font-size:12px;"> </p>;
3、优点：编写简单，定位准确,不需填写选择器，直接编写声明即可；
4、缺点：直接将css代码写到html内部，使结构与表现耦合，导致样式不能复用；不方便后期维护，不推荐；
2.12、内部样式
1、特点：
将css样式编写到<head>标签中的<style>标签中，通过css选择器来指定元素；
2、语法：
<head> <style type="text/css"> // type="text/css" 在html5中可以省略 p { color: red; font-size: 30px; } </style> </head>
type="text/css"是默认样式文本，将样式编写到<style>标签中，对页面中所有的这个标签统一设置样式；
3、优点：使css独立于html代码，同时为多个元素设置样式，可以使样式进一步复用，也可以使结构与表现进一步分离，常用；
4、缺点：内部样式样式只能在一个页面使用，结构与表现没有彻底分离，一个好的程序是需要每个部分都是独立的个体，模块化的概念；
2.13、外部样式
1、特点：
希望写一个css的样式在不同的页面都可以使用，可以将所有样式表统一编写到外部样式文件 style.css 中,再通过<link>标签，将style.css样式引入到当前页面中，建立关系；
2、语法：
<head> <!-- head标签内引入外部css文件 --> <link rel="stylesheet" type="text/css" href="style.css"/> /* css文件内直接定义样式，不用写style标签 */ li { list-style: none; } </head>
3、优点：
（1）使结构 表现完全分离，可以使样式表同时控制多个页面，最大限度的使样式可以复用；
（2）浏览器第一次加载图片之后已经将图片下载了，以后访问则不需下载，可以利用浏览器的缓存，加速用户访问的速度，提高了用户体验；
所以在开发中，最推荐使用外部css；文件级别：三者中 行内样式表 级别最高；
4、属性：
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 |
| type | 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 |
2.14、三种样式对比
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
2.2、语法规范
1、结构：选择器 { 声明块 }
（1）选择器用于指定CSS样式的HTML标签，花括号内是设置的具体样式；
（2）声明块紧跟选择器后，用一组{ }括起来，里面是一组组的名值对结构；
一组一组的名值称为声明，一个声明块中可以有多个声明，用 ；隔开使用，声明的样式名和样式值之间使用 ：来连接；
格式：属性值前，冒号后面，保留一个空格；选择器和花括号之间保留空格；
2、语法
<style> /* 给谁改样式 { 改什么样式 } */ p { color: red; font-size: 25px; } </style>
3、CSS选择器
1、作用：告诉浏览器：网页上的哪些元素需要设置设么样的样式，即选择器是选择标签用的；
2、分类：选择器分为—基础选择器和复合选择器；
3.1、基础选择器
基础选择器是由单个选择器组成的；
包括：标签选择器、类选择器、id选择器和通配符选择器；
| 基础选择器 | 作用 | 特点 | 使用 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签 | 不能差异化选择 | 较多 | p {color: red} |
| 类选择器 | 可以选出1个或者多个标签 | 根据需求选择 | 非常多 | .nav {color: red;} |
| id选择器 | 一次只能选择1个标签 | id选择器在每个html中只能出现一次 | 一般和js搭配 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况如清除全文样式 | * {color: red;} |
3.11、标签选择器：标签名 { }
以HTML标签名作为选择器，把页面中某一类标签都选择，能快速统一标签样式；
语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例：p会选取页面中所有的p标签；
<style> p { color: red; font-size: 25px; } </style>
3.12、类选择器：.class属性值{ }
作用：通过元素的class属性值选中一组元素，可选中一个或多个元素；
口诀：样式点定义，结构类（class）调用，一个或多个，开发最常见；
语法：
.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } <p class='类名'></p>
（1）可以同时为 一个元素设置多个class属性值，多个值之间用空格隔开；
（2）可以允许多个标签调用一个共用的class类；
<style> /* .class选择器会选取页面中所有 class属性值为red的元素； */ .red { color: red; } .font20 { font-size: 20px; } </style> </head> <body> <!-- 可以允许多个标签调用一个共用的class--> <p class="red">选择器</p> <p class="red">选择器</p> <!-- 同时为一个元素设置多个class属性值 多类名样式：把一个标签相同的样式放在一个类里--> <p class="red font20">选择器</p> </body>
多类名开发：
可以把一些标签相同的样式放到一个类里；这些标签都可以调用这个共用的类，然后再调用自己的类；从而节省css代码，统一修改。
<div class="pink fontWeight font20">亚瑟</div> <div class="font20">刘备</div> <div class="font14 pink">安其拉</div> <div class="font14">貂蝉</div>
常用类：
| 类命名 | 描述 |
|---|---|
| 头 | header |
| 内容 | content/container |
| 尾 | footer |
| 导航 | nav |
| 侧栏 | sidebar |
| 栏目 | column |
| 页面外围控制整体布局宽度 | wrapper |
| 左右中 | left、right、center |
| 登录条 | loginbar |
| 标志 | logo |
| 广告 | banner |
| 页面主体 | main |
| 热点 | hot |
| 新闻 | news |
| 下载 | download |
| 子导航 | subnav |
| 菜单 | menu |
| 子菜单 | submenu |
3.13、id选择器：#id属性值{ }
作用：可以在页面中单独选取某一个标签；
口诀：样式 #定义，结构id调用，只能调用一次，别人切勿使用
语法：
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } <p id="id名"></p> // 元素的id值是唯一的，只能对应于文档中某一个具体的元素。
例：
<head> <style> /* #p1会选取页面中唯一 id属性值为p1的元素； */ #p1 { color: red; font-size: 25px; } </style> </head> <body> <p id="p1">选择器</p> </body>
3.14、通配选择器 *{ }
作用：选择页面中的 所有元素，特殊情况使用；
会匹配页面所有的元素，降低页面响应速度，不建议随便使用
语法：
* { margin: 0; /* 定义外边距*/ padding: 0; /* 定义内边距*/ }
3.2、复合选择器
复合选择器是由两个或多个基础选择器组合成的；
复合选择器分为 后代选择器，子选择器，交并集选择器，伪类选择器；
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 div span |
| 子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是> .nav > p |
| 交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav， .header |
| 链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
3.21、后代元素选择器：父元素 后代元素{ }
父级 子级{属性:属性值;属性:属性值;}
作用：选中指定父元素里的 后代元素，可以是子孙后代；
/*例；为页面中所有div中的span设置一个颜色为绿色*/
<style> div span { color: greenyellow; } </style>
3.22、子元素选择器：父元素 > 子元素（直接后代，亲儿子）
作用：选中指定父元素的 直接后代，子元素；
/*例：为div标签的直接子元素 span设置一个背景颜色为黄色；*/
div > span { backage-color: yellow，亲儿子 }
*IE6及以下的浏览器不支持子元素选择器
3.23、并集选择器：元素1，元素2，元素n { 样式声明 }
作用：同时选中多组标签，为它们定义相同的样式，用于集体声明；
任何形式的选择器都可以作为并集选择器的一部分，用，连接，和的意思；
/*例：为id为p1的元素，class为p2的元素，还有h1,同时设置一个背景颜色为黄色（并集选择器竖着写，最后一个不加逗号）*/
#p1, .p2 ,h1 { backage-color: yellow; }
#交集选择器：既有标签一的特点，也有标签二的特点。并且，又的意思。
比如： p.one 选择的是： 类名为 .one 的 段落标签。
3.24、伪类选择器
伪类：专门用来表示元素的 某种特殊的状态，用 ： 表示；
比如：访问过得超链接，普通的超链接，获取焦点的文本框； 当我们需要为处在这种特殊状态的元素设置样式时，就可以使用伪类；
（1）超链接伪类 lvha：
例：超链接按颜色分：访问过的——紫色 ；没访问过的——蓝色；正在点击时是红色；
以根据访问者与该链接的交互方式，通过四个伪类 将链接设置 成4种不同的状态:顺序不能乱；
-
-
-
-
:link{} 选择所有未被访问的链接；
-
:visited{} 选择所有已被访问的链接
-
:hover{} 选择鼠标指针移动到上面的状态
-
:active{} 选择鼠标按下时被点击时的状态
-
-
-
（2）注意：
-
-
-
-
写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序
-
hover和active也可为其他选择器设置；但IE6中不支持对超链接之外的元素设置；
-
使用visited伪类只能设置字体的颜色；原理：浏览器是通过历史记录来判断一个链接是否访问过，有历史，访问过；由于涉及到了用户隐私，所以使用visited伪类只能设置字体的颜色；
-
-
-
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */ color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */ }
（3）：focus伪类选择器
用于选取获取焦点（光标）的表单元素，主要针对表单元素；
/* 将获得光标的input元素选取出来 */
input:focus { background-color: pink; }
3.25、选择器按元素之间的关系分类：
-
-
-
-
父元素：直接 包含子元素的元素；
-
子元素：直接被父元素包含的元素；
-
祖先元素：包含父元素 ，直接或间接包含后代元素的元素；
-
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素；
-
兄弟元素；拥有相同父元素的元素；
-
-
-
4、CSS三大特性
CSS有三个非常重要的特性：继承性、优先级、层叠性；
4.1、继承性（样式的继承）
1、作用：现实中：像儿子只可以继承父亲遗产一样，子承父业；
-
-
-
-
在css中，祖先元素的样式，也会被后代元素继承；如文本的颜色和字号；
-
利用继承可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式，只需要设置一个；
-
但不是所有元素都会被子元素继承，比如，背景相关的样式不会被继承，边框，定位不继承；背景是有一个默认值，是透明颜色，可以通过子元素透过去；
-
-
-
2、特点：
恰当地使用继承可以简化代码，降低CSS样式的复杂性；
子元素可以继承父元素的样式（text-、font-、line-这些元素开头的可以继承，以及color属性）
继承性口诀：龙生龙，凤生凤，老鼠的孩子会打洞；
3、语法：
<head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: red; } p { color: green; } /*因为demo 没有选p标签，所以 继承的权重为 0*/ .demo { color: blue; } #test { color: pink; } </style> </head> <body> <div class="demo" id="test"> <!-- p是绿色 --> <p>继承的权重为 0</p> </div> </body>
4、行高的继承
语法：
body{ font:12px/1.5 Microsoft YaHei; }
特点：
行高可以接单位也可以不接；
若子元素没设置行高，则汇集成父元素的行高/1.5；
此时的行高是当前子元素的文字大小*1.5；
body行高1.5的优势：里面的子元素可以根据自己文字大小自动调整行高；
4.2、层叠性
1、作用：是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，此时一个样式会覆盖（层叠）另外一个冲突的样式，层叠性主要解决样式冲突的问题；
2、原则：
样式冲突，遵守就近原则，那个样式离结构近，就执行哪个；
样式不冲突，不会层叠；
4.3、优先级（权重）
当使用不同选择器选择同一个元素，并且设置相同的样式时，样式之间产生了冲突，最终采用哪个选择器的样式，由选择器的优先级（即权重）决定：
-
-
-
选择器相同，则执行层叠性；
-
选择器不同，则根据选择器权重执行；
-
-
1、权重计算公式
选择器的权重：计算权重需要将一个样式的全部选择器相加；
优先级规则：
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 *通配 | 0,0,0,0 |
| 元素（标签选择器） | 0,0,0,1 |
| 类，伪类，属性 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式 style="" | 1,0,0,0 |
| 每个!important 重要的 | ∞ 无穷大 |
通配符和继承权重为0；标签为1，类（伪类）为10，id为100，行内1000；
注意：
-
-
-
当选择器中包含多种选择器时 需要相加；
-
选择器的优先级计算，不会超过他的最大的数量级；
-
如果选择器的优先级一样，则使用靠后的样式；
-
并集选择器的优先级是单独计算的：div, p, #p1, .hello{}
-
-
-
-
-
不相加计算：在样式后面添加！important会获得一个最高的优先级，但是开发中尽量避免使用；不利js修改；
-
-
例：如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0，因为继承没有权重；
<style> /*父亲的权重是100*/ #father { color: red;!important; } /*虽然权重有高低，但继承的权重为0*/ /*所以以后看标签到底执行哪个样式，就先看这个标签有没有直接被选出来*/ p { color: pink; } </style> <body> <div id="father"> <p>内容</p> </div> </body>
2、权重的叠加：复合选择器需计算权重；
就是一个简单的加法计算
-
-
-
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
-
-
数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
5、字体样式
Fonts属性定义字体系列、大小、粗细、和文本样式（如斜体）；
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 一定要有单位，通常px |
| font-family | 字体 | 按照团队约定抒写字体 |
| font-weight | 字体粗细 | 加粗700/bold；不加粗400/normal；数字常用无单位 |
| font-style | 字体样式 | 倾斜italic；不倾斜normal（常用默认）用于em不倾斜 |
| font | 字体简写 | 有序顺；字号和字体必须有； |
| font-variant | 大小写 | small-caps：小型大写字母； |
1、font-size：文本大小/字号
（1）结构：
/* 标题标签比较特殊，需要单独指定文字大小 */ p { font-size: 25px; }
（2）特点：其实设置的并不是文字本身真正大小，而是是文字在页面中所属的看不见的框空间的大小（盒子模型），类似于方格纸，所以字体大小实际值是小于font-size值；
-
-
-
-
不同浏览器默认字体不同，所以在网页中默认显示的效果也不同，谷歌浏览器默认16px；
-
当使用某种字体时，如果浏览器支持则使用该字体，不支持则使用默认字体；
-
-
-
2、font-famliy：字体系列
（1）结构：
body { font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB'; }
（2）特点：可以同时指定多个字体，优先使用前面的字体;超过两个单词加引号；
（3）分类：5大类
-
-
-
-
serif（衬线字体）：结尾拐个弯，宋体
-
sans-serif（非衬线字体）：横平竖直，雅黑
-
monospace（等宽字体）：一边宽，英文也是，编程程序一般用
-
cursive（草书字体）：楷书
-
fantasy（虚幻字体）：
-
-
-
（4）应用场景：
-
-
-
-
浏览器会自动选择指定的字体并应用样式，选择大字体中的一类；
-
不同浏览器对字体的理解效果不同，所以网页中显现的字体也不同；
-
一般会将字体的大分类指定为font-family中最后一个字体；
-
浏览器默认使用的是计算机字体，计算机有，就可以设置，但有些只支持英文；字体查看——c盘，windows，fonts；注意奇怪字体不要用；
-
-
-
（5）常用字体：
| 字体名称 | 英文名称 | Unicode 编码 |
|---|---|---|
| 宋体 | SimSun | 5B8B4F53 |
| 新宋体 | NSimSun | 65B05B8B4F53 |
| 黑体 | SimHei | 9ED14F53 |
| 微软雅黑 | Microsoft YaHei | 5FAE8F6F96C59ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | 69774F53_GB2312 |
| 隶书 | LiSu | 96B64E66 |
| 幼园 | YouYuan | 5E7C5706 |
| 华文细黑 | STXihei | 534E65877EC69ED1 |
| 细明体 | MingLiU | 7EC6660E4F53 |
| 新细明体 | PMingLiU | 65B07EC6660E4F53 |
为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体
3、font：字体复合属性
（1）特点：将字体的样式的值统一写到font中，不同值间用空格隔开；
（2）结构：
body { font: font-style font-weight font-size/line height font-family; }
前面可省略，但最后两项，font-size和font-family必须有且遵循顺序；
优点：使用简写属性也会有一个比较好的性能；
6、CSS文本属性
Text属性可定义文本的外观，比如文本的颜色、对齐、装饰、文本缩进、行间距；
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 文本颜色 | 英文单词；十六进制 #fff（常用）；RGB值 |
| text-align | 文本对齐 | center/left/right/justify(两端对齐) |
| text-decoration | 文本修饰 | 下划线：underline；取消：none（常用） |
| text-indent | 文本缩进 | 段落首行缩进，text-indent：2em； |
| line-height | 行高 | 调整行与行之间的距离 |
| text-shadow | 文本阴影 | ：水平偏移 垂直偏移 模糊程度 模糊颜色 |
| text-transform | 大小写转换 | 大uppercase；小lowercase；首大写capitalize |
| letter-spacing | 字符间距 | |
| word-spacing | 单词间距 | 只对英文起作用，设置空格多少，单位px |
1、color：文本颜色
CSS颜色的表达形式有三种：（1）使用颜色的单词；（2）RGB代码；（3）十六进制；
（1）颜色的英文单词：
p { color: red; }
（2）RGB值：
RGB是指通过Red,Green,Blue三元色的不同浓度，来表示出不同的颜色；
p { color: RGB(255,0,0); /* 以表示颜色浓度的数值表示 0-255 */ color: RGB(100%,0%,0%); /* 以百分数表示浓度 0-100%，最后转为数字 */ }
（3）十六进制
使用十六进制RGB的值表示颜色：三组两位的十六进制表示颜色，每组表示一个颜色；每组范围：00-ff 即0-255；
p { color: #ff0000;/* 可简写为#f00 */ }
RGBA：表示透明度；可选值：0—1的值，完全透明—完全不透明；
2、text-align：水平文本对齐方式
可选值：center/left/right/justify（两端对齐)
通过调整文本之间的空格的大小，来达到一个两端对齐的目的
.pic { /*想要图片居中对齐，则让他的父亲p标签添加水平居中的代码*/ text-align: center; }
3、text-decoration：修饰文本
可选值：Underline（下划线) / overline（上划线）/ line-through（删除线）/ none
| 值 | 描述 |
|---|---|
| none | 默认，用于取消下划线（最常用） |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的（常用） |
| overline | 定义文本上的一条线。上划线（不用） |
| line-through | 定义穿过文本下的一条线。删除线（不常用） |
4、text-indent：文本首行缩进（缩进em字节）
一般都会使用em作为单位正值向右移，负值左移，可以将不想显示的字隐藏起来；
p { /*行间距*/ line-height: 25px; /*首行缩进2个字 em 1个em 就是1个字的大小*/ text-indent: 2em; }
5、行间距
（1）特点：
-
-
-
-
行间距包括：文本高度，上间距和下间距；
-
文字默认在行高中 垂直居中；
-
CSS中并没有提供一个设置行间距的单独方式，而是通过 行高 间接设置，行高越大，间距越大；
-
对于单行文本，可以将行高设置为和父元素高度一致；可以使单行文本在父元素中垂直居中；
-
-
-
（2）行间距的设置：
/* 1、直接指定大小（ px或者% ）*/ p { /* line-height: 10%; */ line-height: 10px; }
/* 2、通过行高指定：指定行高,字体大小后添加 / 指定行高，行高越大间距越大，行间距=行高-字体=50-30=20 */
.p2 { font-size: 30px/50px "微软雅黑"； } /* 3、设置字体相应的倍数:line-height:1; */
6、行高和高度的三种关系
-
-
-
-
如果 行高 等 高度 文字会 垂直居中
-
如果行高 大于 高度 文字会 偏下
-
如果行高小于高度 文字会 偏上
-
-
-
7、CSS背景
背景属性可以设背景颜色，背景图片，背景平铺，背景图片位置，背景图片固定；
应用场景：网页扒图片，超大的图片或者小图标及logo等都使用背景图片，然后通过定位调节背景图片位置；
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法 |
| background-attachment | 背景固定还是滚动 | scroll/fixed |
| 背景简写 | 更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序 |
| 背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是 4个值 |
1、background-color：颜色值
为元素设置背景颜色；若不设置，默认透明transparent，实际会显示父元素的背景颜色；
2、background-image：背景图片
background-image : none | url (images/demo.png)
为元素指定背景图片；
-
-
-
-
如果背景图片大于元素大小，默认显示图片左上角；
-
如果背景图片小于元素大小，则会默认将图片平铺，直到填满页面；
-
可以同时为一元素设置背景颜色和背景图片，背景颜色会作为底色（常用）
-
插入图片和背景图片区别
-
-
-
-
-
-
-
插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
-
背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
-
-
-
img { width: 200px;/* 插入图片更改大小 width 和 height */ height: 210px; margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */ margin-left: 50px; /* 插入当图片也是一个盒子 */ } div { width: 400px; height: 400px; border: 1px solid purple; background: #fff url(images/sun.jpg) no-repeat; background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */ }
3、background-repeat：背景平铺方式
background-repeat : repeat | no-repeat | repeat-x | repeat-y
可选值：
| 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
background-size：cover；布满全局最小；
4、background-position：背景图片位置
精确调整背景图片在元素中的位置；背景图片默认贴着元素左上角显示；
position 后面是x坐标和y坐标。可以使用方位名词或者 精确单位。
| 参数 | 值 |
|---|---|
| position | top | center | bottom | left | center | right 方位名词 |
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
（1）指定的两个值都是方位名词，则两个值前后顺序无关；如果只给出一个值，则第二个值默认center；
（2）如果position 后面是精确坐标， 第一个肯定是 x ,第二个一定是y；
如果只指定一个，则第一个是x坐标，第二个默认是center；
5、background-attachment：背景附着
用来设置背景图片是否固定或随页面一起滚动，后期做视差滚动效果；
background-attachment : scroll | fixed
可选值：
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随窗口对象内容滚动 |
| fixed | 背景图片固定在某位置，相对于浏览器，不随窗口滚动；文字动，背景不动；不随窗口滚动的元素一般给body设置，不给其他标签设置； |
6、background：简写属性
没有顺序要求和数量要求；不设置的为默认值；
通常：background:背景颜色 背景图片 背景平铺 背景图片滚动 背景位置
body { background: black url(images/bg.jpg) no-repeat fixed center top; } <style> .bg { width: 800px; height: 500px; background-color: pink; /*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/ background-image: url(images/l.jpg); /*背景图片不平铺*/ background-repeat: no-repeat; /*背景位置*/ /*background-position: x坐标 y坐标;*/ /*background-position: right top; 右上角*/ /*那么第一个，肯定是 x 是 50 第二的一定是y 是 10*/ /*background-position: 50px 10px ;*/ /*以下说明 x 10像素 y 垂直居中的*/ /*background-position: 10px center;*/ background-position: center 10px; } </style>
7、背景图片透明（CSS3）
语法：
background: rgba(0, 0, 0, 0.3);
alpha是透明度，范围0-1；0.3可简写为.3;
因为是CSS3 ，所以 低于 ie9 的版本是不支持的
IE6:半透明背景 filter:alpha（opacity=50），范围0-100；
案例：
<style> .nav a { display: inline-block; width: 120px; height: 58px; background-color: pink; text-align: center; line-height: 58px; color: #ffffff; text-decoration: none; } /* .nav .bg1 { background: url() no-repeat; } */ </style> </head> <body> <div class="nav"> <a href="#" class="bg1">五彩导航</a> <a href="#" class="bg2">五彩导航</a> <a href="#" class="bg3">五彩导航</a> <a href="#" class="bg4">五彩导航</a> <a href="#" class="bg5">五彩导航</a> </div> </body>
8、盒子模型
css学习三大重点： css 盒子模型 、 浮动 、 定位
网页布局的本质：
-
-
-
-
首先利用CSS设置好盒子的大小，然后摆放盒子的位置。
-
最后把网页元素比如文字图片等等，放入盒子里面。
-
-
-
盒子是网页布局的关键点
8.1、格式
一、作用：
盒子模型（BOX）也叫 框 模型：在网页中，一切皆是盒子，是一个盛装内容的容器；
css处理页面时，每个html元素都看作包含在一个不可见的盒子里；
盒子默认矩形，对网页进行布局就等同于摆放盒子；
二、结构：
盒子分四部分：内容区（content）、边框（border）、内边距（padding）、和外边距（margin）组成。
1、内容区（content）：
-
-
-
内容区是盒子中放置内容的区域，元素中的文本内容；
-
如果没有设置内边距和边框，则内容区的大小默认是和盒子大小一致；
-
width和height设置的是内容区宽度和高度，而非整个盒子的大小，此外，width和height只适合块元素；
-
-
2、边框（border）：
border : border-width || border-style || border-color border: 1px solid red; 没有顺序
（1）作用：元素可见框的最外部；边框会影响盒子大小，测量时需减去；
（2）样式：要为一个元素设置边框必须指定三个样式：width/style/color;
border-style：solid（实线）dotted（点）dashed（虚线）double（双线）
注意：
-
-
-
大部分的浏览器中，边框的宽度和颜色都是默认值；而边框的样式style默认值都是none，所以前两者不写也可出现边框，样式不写就无法显示；所以border-style必须写；
-
CSS中还可以单独设置某边的样式，如 border-xxx-style，xxx的值可能是top right bottom left；其余同理；
-
若想设置除一边之外的三边统一设置：
-
-
border：red solid 10px； border-right：none；
（3）表格相邻边框合并，细线边框；
border-collapse：collapse；
3、内边距（padding）：
（1）作用：盒子内容区与边框间的距离；内边距会影响盒子的可见框大小，测量需减去（双倍两侧）；盒子的大小由内容区、内边距和边框共同决定；
（2）格式：padding：10px；
（3）属性：padding-top/right/bottom/left 逆时针方向；
（4）盒子的实际的大小 = 内容的宽度和高度 + 两侧内边距 + 两侧边框
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
（5）应用场景：padding可以撑开盒子，巧妙运用，常用于制作导航栏；
因为每个导航栏里的字数不一样，所以不给盒子设置宽度，直接给padding撑开；
（6）注意：如果盒子本身没给宽高，则padding则不会撑开；
（7）内边距导致的问题：会撑大原来的盒子
解决：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小；
4、外边距（margin）：
（1）作用：元素边框与周围元素相距的空间；即当前盒子与其他盒子之间的距离；不会影响可见框的大小，只是影响盒子的位置；
（2）盒子有四个方向的外边距，页面中的元素都是靠左上摆放的，当设置 上 和左外边距时，会导致盒子自身发生变化；当设置右和下边距会挤其他盒子，改变其他盒子的位置；
（3）外边距可以指定正负值，负值反方向移动；
（4）垂直方向框如果设置为auto，则外边框默认是0；
（5）当左右外边距（水平方向）设置为auto时，浏览器会将左右外边距设置为相等，将外边框设置为最大值；前提是盒子设置了高度；
5、文字居中和盒子居中区别
（1）盒子内的文字 水平居中是 text-align: center；而且还可以让 行内元素和行内块居中对齐
（2）盒子内的文字 垂直居中是 line-height= 高度；
（3）块级盒子水平居中 左右margin 改为 auto
text-align: center; /* 文字 行内元素 行内块元素水平居中 */ line-height: height; margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */ .box { margin：0 auto; }
8.2、外边距合并导致的问题
我们根据稳定性来分，建议如下： 按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。 ``` width > padding > margin ```
原因： - margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。 - padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。 - width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。
使用margin定义块元素的垂直外边距时，会出现外边距的合并；
主要会出现两种情况：
-
-
-
相邻块元素垂直外边距的合并——外边距重叠；
-
嵌套块元素垂直外边距的塌陷；
-
-
1、相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，
- 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是 **取两个值中的较大者** 这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。如100 100取100；
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素；
解决：尽量只给一个盒子设置margin值；
2、嵌套块元素垂直外边距的合并（塌陷）
- 对于两个嵌套关系(父子)的块元素，如果父元素没有上内边距及边框
- 父元素的上外边距会与子元素的上外边距发生合并 - 合并后的外边距为两者中的较大者
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距，而子元素也有上外边距时，此时父元素会塌陷较大的外边距值；
解决：
1、为父元素设置上边框border隔开；设置属性会增加像素，可以在宽高上减去；
2、为父元素设置上内边距padding-top；但是最后要在高度减去100px；
3、若想不使他重叠：在两个块元素div间添加其他，则不相邻，不重叠；
4、为父元素添加overflow：hidden；
<style> .father { width: 500px; height: 500px; background-color: pink; /*嵌套关系 垂直外边距合并 解决方案 */ /*1. 可以为父元素定义上边框 transparent 透明*/ /*border-top: 1px solid transparent;*/ /*2. 可以给父级指定一个 上 padding值*/ /*padding-top: 1px; */ /*3. 可以为父元素添加overflow:hidden。*/ overflow: hidden; } .son { width: 200px; height: 200px; background-color: purple; margin-top: 100px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body>
有了浮动，定位就不会有外边距塌陷的问题了；
8.3、清除内外边距
浏览器为了在页面中不设置样式时，也可以有很好的显示效果，所以浏览器为很多的元素都设置了一些默认的margin和padding。而这些默认样式，正常情况下不需要；所以使用前需要去掉；
清除浏览器默认样式；
* { margin：0；/* 清除内边距 */ padding：0； /* 清除外边距 */ }
行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。
8.4、内联元素的盒模型：
特点：
1、内联元素只占本身大小，水平排列，一行可放多个；
2、内联元素不能设置width和height；
3、水平内边距padding可以设置；垂直内边距虽然可以设置，但不会影响布局；
4、可以设置边框，但垂直方向不会影响布局；
5、内联元素不支持垂直外边距margin-top、margin-bottom；
9、CSS元素的显示与隐藏
9.1、元素的显示模式
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行一个 | 可设置宽高 | 整行 | 包含任何标签 |
| 行内元素 | 一行多个 | 不可直接设置宽高 | 本身 | 容纳文本或其他行内 |
| 行内块元素 | 一行多个块级 | 可设置宽高 | 本身 |
9.2、display标签显示模式转换
display属性：设置一个元素如何显示
（1）作用：
-
-
-
-
通过diaplay样式可以修改元素的类型，将一个内联元素变成块元素；
-
内联元素不能设置width、height、margin-top、margin-bottom，但通过display转为块元素后可设置宽高；
-
display：none隐藏元素后，不在占有原来的位置；
-
-
-
（2）可选值：
-
-
-
-
none:隐藏元素；页面中不显示，并且元素在页面中不占位；
-
inline：可以将一个元素设置为内联元素，横向排列；
-
block：可以将一个元素设置为块元素，纵向排列；
-
inline-block：将一个元素设置为行内 块元素；可以使一个元素既有行内元素的特点，又有块元素特点；既可以设置宽高，又不独占一行；
-
-
-
9.3、元素的隐藏
| 属性 | 语法 | 描述 | 特点 |
|---|---|---|---|
| display | display：none； | 隐藏元素，页面中不显示 | 元素在页面中不占位 |
| visible | visible： hidden; | 指定一个元素是可见还是隐藏 | 元素隐藏后占位 |
| overflow | overflow:hidden； | 内容溢出一个元素的框（超过其指定高度及宽度） 时，元素隐藏，以免影响布局 | 只是对于溢出的部分处理 |
注意：对于有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。
overflow属性值：
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出部分隐藏 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
导航栏案例
注意，实际重要的导航栏中，我们不会直接用链接a 而是用 li 包含链接(li+a)的做法。
-
-
-
li+a 语义更清晰，一看这就是有条理的列表型内容。
-
如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名
-
-
案例：简洁版小米侧边栏
-
-
-
将链接转为块元素，这样链接就可以独占一行，并有宽高；
-
鼠标经过a 给连接设置背景颜色；
-
-
<style> * { margin: 0; padding: 0; } li { list-style: none; } ul { background-color: #55585a; width: 230px; } ul li { width: 230px; height: 40px; line-height: 40px; } ul li a { /* display: block; */ font-size: 14px; color: #ffffff; text-decoration: none; text-indent: 2em; } ul li:hover { background-color: #ff6700; } </style> </head> <body> <ul> <li><a href="#">手机 电话卡</a></li> <li><a href="#">电视 盒子</a></li> <li><a href="#">笔记本 平板</a></li> <li><a href="#">出行 穿戴</a></li> <li><a href="#">智能 路由器</a></li> <li><a href="#">健康 儿童</a></li> </ul> </body> </html>
View Code
案例：新浪导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新浪导航栏案例</title> <style> /*清除元素默认的内外边距*/ * { margin: 0; padding: 0; } .nav { height: 41px; background-color: #FCFCFC; /*上边框*/ border-top: 3px solid #FF8500; /*下边框*/ border-bottom: 1px solid #EDEEF0; } .nav a { /*转换为行内块*/ display: inline-block; height: 41px; line-height: 41px; color: #4C4C4C; /*代表 上下是 0 左右是 20 内边距*/ padding: 0 20px; /*background-color: pink;*/ text-decoration: none; font-size: 12px; } .nav a:hover { background-color: #eee; } </style> </head> <body> <div class="nav"> <a href="#">设为首页</a> <a href="#">手机新浪网</a> <a href="#">移动客户端</a> <a href="#">博客</a> <a href="#">微博</a> <a href="#">关注我</a> </div> </body> </html>
View Code
案例：蓝牙耳机
错误~！
<style> * { margin: 0; padding: 0; } body { background-color: #f5f5f5; } .box { width: 298px; height: 415px; background-color: #fff; margin: 100px auto; } .box img { width: 100%; background-color: pink; } .review { height: 70px; padding: 0 28px; margin-top: 30px; font-size: 14px; } .appraise { margin-top: 20px; font-size: 14px; color: #b0b0b0; padding: 0 28px; } .info { margin-top: 15px; padding: 0 28px; font-size: 14px; } .info h4 { display: inline-block; font-weight: normal; } .info span { color: #ff6700; } </style> </head> <body> <div class="box"> <img src="../1.png" alt=""> <p class="review">快递牛，整体不错蓝牙可以说秒连，红米给力</p> <div class="appraise">来自于***的评价</div> <div class="info"> <h4>Redml AirDots真无线蓝...|</h4> <span>99.9元</span> </div> </div> </body>
View Code
还有一个竖线：方法：加<em>里然后去除斜体加颜色；再加上链接；
10、CSS3——圆角边框
原理：
border-边框；radius-半径；
假如给一个矩形盒子设置圆角边框，给border-radius：length指定一个数值，绘制一个以length为半径的圆，让这个圆分别与矩形的四个边框相切，得出一个圆弧
1、语法：
border-radius：length; // 数值或百分比的形式 border-radius: 50%; // 让一个正方形 变成圆圈 border-radius: 左上角 右上角 右下角 左下角 逆时针顺序;
2、特点：数值越大，圆角的幅度越大，越明显；
3、设置方法：
（1）参数值可以是数值或百分数；
（2）若是正方形想设置一个圆，就把数值改为高度或是宽度的一半即可，或50%；
（3）若是矩形，改为高度一半即可；
（4）可简写也可分开写：四个值分别代表：左上角 右上角 右下角 左下角；
若只设置两个值，则是对角线形式；
案例：设置圆形、椭圆形
<style> * { margin: 0; padding: 0; } .radius { width: 200px; height: 200px; background-color: blue; border-radius: 10px 20px 30px 40px; } .yuan { width: 200px; height: 200px; background-color: pink; border-radius: 50%; } .juxing { width: 300px; height: 100px; background-color: red; border-radius: 50px; } </style> </head> <body> <div class="yuan"></div> <div class="juxing"></div> <div class="radius"></div> </body>
11、阴影
11.1、盒子阴影
1、语法：
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； box-shadow：h-shadow v-shadow blur spread color inset;
2、特点：
-
-
-
盒子阴影不占用空间，不会影响其他盒子排列。
-
-
3、属性：
-
-
-
前两个属性是必须写的。其余的可以省略。
-
外阴影 (outset) 是默认的 但是不能写 ;想要内阴影可以写 inset
-
-
| 值 | 描述 |
|---|---|
| h-shadow | 必须，水平阴影位置，允许负值 |
| v-shadow | 必须，垂直阴影位置，允许负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影尺寸 |
| color | 可选，阴影颜色 |
| inset | 可选，将外部阴影改为内部阴影 |
<style> div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3) inset; } </style>
11.2、文字阴影
1、语法：
text-shadow: h-shadow v-shadow blur color;
2、属性：
h-shadow、 v-shadow、 blur、 color
12、传统网页布局的三种方式
网页布局的本质是用css摆放盒子；
网页布局的三种传统方式有：文档流（标准流）/ 浮动 / 定位；
12.1、文档流
文档流处在网页的最底层，表示一个页面中的位置，像地基一样的东西；
我们所创建的元素都默认在文档流里；
1、块元素会独占一行，从上到下顺序排列（按列排列）；
常用块元素：<div> <hr> <h1> <p> <ul> <ol> <form> <table>
2、行内元素会按照顺序，从左到右顺序排列（按行排列），碰到父元素边缘自动换行；
常用行内元素：<span> <a> <i> <em>
以上都是标准流的布局；
12.2、浮动float
1、为什么需要浮动？
很多布局标准流无法完成，需要借助浮动完成布局，因为浮动可改变元素的默认排列方式；
典型应用：可以让多个块元素（盒子）在一行内排列；
（块元素转为行内块也可实现一行显示，但是中间有空白缝隙）
2、什么是浮动？
利用float属性创建浮动框，将其移动到一边，直到左右边缘或遇另一个浮动框边缘；
概念：元素的浮动是指设置了浮动属性的元素会
-
-
-
-
脱离标准普通流的控制
-
移动到指定位置
-
-
-
格式：选择器 { float：none/left/right }
3、浮动特性：
（1）浮动元素脱离原来的文本流（脱标），不再占位；
（2）浮动的元素会在一行内显示且元素顶部对齐；
（3）浮动的元素具有行内块元素的性质，若给span浮动，则不需转换为行内块；
（4）浮动的元素是紧贴在一起的，无缝隙，若一行装不下，另起一行；
（5）浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围；可以通过浮动设置文字环绕图片效果；
（6）文档流中，子元素宽度默认占父元素全部；
4、块元素和行内元素都可以设置浮动， 当行内元素设置浮动以后，脱离文档流，将会自动变成一个块元素；
但当一个块元素浮动之后，宽度会默认被内容撑开，所以当漂浮一个跨级元素时会为他指定一个宽度； 浮动元素默认会变成块元素，即使设置display：inline以后依旧是块元素；
案例：
若第一个粉色的盒子加了浮动，他就飘起来了，不会占位，下面的元素立即上移；
如果第一、三个盒子不浮动，第二个盒子浮动，则第一个div独占一行，2不浮上去；得出浮动的盒子只对它下面的元素有影响；
如果第一、三盒子浮动，第二个不浮动，则第二个上升第一个，第三个浮到挨着第二个；
<style> .box1 { float: left; width: 200px; height: 200px; background-color: pink; } .box2 { width: 300px; height: 300px; background-color: rgba(0,153,255); } </style>
浮动小结：
| 特点 | 说明 |
|---|---|
| 浮 | 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。 |
| 漏 | 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。 |
| 特 | 特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙 |
清除浮动
1、浮动引发的高度塌陷
文档流中，父元素的高度默认被子元素撑开，子元素多高，父元素多高；
但是当为子元素设置浮动之后，子元素会完全脱离文档流，导致子元素无法撑起父元素高度，导致父元素高度塌陷；
由于父元素高度塌陷，则父元素下的所有元素都会向上移动，导致页面布局混乱； 所以开发中一定要避免塌陷问题的出现；
可以将父元素的高度写死，解决塌陷，但是一但将高度写死，父元素的高度将不能自动适应子元素的高度；不建议使用；
-
-
-
-
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
-
准确地说，并不是清除浮动，而是清除浮动后造成的影响
-
-
-
2、清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
3、 清除浮动clear
1、原理：
（1）清除其他元素的浮动对当前元素的影响，也就是说元素不会因为上方出现了浮动元素而改变位置；
（2）如果父盒子本有高度，则不需要清除浮动；
（3）清除浮动后，父级会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了；
2、为什么要清除浮动？父级没高度；子盒子浮动了；影响下面布局了；
3、方法：清除浮动的策略就是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外边的盒子；
4、可选值：None/left/right/both：清除两侧，清除对他影响最大的一侧；
语法：选择器{clear:属性值;} clear 清除
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响（常用） |
4、高度塌陷问题的解决——清除浮动方法：
-
-
-
-
额外标签法也称为隔墙法，是 W3C 推荐的做法。
-
父级添加 overflow 属性
-
父级添加after伪元素
-
父级添加双伪元素
-
-
-
后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。
1).额外标签法(隔墙法)--W3C推荐
在最后一个浮动的子元素后面添加一个额外的空标签（必须是块级元素），清除浮动样式；
例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
原理：由于这个div没有浮动，所以他是撑开父元素高度的，然后对其进行清除浮动，通过这个空白的div撑开父元素的高度，基本没有副作用；
-
-
-
-
-
优点： 通俗易懂，书写方便
-
缺点： 添加许多无意义的标签，添加了多余结构，结构化较差。
-
-
-
-
<head> <style> /*清除浮动*/ .clear { clear: both; } </style> </head> <body> <div class="one"> <div class="damao"></div> <div class="ermao"></div> <div class="clear"></div> // 额外标签法，div无意义 </div> <div class="two"></div> </body>
2).父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
之前清除 外边距合并 也用了 overflow；
原理：w3c标准，页面中的元素都有一个隐含的属性，叫做block formatting context，简称****BFC****;该属性可以设置打开或者关闭，默认关闭；
当开启元素的BFC后，元素将具有如下特性：
-
-
-
-
-
父元素的垂直外边距不会和子元素重叠；
-
开启BFC的元素不会被浮动元素覆盖；
-
开启BFC的父元素可以包含浮动的子元素
-
-
-
-
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
如何开启BFC
-
-
-
-
-
-
设置元素浮动；——虽然可以撑起父元素但会导致父元素宽度丢失，而且也会导致下面元素上移，不能够解决；
-
设置元素绝对定位；——同上
-
设置元素inline-block；——可以解决问题，会导致宽度丢失；
-
不是直接开启的，间接的，会有副作用；
-
将元素的overflow设置一个非visible得值；
-
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式；
-
-
-
-
-
overflow：auto/hidden；
在IE6以下浏览器不支持BFC；IE6虽然按不兼容BFC，但是有另一个隐藏的属性——haslayout，作用和BFC相似，IE6可以通过haslayout解决该问题；
开启父元素的haslayout： zoom：1；
-
-
-
-
-
-
zoom是放大的意思，后面跟一个数值，表示将元素放大几倍；
-
zoom：1；表示不放大元素，但是通过该样式开启haslayout，
-
zoom样式在IE支持，在火狐和其他不兼容；
-
-
-
-
-
3).父级添加after伪元素 :after
:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了
若不想添加div，又想解决塌陷，可通过css添加after伪类，选中box1的两边，after向元素的最后边添加一个空白的块元素，然后对其清除浮动（闭合浮动）；这样和添加一个div的原理一样，得到相同的效果；而且没有在页面里添加多余的div；
使用方法：
.clearfix :after { /*添加一个内容*/ content: ""; /*转换为一个块元素 默认是行内元素*/ display: block; /*清除两侧的浮动*/ clear: both; height: 0; visibility: hidden; } /*在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理 */ .clearfix{ zoom：1; } /* IE6、7 专有 */
-
-
-
-
优点： 符合闭合浮动思想 结构语义化正确
-
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
-
代表网站： 百度、淘宝网、网易等
-
-
-
4).父级添加双伪元素
解决父子元素的外边距重叠：使用空的table标签可以隔离父元素和子元素的外边距，阻止外边距的重叠；
display：table可以将元素作为一个表格显示；
修改后的clearfix是一个多功能，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
.clearfix:before, .clearfix:after { content: ""; display: table; clear: both; } .clearfix { zoom: 1; }
-
-
-
-
优点： 代码更简洁
-
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
-
代表网站： 小米、腾讯等
-
-
-
清除浮动总结
-
-
-
父级没高度
-
子盒子浮动了
-
影响下面布局了，我们就应该清除浮动了。
-
-
| 清除浮动的方式 | 优点 | 缺点 |
|---|---|---|
| 额外标签法（隔墙法） | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差。 |
| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
图片质量问题
一、PNG24图片格式问题
1、问题：IE6中对图片格式PNG24支持度不高，如果使用，会导致效果无法正常显示；
2、解决：
-
-
-
-
使用png8代替png24，利用ps操作，文件存储为web格式，但清晰度下降；
-
利用javascript解决，需要向页面中引入一个外部的js文件，写一个js代码处理这个问题；
-
-
-
（1）引入js方法：
在<body>标签的最后引入外部js文件，相当于link；
<script type="text/javascript" src="script.js"> </script>
（2）然后要再创建一个新的<script>标签，并编写js代码；
<script type="text/javascript> DO-belatedPNG.fix("div");修复 </script>
二、hack浏览器版本问题
css hack 实际是一个特殊的代码，只有部分浏览器能识别；所以用来为一些浏览器设置特殊代码；
方式一：
-
-
-
-
若只想在一些如IE6等特殊的浏览器执行，IE10及以上不支持，可以用css hack来解决；
-
但css hack不推荐使用，它等同于bug，后期不好维护；
-
条件hack，只对IE浏览器有效，其它都视为注释；IE10及以上不支持；
-
-
-
以下内容只会出现在IE6，后面跟的是版本；
<!-- [if IE 6]--> <p></p> <!-- [endif]-->
以下内容只会出现在IE9以下 浏览器；
<!-- [if lte IE 6]-->
方式二：
-
-
-
-
在样式前面添加下划线 —，则该样式只有IE6及以下浏览器可以实现；
-
-
-
三、IE6的双边距问题
在IE6中，当为一个向左浮动的元素设置左外边距，或者为一个向右浮动的元素设置右外边距时，这个外边距将会是设置的值的2倍——IE6的双边距问题：
解决：
通过添加display：inline样式来解决IE6的双边距问题，虽然对于一个浮动元素来说设置行内块元素没有任何意义，但可以解决双边距问题；
.box1 { width: 100px; height: 100px; float: left; display: inline; background-color: red; margin-left: 100px; }
12.3、position定位
Positon使用场景：标准流和浮动都无法实现的效果，采用定位；
（1）浮动可以让多个块盒子一行没有缝隙排列，用于横向排列盒子；
（2）定位则是让盒子 自由的在某个盒子内移动位置 或 滚动窗口时固定在屏幕中心 某个位置，并且可以压住其他盒子；
当开启了元素的定位（position属性是一个 非static值）时， 可以通过left right top bottom四个属性来设置元素的偏移量；
如：left：元素相对于其定位位置的左侧偏移量； 脑海应该有三种布局机制的上下顺序： 标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空） 通常偏移量只用两个方向属性就可以对元素定位，相当于x y;坐标的概念：
例：
p { position：relative； left：100px； top：200px； }
注意：
-
-
-
边偏移需要和定位模式联合使用，单独使用无效；
-
top和bottom不要同时使用； -
left和right不要同时使用。
-
-
1、定位模式：
| 定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换（行内块） | 使用情况 |
|---|---|---|---|---|
| 相对定位relative | 不脱标，占位 | 相对自身位置移动 | 不能 | 基本单独使用 |
| 绝对定位absolute | 完全脱标，不占位 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
| 固定定位fixed | 完全脱标，不占位 | 相对于浏览器移动位置 | 能 | 单独使用，不需要父级 |
| 静态static | 不脱标，正常模式 | 正常模式 | 不能 | 几乎不用 |
| 粘性定位sticky | 不脱标，占位 | 相对于浏览器移动位置 |
1、相对定位：relative
（1）当开启了相对定位以后，而不设置偏移量时，元素位置不会发生任何变化：
（2）相对定位是相对于元素在文档流中 原来的位置进行定位；
（3）相对定位的元素不会脱离文档流，元素在文本流的位置不会改变，还会占位；
（4）相对定位会使元素提升层级，定位元素盖住元素；
（5）相对元素不会改变元素的性质，块还是块，内联还是内联；
2、绝对定位：absolute
（1）特点：
-
-
-
-
-
开启绝对定位，会是元素完全脱离文档流，不再占位；
-
如果不设置偏移量，元素的位置不会发生变化；
-
绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的，如果所有的祖先元素都没有开启定位，则会按照浏览器窗口（左上角）进行定位，通常用于轮播图；
-
绝对定位会使元素提升层级；
-
绝对定位会改变元素的性质，内联（行内）元素会变成块元素，块元素宽和高都被内容撑开；
-
-
-
-
（2）绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
（3）子绝父相
子级是绝对定位的话，父级要用相对定位；
子盒子不需要占有位置，则是绝对定位，父级需要占位置，所以是相对定位；
3、固定定位：fixed
-
-
-
-
固定定位也是一种绝对定位，他的大部分特点和绝对定位一样；
-
不同的是固定定位永远相对于浏览器 窗口（页面可视区）定位；
-
固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动；
-
-
-
① 固定定位小技巧：固定在版心右侧
小算法：
-
-
-
-
-
让固定定位的盒子left：50%，走到浏览器可视区（版心）的一半位置；
-
让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置，就可以让固定定位的盒子贴着版心右侧对齐了；
-
-
-
-
淘宝轮播图： ① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。 ② margin-left: -100px;：让盒子向左移动自身宽度的一半transition：50% 自身宽度一半
② 固定定位特点：
（1）IE6不支持固定定位；
（2）绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片） ；
但是绝对定位（固定定位） 会压住下面标准流所有的内容。 浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素。
注意：脱标的盒子不会触发外边距塌陷 ，浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
4、粘性定位：sticky（了解）
（1）特点：
-
-
-
-
-
以浏览器的可视窗口为参照点1移动元素（固定定位特点）
-
粘性定位占有原先的位置（相对定位特点）
-
必须添加top left right bottom其中的一个才有效；跟页面滚动搭配使用，兼容性差，IE不支持；
-
-
-
-
（2）语法：
p { Position：sticky； top：10px; }
5、静态定位：static
.promo-nav { position: absolute; bottom: 15px; left: 50%; margin-left: -35px; width: 70px; height: 13px; background: rgba(255,255,255,.3); border-radius: 7px; }
固定定位案例：
-
固定定位的应用场景：固定在浏览器可视窗口某个位置的布局；
-
在使用固定和绝对定位时，如果盒子中没有内容，需要指定宽度
步骤 1 —— 顶部图片和底部内容
.top { /* 注意：使用固定定位时，如果盒子中没有内容，需要指定宽度 */ width: 100%; height: 44px; background: url(images/top.png) no-repeat top center; position: fixed; left: 0px; top: 0px; } .box { width: 1002px; /* 顶部的 44px 的 margin 可以让 box 显示在顶部图片下方 */ margin: 44px auto; }
注意：
-
在使用固定定位时，如果盒子中没有内容，需要指定宽度
-
设置底部内容图片的顶部
margin，可以让底部盒子初始显示在顶部图片的下方。
步骤 2 —— 左右两侧广告
.ad-left, .ad-right { position: fixed; top: 100px; } .ad-left { left: 0px; } .ad-right { right: 0px; }
注意：不要同时使用 left 和 right 和边偏移属性。
定位：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位以带有定位的父级元素来移动位置</title> <style> .yeye { width: 500px; height: 500px; background-color: skyblue; position: absolute; } .father { width: 350px; height: 350px; background-color: pink; margin: 100px; /*标准流的子盒子总是以父级为准移动位置*/ /*如果 父级 没有定位 绝对定位子盒子 以我们文档为准浏览器移动位置*/ /*如果 父级 有定位 绝对定位子盒子 以父级为准移动位置*/ /*position: relative;*/ } .son { width: 200px; height: 200px; background-color: purple; /*margin-left: 100px;*/ position: absolute; top: 50px; left: 50px; } </style> </head> <body> <div class="yeye"> <div class="father"> <div class="son"></div> </div> </div> </body> </html>
定位的扩展
2.1 绝对定位的盒子居中
注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。
在使用绝对定位时要想实现水平居中，
-
-
-
left: 50%;：让盒子的左侧移动到父级元素的水平中心位置； -
margin-left: -100px;：让盒子向左移动自身宽度的一半。
-
-
2.2 盒子居中定位示意图
2.3 堆叠顺序（z-index）
在使用 定位 布局时，可能会 出现盒子重叠的情况，z-index只能用于定位。 加了定位的盒子，默认**后来者居上**， 后面的盒子会压住前面的盒子。 应用 `z-index` 层叠等级属性可以**调整盒子的堆叠顺序**。
z-index 的特性如下：
-
-
-
属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
-
如果属性值相同，则按照书写顺序，后来居上；
-
数字后面不能加单位。
-
-
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
2.4 定位改变display属性
前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:
-
-
-
-
可以用inline-block 转换为行内块
-
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
-
绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
-
-
-
所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
完善新浪导航案例
同时注意：
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。
