前端规范+盒模型+浮动
前端规范:
（不用a标签是鼠标箭头变为手指：cursor：pointer;）
html页面部分
(1)标签要成对出现
(2)标签与标签对齐，里层的标签要有一个tab缩进
(3)开发项目的时候一定要写好注释
css
(1)有注释
(2)*通配符 { } 直接用*并不是不可以
最好把所有标签体现：
html,body,h1,h2,h3,h4,h5,h6,p{
padding: 0;
margin: 0;
}
1. 有关border
下边框
border-bottom:1px solid #333;
上边框
border-top:1px solid #333;
左边框
border-left:1px solid #333;
右边框
border-right:1px solid #333;
2. 图片如何实现居中
img----行内块
（1）将img转成块------ display: block;
（2）一定要给图片宽度
（3）居中（margin: 0 auto;）
宽度与margin: 0 auto;要结合使用-----auto居中 *****错误写法------ margin: auto auto;(margin的第一个值不能是居中)
注意事项：*********
&&&
img外层没有套块级标签 ----- <img alt="最新消息">
在这种情况下
text-align: center; 无效（只适用于文本）
img外层套块级标签 ------
<div class="pic">
<img alt="最新消息">
</div>
将text-align: center;这个属性给在div.pic上，那么此时 text-align: center; 有效
3. 行高
段落 line-height:2; (不用加单位)
首行缩进 line-height:2em;（加单位）
2em 首行缩进了2个文字的大小
4. ./叫当前目录的根目录
./和直接文件名.文件格式----------是一样的
../ ------回退一层
5. 盒模型
内边距 --- padding 应用场景：嵌套的
左内边距 padding-left: 20px;
右内边距 padding-right:20px;
上边距 padding-top:20px;
下边距 padding-bottom:20px;
（同下）
外边距 --- margin 应用场景：两个独立的块与块之间的距离
(1)-----一个值
左外边距 margin-left: 20px;
右外边距 margin-right:20px;
上外边距 margin-top:20px;
下外边距 margin-bottom:20px;
(2)-----两个值
margin: 10px 20px; (第一个值指的是上下 第二个值指的是左右)
(3)----三个值
margin: 5px 8px 15px;(第一个值指的是上 第二个值指的是左右 第三个是下)
(4)----四个值
margin: 5px 10px 8px 20px; (上 右 下 左) 顺时针
padding 和 margin的区别： 核心知识点
******** 外边距能够调盒子的位置
******** 内边距能够改变盒子的大小
margin自身存在外边距合并问题------取最大值进行合并
如何解决:
一般在开发页面中（给其中一个盒子下边距，那么就一直下边距）不要一个盒子给下边距 一个盒子给上边距
注意事项：
块元素-------支持上下左右 padding margin
行标签-------只支持左右padding 上下padding不支持 只支持左右margin ，上下margin不支持（跟转成块无关）
想让上下内边距生效-----------把行标签转成块标签 display：block；
1. 浮动---用用场景 （横向导航）
display:inline-block; （本身存在一个小bug） 默认存在空隙
li标签自带的样式去掉 list-style:none;
float:left; ----左浮动
float:right; ----右浮动
只要元素浮动，那么就会出现问题（外层容器无法包裹住里层元素）
解决？？？？？
清除浮动解决-----清除浮动给在浮动元素的父级
.clearfix:after{
display: block; //转成块
clear: both; //我自己不跟左边浮动，也不跟右边浮动
content:''; // 用了：after------伪类
}
******** 把清除浮动的类clearfix，给在浮动元素的父级元素上即可
清除浮动，相当于一个挡板，隔离的作用
文字颜色给在a身上