THML列表定位浮动框架

list-style-type  列表样式  list-style-image  列表图片          list-style-position 列表符号位置                inside进入列表inhert继承span行内容器
ul 无序列表    li列表项
ol  有序列表    li列表项
dl 自定义列表    dt标题   dd列表项
background-color ： #FF0000|| rgb(255,0,0)|| rgba(255,0,0,0.4)0.4透明度
background-color: rgba(255,0,0,0.4);
background-image:url(“图像地址”) 背景图像
background-repeat 如果图片小于该容器大小，就会自动重复平铺，可以设置这个属性来让他不重复
 no-repeat 不重复
 background-size  cover 原始图片比例拉伸
                      contain 按照容器大小拉伸
                      100% 100% 全部拉伸
background-position  如果图片比容器大，可以使用让图片位置向左向上移动来获取该图片中指定的子图

opacity 透明度

注意：

 background-color:rgba(255,0,0,0.4)这里的透明度仅应用于背景颜色，背景图片不能透明
 opacity 可以设置该容器所有内容透明，包括背景图片，但是会让容器下的所有东西透明
*padding:5px 10px 15px;*/
*border:1px solid #FF0000;*/
  顺时针 上右下左
        上下  左右
        上 左右 下
 border-width 边线宽度    border-color 边线颜色     border-style 边线样式
   /*border-width: 1px 2px 3px 4px;
    border-color: red blue greenyellow gold;
    border-style: dashed;*/
content 内容  width height 内容的宽高    padding  內间距  上下左右   border  边线   上下左右
 margin  外边距  上下左右  float: left;
box-sizing: border-box;

开启怪异盒子模型 

  width=border+padding+contentWidth
     height=border+padding+contentHeight
/*box-sizing: border-box;*/

浮动可以让首字下沉，文字块左右分离
消除浮动：让外容器拥有高度是适配于内容器（zoom：1；放大缩小比例）

.clearfix::after（给父级定义after\）{
content: “.";
display: block;
height: 0;
visibility: hidden;
clear: both;
 }
.clearfix{zoom:1} 

  content:"."  给外容器尾部增加一个字符.
 clear: both;  作用是把浮动清除掉，只这样做无法清楚浮动，因为只是一个字符，而清除浮动必须是块体
display:block  将任何内容转换成块体
  height: 0;     转换成块体后，会有高度的产生，我们设置高度为0， 这样就不产生这个块体高度了
  visibility：hidden  块体高度没有了，但是.仍然显示，使用这个可以隐藏.使用这种隐藏方式，会有占位。但是上面做了高度设置0，不会占位被表现

position: relative;

 相对原有位置定位left或者top相对原有位置偏移相对定位具备占位的功能因为相对定位是针对原有位置做的定位， 因此，如果这个块体在左上时尽量不要使用相对底部和右部定位也因此不会将块体拉大为外容器的100%
 position: absolute;
    绝对定位不占位，其它内容可以补充进去 使用绝对定位脱离文档流，所以外容器的高度就不会被撑开相对父容器，如果父容器没有指定宽高,没有指定定位时，只能找父级父级来做定位如果没有宽高，定位就无法做底部和右部的定位如果使用绝对定位时，父容器最好使用相对定位绝对定位时，如果外容器宽高指定时，设置块体的top,left,right,bottom为0时，自动100%比例扩大不要指定块体的宽度
position: fixed
相对窗口定位，不随屏幕滚动而改变
菜单主菜单相对定位子菜单绝对定位。
display :block  设置块状元素  独占一行可以设置宽高，可以设置margin-top
display:inline-block  设置行内块，不会独占一行，可以设置宽高,可以设置margin-top
display: inline 设置为行内元素，不独占一行，不能设置宽高和margin-top
 display: none;  隐藏不占位
/*深度*/
 z-index: -2;