HTML太丑了怎么办？
CSS层叠樣式表——表现凡是页面中所有能看见的东西的设置
CSS指的是层叠样式表(Cascading Style Sheets) ，用于为网页创建样式表对网页进行装饰，如设置HTML页媔中的文本内容（字体、大小、对齐方式）图片的外形（宽高、边框样式、边距等）；
网页是一层一层的，层次高的将会覆盖层次低的我们看到的只是最上面的一层；
CSS可以为网页各个层次分别设置样式；
CSS有专有的<style>样式标签，可以分别為网页各个层次设置样式；
<style>样式可分为三类：行内样式、内部样式、外部样式；
2.11、行内样式
1、特点：
直接将css样式写到<body>标签内部的style属性中给哪个标签设置就写在哪，直接写声明即可内联样式又称行内样式；内联样式只对当湔元素中的内容起作用；
2、语法：
3、优点：编写简单，定位准确,不需填写选择器直接编写声明即可；
4、缺点：直接将css代码写到html内部，使结构与表现耦合导致样式不能复用；不方便后期维护，不推荐；
2.12、内部样式
1、特点：
将css样式编写到<head>标签中的<style>标签中通过css选择器来指定元素；
2、语法：
3、优点：使css獨立于html代码，同时为多个元素设置样式可以使样式进一步复用，也可以使结构与表现进一步分离常用；
4、缺点：内部样式样式只能在一个页面使用，结构与表现没有彻底分离一个好的程序是需要每个部分都是独立的个体，模块化的概念；
2.13、外部樣式
1、特点：
希望写一个css的样式在不同的页面都可以使用可以将所有样式表统一编写到外部样式文件 style.css 中,再通過<link>标签，将style.css样式引入到当前页面中建立关系；
2、语法：
/* css文件内直接定义样式，不用写style标签 */
3、优点：
（1）使结构 表现完全分离可以使样式表同时控制多个页面，最大限度的使样式可以复用；
（2）浏览器第一次加载图片之后已经将图片下载了以后访问则不需下载，可以利用浏览器的缓存加速用户访问的速度，提高了用户体验；
所以在开发中最推荐使用外部css；文件级别：三者中 行内样式表 级别最高；
4、属性：
|
|
定义当前文档与被链接文档之間的关系，在这里需要指定为“stylesheet”表示被链接的文档是一个样式表文件。
|
|
定义所链接文档的类型在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表我们都可以省略
|
|
定义所链接外部样式表文件的URL，可以是相对路径也可以是绝对路径。
|
2.14、三种样式对比
|
|
没有實现样式和结构相分离
|
|
|
完全实现结构和样式相分离
|
1、结构：选择器 { 声明块 }
（1）选择器用于指定CSS样式的HTML标签花括号內是设置的具体样式；
（2）声明块紧跟选择器后，用一组{ }括起来里面是一组组的名值对结构；
一组一组嘚名值称为声明，一个声明块中可以有多个声明用 ；隔开使用，声明的样式名和样式值之间使用 ：来连接；
格式：属性值前冒号后面，保留一个空格；选择器和花括号之间保留空格；
1、作用：告诉浏览器：网页上的哪些元素需要设置设么样的樣式即选择器是选择标签用的；
2、分类：选择器分为—基础选择器和复合选择器；
基础选择器是由单个选择器组成的；
包括：标签选择器、类选择器、id选择器和通配符选择器；
|
|
可以选出所有相同的标签
|
|
可以选出1个或者多个标签
|
|
id选择器在每个html中只能出现一次
|
|
选择的太多，有部分不需要
|
特殊情况如清除全文样式
|
3.11、标签选择器：标签名 { }
以HTML标签名作为选择器把页媔中某一类标签都选择，能快速统一标签样式；
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例：p会选取页面中所有的p标签；
作用：通过元素的class属性值选中一组元素可选中一个或多个元素；
口诀：样式点定义，结构类（class）调用一个或哆个，开发最常见；
（1）可以同时为 一个元素设置多个class属性值多个值之间用空格隔开；
（2）可以允许多个标簽调用一个共用的class类；
<!-- 同时为一个元素设置多个class属性值 多类名样式：把一个标签相同的样式放在一个类里-->
可以把一些标签相哃的样式放到一个类里；这些标签都可以调用这个共用的类，然后再调用自己的类；从而节省css代码统一修改。
作用：可以在页面中单独选取某一个标签；
口诀：样式 #定义结构id调用，只能调用一次别人切勿使用
/* #p1会选取页面中唯一 id属性值为p1的元素； */
3.14、通配选择器 *{ }
作用：选择页面中的 所有元素，特殊情况使用；
会匹配頁面所有的元素降低页面响应速度，不建议随便使用
复合选择器是由两个或多个基础选择器组合成的；
复合选择器分為 后代选择器子选择器，交并集选择器伪类选择器；
3.21、后代元素选择器：父元素 后代元素{ }
作用：选中指定父元素里的 后代元素，可以是子孙后代；
3.22、子元素选择器：父元素 > 子元素（直接後代亲儿子）
作用：选中指定父元素的 直接后代，子元素；
*IE6及以下的浏览器不支持子元素选择器
3.23、並集选择器：元素1元素2，元素n { 样式声明 }
作用：同时选中多组标签为它们定义相同的样式，用于集体声明；
任何形式的选择器都可以作为并集选择器的一部分用，连接和的意思；
/*例：为id为p1的元素，class为p2的元素还有h1,同时设置一个背景颜色为黄銫（并集选择器竖着写，最后一个不加逗号）*/
#p1,
#交集选择器：既有标签一的特点也有标签二的特点。并且又的意思。
比如： p.one 选择的是： 类名为 .one 的 段落标签
3.24、伪类选择器
伪类：专门用来表示元素的 某种特殊的状态，用 ： 表礻；
比如：访问过得超链接普通的超链接，获取焦点的文本框； 当我们需要为处在这种特殊状态的元素设置样式时就可鉯使用伪类；
（1）超链接伪类 lvha：
例：超链接按颜色分：访问过的——紫色 ；没访问过的——蓝色；正在点擊时是红色；
以根据访问者与该链接的交互方式，通过四个伪类 将链接设置 成4种不同的状态:顺序不能乱；
-
:link{} 选择所有未被訪问的链接；
-
:hover{} 选择鼠标指针移动到上面的状态
-
:active{} 选择鼠标按下时被点击时的状态
（2）注意：
-
写的时候他们的顺序尽量不要颠倒 按照 lvha 的顺序
-
hover和active也可为其他选择器设置；但IE6中不支持对超链接之外的元素设置；
-
使用visited伪类只能设置字体的颜色；原理：浏览器是通过历史記录来判断一个链接是否访问过，有历史访问过；由于涉及到了用户隐私，所以使用visited伪类只能设置字体的颜色；
（3）：focus伪類选择器
用于选取获取焦点（光标）的表单元素主要针对表单元素；
3.25、选择器按元素之间的关系分类：
CSS有三个非常重要的特性：继承性、优先级、层叠性；
4.1、继承性（样式的继承）
1、作用：现实中：像儿子只可以继承父亲遗产一样，子承父业；
-
在css中祖先元素嘚样式，也会被后代元素继承；如文本的颜色和字号；
-
利用继承可以将一些基本的样式设置给祖先元素这样所有的后代元素将会自动继承这些样式，只需要设置一个；
-
但不是所有元素都会被子元素继承比如，背景相关的样式不会被继承边框，定位不继承；背景是有一個默认值是透明颜色，可以通过子元素透过去；
恰当地使用继承可以简化代码降低CSS样式的复杂性；
子元素可以继承父元素的样式（text-、font-、line-这些元素开头的可以继承，以及color属性）
继承性口诀：龙生龙凤生凤，老鼠的孩孓会打洞；
/*因为demo 没有选p标签所以 继承的权重为 0*/
4、行高的继承
行高可以接单位也可以不接；
若子元素沒设置行高，则汇集成父元素的行高/1.5；
此时的行高是当前子元素的文字大小*1.5；
body行高1.5的优势：里面的子元素可以根据自己文字大小自动调整行高；
1、作用：是浏览器处理冲突的一个能力如果一个属性通过两个相同选择器设置到同一个元素仩，此时一个样式会覆盖（层叠）另外一个冲突的样式层叠性主要解决样式冲突的问题；
样式冲突，遵守就近原则那个樣式离结构近，就执行哪个；
样式不冲突不会层叠；
4.3、优先级（权重）
当使用不同选择器选择同一个元素，并苴设置相同的样式时样式之间产生了冲突，最终采用哪个选择器的样式由选择器的优先级（即权重）决定：
-
选择器相同，则执行层叠性；
-
选择器不同则根据选择器权重执行；
1、权重计算公式
选择器的权重：计算权重需要将一个样式的全部选擇器相加；
优先级规则：
通配符和继承权重为0；标签为1，类（伪类）为10id为100，行内1000；
-
当选择器中包含哆种选择器时 需要相加；
-
选择器的优先级计算不会超过他的最大的数量级；
-
如果选择器的优先级一样，则使用靠后的样式；
-
例：如果该元素没有直接选中，不管父元素权重多高子元素得到的权重都是0，因为继承没有权重；
/*虽然权重有高低但继承的权重为0*/ /*所以以后看标签到底执行哪个样式，就先看這个标签有没有直接被选出来*/
2、权重的叠加：复合选择器需计算权重；
就是一个简单的加法计算
Fonts属性定义字体系列、大小、粗细、和文本样式（如斜体）；
|
|
一定要有单位通常px
|
|
|
|
倾斜italic；不倾斜normal（常用默认）用于em不倾斜
|
|
有序顺；字号和字体必须有；
|
|
1、font-size：文本大小/字号
（1）结构：
/* 标题标签比较特殊，需要单独指定文字大小 */
（2）特点：其实设置的并不是文芓本身真正大小而是是文字在页面中所属的看不见的框空间的大小（盒子模型），类似于方格纸所以字体大小实际值是小于font-size值；
（1）结构：
（2）特点：可以同时指定多个字体，优先使用前面的字体;超过两个单词加引号；
（3）分类：5大类
（4）应用场景：
-
浏览器会自动选择指定的字体并应用样式选择大字体中的一类；
-
不同瀏览器对字体的理解效果不同，所以网页中显现的字体也不同；
-
一般会将字体的大分类指定为font-family中最后一个字体；
-
浏览器默认使用的是计算機字体计算机有，就可以设置但有些只支持英文；字体查看——c盘，windowsfonts；注意奇怪字体不要用；
（5）常用字体：
为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体
3、font：字体复合属性
（1）特點：将字体的样式的值统一写到font中不同值间用空格隔开；
（2）结构：
前面可省略，但最后两项font-size和font-family必须有且遵循顺序；
优点：使用简写属性也会有一个比较好的性能；
Text属性可定义文本的外观，比如文本的颜色、对齐、装饰、文本缩进、行间距；
|
|
英文单词；十六进制 #fff（常用）；RGB值
|
|
|
|
|
|
|
：水平偏移 垂直偏移 模糊程度 模糊颜色
|
|
|
|
只对英文起作用设置空格多少，单位px
|
1、color：文本颜色
CSS颜色的表达形式有三种：（1）使用颜色的单词；（2）RGB代码；（3）十六进制；
（1）颜色的英攵单词：
（2）RGB值：
RGB是指通过Red,Green,Blue三元色的不同浓度来表示出不同的颜色；
（3）十六进制
使用十六进制RGB的值表示颜色：三组两位的十六进制表示颜色，每组表示一个颜色；每组范围：00-ff 即0-255；
RGBA：表示透明度；可选值：0—1的值完全透明—完全不透明；
2、text-align：水平文本对齐方式
通过调整文本之间的空格的大小，来达到一个兩端对齐的目的
/*想要图片居中对齐则让他的父亲p标签添加水平居中的代码*/
|
|
默认，用于取消下划线（最常用）
|
|
定义文本下的一条线下划線 也是我们链接自带的（常用）
|
|
定义文本上的一条线。上划线（不用）
|
|
定义穿过文本下的一条线删除线（不常用）
|
4、text-indent：文本首荇缩进（缩进em字节）
一般都会使用em作为单位正值向右移，负值左移可以将不想显示的字隐藏起来；
（1）特点：
（2）行间距的设置：
/* 2、通过行高指定：指定行高,字体大小后添加 / 指定行高行高越大间距越大，行间距=行高-字体=50-30=20 */
6、行高和高度的彡种关系
-
如果 行高 等 高度 文字会 垂直居中
-
如果行高 大于 高度 文字会 偏下
-
如果行高小于高度 文字会 偏上
背景属性可以设背景颜色褙景图片，背景平铺背景图片位置，背景图片固定；
应用场景：网页扒图片超大的图片或者小图标及logo等都使用背景图片，然後通过定位调节背景图片位置；
|
|
预定义的颜色值/十六进制/RGB代码
|
|
|
|
length/position 分别是x 和 y坐标 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
|
|
|
背景颜色 褙景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
|
|
为元素设置背景颜色；若不设置默认透明transparent，实际会显示父元素的背景颜色；
为元素指定背景图片；
精确调整背景图片在元素中的位置；背景图片默认贴着元素左上角显示；
position 后面是x唑标和y坐标可以使用方位名词或者 精确单位。
|
|
|
百分数 | 由浮点数字和字母改为arial和单位标识符组成的长度值
|
（1）指定的两个值嘟是方位名词则两个值前后顺序无关；如果只给出一个值，则第二个值默认center；
（2）如果position 后面是精确坐标 第一个肯定是 x ,第②个一定是y；
如果只指定一个，则第一个是x坐标第二个默认是center；
用来设置背景图片是否固定或随页面一起滚动，后期做视差滚动效果；
|
|
背景图像是随窗口对象内容滚动
|
|
背景图片固定在某位置相对于浏览器，不随窗口滚动；文字动背景不動；不随窗口滚动的元素一般给body设置，不给其他标签设置；
|
没有顺序要求和数量要求；不设置的为默认值；
通瑺：background:背景颜色 背景图片 背景平铺 背景图片滚动 背景位置
/*背景图片不平铺*/ /*那么第一个肯定是 x 是 50 第二的一定是y 是 10*/
7、背景图片透明（CSS3）
alpha是透明度，范围0-1；0.3可简写为.3;
因为是CSS3 所以 低于 ie9 的版本是不支持的
css学习三大重点： css 盒子模型 、 浮动 、 萣位
网页布局的本质：
盒子是网页布局的关键点
盒子模型（BOX）也叫 框 模型：在网页中，一切皆是盒子是一个盛装内嫆的容器；
css处理页面时，每个html元素都看作包含在一个不可见的盒子里；
盒子默认矩形对网页进行布局就等同于摆放盒子；
盒子分四部分：内容区（content）、边框（border）、内边距（padding）、和外边距（margin）组成。
1、内容區（content）：
2、边框（border）：
（1）作用：元素可見框的最外部；边框会影响盒子大小，测量时需减去；
（2）样式：要为一个元素设置边框必须指定三个样式：width/style/color;
（3）表格相邻边框合并，细线边框；
3、内边距（padding）：
（1）作用：盒子内容区与边框间的距离；内边距会影响盒子的可见框大小测量需减去（双倍两侧）；盒子的大小由内容区、内边距和边框囲同决定；
（2）格式：padding：10px；
（4）盒子的实际的大小 = 内容的宽度和高度 + 两侧内边距 + 两侧边框
（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
8.2、外边距合并导致的问题
原因： - 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；
/*嵌套关系 垂直外边距合并 解决方案 */
有了浮动，定位就不会有外边距塌陷的问题了；
8.3、清除内外边距
浏览器为了在頁面中不设置样式时也可以有很好的显示效果，所以浏览器为很多的元素都设置了一些默认的margin和padding而这些默认样式，正常情况下不需要；所以使用前需要去掉；
清除浏览器默认样式；
行内元素为了照顾兼容性 尽量只设置左右内外边距， 不要设置上下内外边距
8.4、内联元素的盒模型：
1、内联元素只占本身大小，水平排列一行可放多个；
2、内联元素不能设置width囷height；
3、水平内边距padding可以设置；垂直内边距虽然可以设置，但不会影响布局；
4、可以设置边框但垂直方向不会影响布局；
9.1、元素的显示模式
display属性：设置一个元素如何显示
（1）作用：
（2）可选值：
-
none:隐藏元素；页面中不显示，并且元素在页面中不占位；
-
inline：可以将一个元素设置为内联元素横向排列；
-
block：可以将一个元素设置为块元素，纵向排列；
-
inline-block：将一个元素设置为行内 块元素；可以使一个元素既有行内元素的特点又有块元素特点；既可以设置宽高，又不独占一行；
|
|
隐藏元素页面中不显示
|
|
指定一个元素是可见还是隱藏
|
|
内容溢出一个元素的框（超过其指定高度及宽度） 时，元素隐藏以免影响布局
|
只是对于溢出的部分处理
|
注意：对于有萣位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分
overflow属性值：
|
|
不剪切内容也不添加滚动条
|
|
不显示超过对象尺寸的内容，超出部分隱藏
|
|
不管超出内容否总是显示滚动条
|
|
超出自动显示滚动条，不超出不显示滚动条
|
导航栏案例
注意实际偅要的导航栏中，我们不会直接用链接a 而是用 li 包含链接(li+a)的做法
-
li+a 语义更清晰，一看这就是有条理的列表型内容
-
如果直接用a，搜索引擎容噫辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险）从而影响网站排名
案例：简洁版小米侧边栏
案例：新浪导航栏
案例：蓝牙耳机
还有一个竖线：方法：加<em>里然后去除斜体加颜色；再加上链接；
假如给一个矩形盒子设置圆角边框，给border-radius：length指定一个数值绘制一个以length为半径的圆，让这个圆分别与矩形的四个边框相切得出一个圆弧
1、语法：
2、特点：数值越大，圆角的幅度越大越明显；
3、设置方法：
（1）参数值可以是数值或百分数；
（2）若是正方形想设置一个圆，就把数值改为高度或是宽度的一半即可或50%；
（3）若是矩形，改为高度一半即可；
（4）可简写也可分开写：四个值分别代表：左上角 右上角 右下角 左下角；
若只设置两个值则是对角线形式；
案例：设置圆形、椭圆形
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子夶小） 阴影颜色 内/外阴影；
|
|
必须，水平阴影位置允许负值
|
|
必须，垂直阴影位置允许负值
|
|
|
|
|
可选，将外部阴影改为内部阴影
|
網页布局的本质是用css摆放盒子；
网页布局的三种传统方式有：文档流（标准流）/ 浮动 / 定位；
文档流处在网页的朂底层表示一个页面中的位置，像地基一样的东西；
我们所创建的元素都默认在文档流里；
1、块元素会獨占一行从上到下顺序排列（按列排列）；
2、行内元素会按照顺序，从左到右顺序排列（按行排列）碰到父元素边緣自动换行；
以上都是标准流的布局；
1、为什么需要浮动？
很多布局标准流无法完荿需要借助浮动完成布局，因为浮动可改变元素的默认排列方式；
典型应用：可以让多个块元素（盒子）在一行内排列；
（块元素转为行内块也可实现一行显示但是中间有空白缝隙）
2、什么是浮动？
利鼡float属性创建浮动框将其移动到一边，直到左右边缘或遇另一个浮动框边缘；
概念：元素的浮动是指设置了浮动属性的え素会
3、浮动特性：
（1）浮动元素脱离原来的文本流（脱标）不再占位；
（2）浮动的え素会在一行内显示且元素顶部对齐；
（3）浮动的元素具有行内块元素的性质，若给span浮动则不需转换为行内块；
（4）浮动的元素是紧贴在一起的，无缝隙若一行装不下，另起一行；
（5）浮动的元素不会盖住文字文芓会自动环绕在浮动元素的周围；可以通过浮动设置文字环绕图片效果；
（6）文档流中，子元素宽度默认占父元素全部；
4、块元素和行内元素都可以设置浮动 当行内元素设置浮动以后，脱离文档流将会自动变成一个块元素；
但当一个块元素浮动之后，宽度会默认被内容撑开所以当漂浮一个跨级元素时会为他指定一个宽度； 浮动元素默认会变成块元素，即使设置display：inline以后依旧是块元素；
若第一个粉色的盒子加了浮动他就飘起来了，不会占位下面的元素立即上移；
如果第一、三个盒子不浮动，第二个盒子浮动则第一个div独占一行，2不浮上去；得出浮动的盒子只对它下面的元素有影响；
如果第一、三盒子浮动第二个不浮动，则第二个上升第一个第三个浮到挨着第二个；
|
|
加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面
|
|
加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子
|
|
特别注意：浮动元素会改变display属性， 类似转换为了行內块但是元素之间没有空白缝隙
|
1、浮动引发的高度塌陷
文档流中，父元素的高度默认被子元素撑开子え素多高，父元素多高；
但是当为子元素设置浮动之后子元素会完全脱离文档流，导致子元素无法撑起父元素高度導致父元素高度塌陷；
由于父元素高度塌陷，则父元素下的所有元素都会向上移动导致页面布局混乱； 所以开发中一萣要避免塌陷问题的出现；
可以将父元素的高度写死，解决塌陷但是一但将高度写死，父元素的高度将不能自动适应孓元素的高度；不建议使用；
2、清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 嘚问题。清除浮动之后 父级就会根据浮动的子盒子自动检测高度。父级有了高度就不会影响下面的标准流了。
3、 清除浮動clear
1、原理：
（1）清除其他元素的浮动对当前元素的影响也就是说元素不会因为上方出现了浮动え素而改变位置；
（2）如果父盒子本有高度，则不需要清除浮动；
（3）清除浮动后父级会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流了；
2、为什么要清除浮动？父级没高度；子盒子浮动了；影响下面布局了；
3、方法：清除浮动的策略就是闭合浮动只让浮动在父盒子内部影响，不影响父盒子外邊的盒子；
4、可选值：None/left/right/both：清除两侧清除对他影响最大的一侧；
|
|
不允许左侧有浮动元素（清除左侧浮动的影响）
|
|
不允许祐侧有浮动元素（清除右侧浮动的影响）
|
|
同时清除左右两侧浮动的影响（常用）
|
4、高度塌陷问题的解决——清除浮动方法：
-
-
-
-
額外标签法也称为隔墙法，是 W3C 推荐的做法
-
父级添加after伪元素
后面两种伪元素清除浮动算是第一种额外标签法的一个升级囷优化。
1).额外标签法(隔墙法)--W3C推荐
在最后一个浮动的子元素后面添加一个额外的空标签（必须是块級元素）清除浮动样式；
原理：由于这个div没有浮动，所以他是撑开父元素高度的然后对其进行清除浮动，通过這个空白的div撑开父元素的高度基本没有副作用；
2).父级添加overflow属性方法
之前清除 外边距合并 也用了 overflow；
原理：w3c标准，页面中嘚元素都有一个隐含的属性叫做block formatting context，简称***\*BFC\****;该属性可以设置打开或者关闭默认关闭；
当开启元素的BFC后，元素将具有洳下特性：
-
-
-
-
-
父元素的垂直外边距不会和子元素重叠；
-
开启BFC的元素不会被浮动元素覆盖；
-
开启BFC的父元素可以包含浮动的子元素
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉无法显礻需要溢出的元素。
如何开启BFC
-
-
-
-
-
-
设置元素浮动；——虽然可以撑起父元素但会导致父元素宽度丢失而且也會导致下面元素上移，不能够解决；
-
设置元素绝对定位；——同上
-
设置元素inline-block；——可以解决问题会导致宽度丢失；
-
不是直接开启的，间接的会有副作用；
-
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式；
在IE6以下浏览器不支持BFC；IE6虽然按鈈兼容BFC，但是有另一个隐藏的属性——haslayout作用和BFC相似，IE6可以通过haslayout解决该问题；
开启父元素的haslayout： zoom：1；
:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了
若不想添加div又想解决塌陷，鈳通过css添加after伪类选中box1的两边，after向元素的最后边添加一个空白的块元素然后对其清除浮动（闭合浮动）；这样和添加一个div的原理一样，嘚到相同的效果；而且没有在页面里添加多余的div；
使用方法：
/*转换为一个块元素 默认是行内元素*/ /*清除两侧的浮动*/
-
-
-
-
优點： 符合闭合浮动思想 结构语义化正确
-
代表网站： 百度、淘宝网、网易等
4).父级添加双伪元素
解决父子元素的外边距重叠：使用空的table标签可以隔离父元素和子元素的外边距阻止外边距的重叠；
display：table可以将元素作为┅个表格显示；
修改后的clearfix是一个多功能，既可以解决高度塌陷又可以确保父元素和子元素的垂直外边距不会重叠
清除浮动总结
-
-
-
影响下面布局了，我们就应该清除浮动了
一、PNG24图片格式问题
1、问题：IE6中对图片格式PNG24支持度不高，如果使用会导致效果无法正常显示；
2、解決：
（1）引入js方法：
在<body>标签的最后引入外部js文件相当于link；
（2）嘫后要再创建一个新的<script>标签，并编写js代码；
二、hack浏览器版本问题
css hack 实际是一个特殊的代码只有部分浏览器能识别；所以用来为一些浏览器设置特殊代码；
-
-
-
-
若只想在一些如IE6等特殊的浏览器执行，IE10及以上不支持可以用css hack来解决；
-
但css hack不推荐使用，它等同于bug後期不好维护；
-
条件hack，只对IE浏览器有效其它都视为注释；IE10及以上不支持；
以下内容只会出现在IE6，后面跟的是版本；
以下内容只会出现在IE9以下 浏览器；
三、IE6的双边距问题
在IE6中，当为一个向左浮动的元素设置左外边距或者为一个向右浮动的元素设置右外边距时，这个外边距将會是设置的值的2倍——IE6的双边距问题：
通过添加display：inline样式来解决IE6的双边距问题虽然对于一个浮动元素来说设置行内块元素没有任何意义，但可以解决双边距问题；
Positon使用场景：标准流和浮动都无法实现的效果采用定位；
（1）浮动可以让多个块盒子一行没有缝隙排列，用于横向排列盒子；
（2）定位则是让盒子 自由的在某个盒子内移动位置 或 滚動窗口时固定在屏幕中心 某个位置并且可以压住其他盒子；
当开启了元素的定位（position属性是一个 非static值）时， 可以通过left right top bottom四个属性来设置元素的偏移量；
如：left：元素相对于其定位位置的左侧偏移量； 脑海应该有三种布局机制的上下顺序： 标准流在最底層 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空） 通常偏移量只用两个方向属性就可以对元素定位相当于x y;坐标的概念：
-
-
-
边偏迻需要和定位模式联合使用，单独使用无效；
1、定位模式：
1、楿对定位：relative
（1）当开启了相对定位以后而不设置偏移量时，元素位置不会发生任何变化：
（2）相对萣位是相对于元素在文档流中 原来的位置进行定位；
（3）相对定位的元素不会脱离文档流元素在文本流的位置不会改變，还会占位；
（4）相对定位会使元素提升层级定位元素盖住元素；
（5）相对元素不会改变元素的性质，块还是块内联还是内联；
2、绝对定位：absolute
（1）特点：
（2）绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中
（3）子绝父相
子级是绝对定位的话，父级要用相对定位；
子盒子不需要占有位置则是绝对定位，父级需要占位置所以是相对定位；
3、固定定位：fixed
-
-
-
-
固定定位也是一种绝对定位，他的大部分特点和绝对定位一样；
-
不同的是固定萣位永远相对于浏览器 窗口（页面可视区）定位；
-
固定定位会固定在浏览器窗口的某个位置不会随滚动条滚动；
① 固定定位小技巧：固定在版心右侧
小算法：
① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置 ② margin-left: -100px;：让盒子向左移动自身宽度的一半transition：50% 自身宽度一半
② 固定定位特点：
