标签样式初始化
为什么要初始化css代码
首先是因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初 始化往往会出现浏览器之间的页面显示差异
其次初始化CSS样式可以提高编码质量，保持代码的统一性，如果不初始化每次用到都要进 行单独的修改，整个页面做完很糟糕，重复的CSS样式很多。
怎么做
使用通配符（*），重置所有的初始样式（color=#536D92]不推荐！[/color]）
原因：
*（星号）代表通配符表示了所有的标签，编写代码的时候也非常快，但是这样写有一个弊端，就是在网站比较大时，CSS样式文件也很大，这样写时，它会把所有的标签都初始化一遍，这样会加大网站运行的负荷，会让网站加载的时候需要很长一段时间。
用到哪个清除哪个，常见标签清除默认样式如下：
body{
margin: 0;
font: 14px "微软雅黑";
}
font 以（设计图）出现次数最多的字体大小和字体进行设置（字体样式可以继承）
h1,h2,h3,h4,h5,h6,p,dl,dd,figure{
margin: 0;
}
h1,h2,h3,h4,h5,h6,strong,b{
font-weight: normal;
}
em,i,cite{
font-style: normal;
}
ul,ol{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: black;
}
img{
vertical-align: top;
border: none;
}
color以（设计图）出现次数最多的字体颜色进行设置
所有转为inline-block的元素，记得最好也加上vertical-align:top
标签类型转换
display:
- block 块
- list-item （列表项，在块的基础上多了列表样式）
- inline 内联
- inline-block 内联块
- none 无（该元素会隐藏起来，经常可以用来做下拉菜单）
注意：本身是内联，通过display转为块的标签，是可以放在内联标签里面的
转化为inline-block
- 注：元素换行会产生（解析）空格，给父级加font-size:0;进行处理
- 注：转化为inline-block之后记得给元素加上vertical-align:top;（默认基线对齐 方式改为顶部对齐，处理底部出现空隙的问题
浮动(float)
1.CSS 布局的三种机制
CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：
- 普通流（标准流）
- 块级元素会独占一行，从上向下顺序排列；
- 常用元素：div、hr、p、h1h6、ul、ol、dl、form、table
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
- 浮动
- 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
- 定位
- 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。
2.为什么需要浮动？
思考题：
我们首先要思考以下2个布局中最常见的问题？
- 如何让多个盒子(div)水平排列成一行？
- 如何实现盒子的左右对齐？
虽然我们前面学过行内块（inline-block） 但是他却有自己的缺陷：
- 它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。
- 它不能实现以上第二个问题，盒子左右对齐
一句话总结
因为一些网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。
我们使用浮动的核心目的——让多个块级盒子在同一行显示。 因为这是我们最常见的一种布局方式
3.什么是浮动(float)
概念：元素的浮动是指设置了浮动属性的元素会
- 脱离标准普通流的控制
- 移动到指定位置。
作用
- 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
- 可以实现盒子的左右对齐等等..
- 浮动最早是用来控制图片，实现文字环绕图片的效果。
语法
在 CSS 中，通过 float 中文， 浮 漏 特 属性定义浮动，语法如下：
选择器 { float: 属性值; }
| 属性值 | 描述 |
|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动的特征：
- 使用浮动的元素会排成一行。
- 使用浮动的内联样式会支持宽高，变在块样式；
- 使用浮动的样式，默认是由内容撑开宽度高度；
- 支持margin,padding。但不是支持margin:auto;
BFC（Block Formatting Context ）块级格式化上下文
一个独立渲染区域的名称（布局环境的名字），只有Block-level box参与，它规定了内部的Block-level box 如何布局，并且不影响BFC区域以外的内容，当然BFC以外的也影响不了里面的。
在这一套规则下面，【元素里面的内容不会干扰元素外面的内容】，所有的元素都会按照文档流的排列方式进行排列。
BFC的作用：
- 包含浮动元素，解决父级高度塌陷问题
- 阻止margin的传递
- 不被浮动元素覆盖
BFC的触发条件：
- float值不为none;
- overflow值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute 、 fixed
4.浮动(float)的扩展
1). 浮动元素与父盒子的关系
- 子盒子的浮动参照父盒子对齐
- 不会与父盒子的边框重叠，也不会超过父盒子的内边距
2). 浮动元素与兄弟盒子的关系
在一个父级盒子中，如果前一个兄弟盒子是：
- 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
- 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
建议:
如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题
清浮动
1.为什么要清除浮动
因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。
2.清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
3.清除浮动的方法
在CSS中，clear属性用于清除浮动，在这里，我们先记住清除浮动的方法，具体的原理，等我们学完css会再回头分析。
选择器{clear:属性值;} clear 清除
| 属性值 | 描述 |
|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
但是我们实际工作中， 几乎只用 clear: both;
1.额外标签法(隔墙法)
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
- 优点： 通俗易懂，书写方便
- 缺点： 添加许多无意义的标签，结构化较差。
2.父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3.使用after伪元素清除浮动
:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了
使用方法：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
Δ after给当前父级添加一个，处于最后位置的子元素（clear只对前面的元素有效）
Δ content 添加内容
Δ display:block 只有添加给块标签有效
Δ clear:both 同时清除左右方向的浮动
注意：上述任何一项都不可以丢！！！
- 优点： 符合闭合浮动思想 结构语义化正确
- 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
4.使用双伪元素清除浮动
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
- 优点： 代码更简洁
- 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
5. 如果可以使用固定高度，可以直接给父级添加固定高度（不推荐）
6. 父级触发BFC
BFC的触发条件
4.清除浮动总结
什么时候用清除浮动呢？
- 父级没高度
- 子盒子浮动了
- 影响下面布局了，我们就应该清除浮动了。
| 清除浮动的方式 | 优点 | 缺点 |
|---|
| 额外标签法（隔墙法） | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差。 |
| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
伪元素（before和after）
伪元素：利用css给一个标签创建出来的子级元素，该元素在页面中真实存在，但是在html中并不存在。
before：
往指定的标签的内部的 前端 添加内容
after：
往指定的标签的内部的 后端 添加内容
注意：before和after都需要利用content添加内容，所有的样式针对该内容进行设置
content可以添加的内容：
文字
<head>
<style>
.box{
color:green;
}
.box:before{
content: '陌';
color:red;
}
.box:after{
content: '花';
color:blue;
}
</style>
</head>
<body>
<div class="box">上</div>
</body>
调用当前元素的属性
<head>
<style>
a::after{
content:attr(href);
}
</style>
</head>
<body>
<a href="https://moshanghua.net/"></a>
</body>
url() 引用媒体文件
<head>
<style>
div::after{
content:url(1.png);
}
</style>
</head>
<body>
<div>这是一张图片</div>
</body>
添加图标
-借助一些现有的图标库，通过content添加