前端基础笔记08

浮动时使用text-align：center 没效果
而display：inline-block；时使用有效
15网站的底部
.foot ul{
 text-align:center;
}
.foot li {
 display:inline-block;
}


一、 定位


定位中的z-index：
  作用：设置页面中元素的层级关系
  取值：正整数
  z-index : auto | number 
  语法取值
  auto    :　 默认值。遵从其父对象的定位。 
  number  :　 无单位的整数值。可为负数。


对于未指定此属性的绝对定位对象，
此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。




二、html中标签的嵌套规则


  行内元素
  
  块级元素


  标签之间是不能随意嵌套的


  嵌套注意：
  1、行内元素只能包含行内元素
  2、块级元素可以包含所有的行内元素和部分块级元素
  3、p标签，h标签都不能包含块级元素




块级元素(block element)    3-2-3
    div -最常用的块级元素
     p - 段落
    form - 交互表单
     h1 - 大标题
    hr - 水平分隔线
    ol - 排序表单
    dl - 和dt dd搭配使用的块级元素
    ul - 非排序列表


内联元素(inline element)
a - 锚点
b - 粗体(不推荐)
br - 换行
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
label - 表格标签
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
  
三、精灵图


 1.就是将网页上的一些较小的图片放在一张大图上


 2. 为神魔要有精灵图 ：


      最早的时候网速十分有限，为了提升用户的体验我们会将一张大图
分解成多张小图来提高网页打开速度，但是网速得到提升，为了能让服务器
承载更多的请求，我们要减少浏览器对服务器的请求，最直接的办法就是
将多张小的图片放在一张大图上，从而减轻服务器的压力。
   而将多张小图放在一张大图上的操作就是精灵图，也可以叫做雪碧图，或雪碧技术




 3.  精灵图的使用步骤：
    
   1.0 如果我们需要的一张图在精灵图，必须了解这个图片的大小，以及在精灵图上的位置
        
   2.0 在页面上将这个图片显示出来，在显示的时候一定要注意我们容器的大小要和
       这个图标的大小一样
 
   3.0 将精灵图设置为容器的背景图片；并且根据图片所在位置将背景图片
       进行平移


4.制作精灵图
   1.0 精灵图必须是一些小的图片
   2.0 精灵图的多个小图之间一定要留有足够的间隙
   3.0 精灵图的大小一定要大于所有图片中最大的那个
   4.0 完成精灵图以后一定要在精灵图的下方留有足够的空隙，方便将来在此添加其他的精灵图
   5.0 如果是页面上一个像素的背景图片 不要放在精灵图上






四、css的初始化
    每个浏览器都有不同的标签解析方式，为了让浏览器显示的页面效果一样，
    需要清除浏览器的默认样式
   1、清除标签的margin的padding
     html，body，ul，ol，li，p，dl，dt，h1，h2，。。。h6，form，fieldset，
     legend，img{margin:0;padding:0;}   //选择自己需要的标签
 
   2、清除img的边框
     img{border:0};
  
   3、清除li前的点：
  ul{list-style:none}


   4、给页面设置一个统一的字体颜色和大小，以及body的背景颜色
  body{
font-size:12px;
color:red;
background-color:blue;


   5、清除浮动
.clearfix:after{
content:"";
height:0;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
.clearfix{
zoom:1;
}                                                    *{}= body= img= ul= a  =设置浮动 = 清除浮动
   6、a标签设置字体颜色，去掉下划线
   a{color:red;text-decoration:none;}
   a:hover{color:blue;}


7、设置浮动
 .fl{float:left;}
 .fr{float:right;}