CSS学习总结

/* 总结CSS学习 */
/* 1.字体样式 */
a{
     font-size: 20px; /* 字体大小 单位px em */
     font-family: "宋体";/* 微软雅黑 宋体 黑体  */
     font-family: Arial,"微软雅黑","宋体","黑体";/* 同时指定多个字体.中间以逗号隔开，浏览器如果不支持。会一直往后面找。 */
     font-family: "\5b8b\4153";/* \5b8b\4153：Unicode字体 */
     font-weight: bold;/* 默认值（不加粗）bold: 定义粗体(加粗的)100-900 400等同于normal.而700等同于bold */
     font-style: normal; /* normal:正常的字体 italic:整体倾斜(一般用于斜体标签(em,i)改为普通模式) */
     color: red;/* 自定义文字颜色 red:单词：#000000十六进制 rgb(255,103,0); */
     text-align: center;/* 文本水平对齐方式left:左对齐right:右对齐center:居中对齐 */
     line-height: 24px;/* 行间距 行距比字号大7-8个像素左右就可以了 */
     text-indent: 2em;/* 首行缩进 1em 就是一个字的宽度.如果是汉字的段落.1em就是一个汉字的宽度 */
     text-decoration: none;/* 文本装饰-文本线条 none:默认：定义标准的文本。取消下划线underline 定义文本下的一条线。下划线也是我们链接自带的（常用）overline:定义文本上的一条线。 line-through:定义穿过文本下的一条线 */
     text-decoration: none;/* 取消a标签的下划线 */
     text-decoration: underline;/* 文字底部加一条下划线 */
     text-decoration: line-through;/* 原价 文字中间加一条线 */
     font:normal 700 20px "微软雅黑" /* 综合写法 font:font-style font-weight font-size/line-height font-family */
}
/* 2.选择器 */
/* 后代选择器选择后面的全部 */
div strong {
    color: #FF0000;
}
 /* 子元素选择器。只显示直属的 */
div>strong {
    color: #FF0000;
}
/* 交集选择器。即是**关系,又是**关系; */
p.red{
    color: red;
}
/*并集选择器 逗号是和的意思*/
p,div,.red{
    color: #FF0000;
}
/*******伪类选择器**********/
/* 未访问过的状态 */
a:link{
    color: #FF0000;
    text-decoration: none;
}
/* 已经访问过的状态 */
a:visited{
    color: #FF0000;
    text-decoration: none;
}
/* 鼠标经过连接时候的状态 */
a:hover{
    color: aqua;
    text-decoration: none;
}
/* 当我们点击的时候（按下鼠标。 点击的时候） */
a:active{
    color: gold;
}
/* 3.背景相关 */
.bg{
    background-color: #FF0000;/* 背景颜色 */
    background-image: url(image/redbgc.png);/* 背景图片地址不要加引号 */
    background-repeat:no-repeat;/*背景样式: repeat：平铺 no-repeat:背景图片不平铺repeat-x;横向平铺repeat-y;竖向平铺 */
    
    /* 背景位置：position 重点
     center:水平垂直居中
     right：垂直靠右
     right top：右上角
     left top:左上角
     left 垂直靠左
     top 水平靠上
     bottom:水平靠下
     bottom left:左下角
     bottom right:右下角
    background-position: x y; */
    background-position: 50px 50px;
     background-position: bottom left; /* 左下角 */
     background-position: left; /* 左边 */
     /*两种定位方式是可以混用的*/
     background-position: 10px center;
     /* 背景简写 */
     /* background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; */
    
}

/* 4.盒子模型 */
div{
    /* 上边框是点状
    右边框是实线
    下边框是双线
    左边框是虚线 */
    border-style:dotted solid double dashed; /* 边框样式 */
    
    /*上边框是点状
    右边框和左边框是实线
    下边框是双线 */
     border-style:dotted solid double;
     
     /*上边框和下边框是点状
     右边框和左边框是实线 */
      border-style:dotted solid;
      
      /*所有 4 个边框都是点状 */
       border-style:dotted;
      
      /*     
        边框线条类型
        none    定义无边框。
          hidden    与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
          dotted    定义点状边框。在大多数浏览器中呈现为实线。
          dashed    定义虚线。在大多数浏览器中呈现为实线。
          solid    定义实线。
          double    定义双线。双线的宽度等于 border-width 的值。
          groove    定义 3D 凹槽边框。其效果取决于 border-color 的值。
          ridge    定义 3D 垄状边框。其效果取决于 border-color 的值。
          inset    定义 3D inset 边框。其效果取决于 border-color 的值。
          outset    定义 3D outset 边框。其效果取决于 border-color 的值。
          inherit    规定应该从父元素继承边框样式。 */
     
     /* 边框综合性写法
     粗细 边框样式 边框颜色 */
     border: 5px dotted #FF0000;
    /* 只定义上边框 */
    border-top: 2px solid red;
    /* 只定义左边框 */
    border-left: 2px solid red;
    /* 只定义右边框 */
    border-right: 2px solid red;
    /* 只定义下边框 */
    border-bottom: 2px solid red; 
    
    /* 内边距 */
    padding-left: 10px;
    padding-top: 30px;
    /* 简写 */
    padding: 20px;/* 上下左右内边距 */
    padding: 10px 20px;/* 两个值：上下10px 左右20px */
    padding: 10px 20px 30px;/* 三个值：上10px 左右20px 下是30px */
    padding: 10px 20px 30px 40px;/* 上 右 下 左 */
    padding: 1px;
    /*注： 盒子的实际大小=内容的宽度和高度+内边距+边框 */
    /* 注意：边框和内边距需要考虑两边的大小。例：一个盒子高度是10px.
    上边框2px 和下边框1px.那么高度就是：13px.如果还加上padting:3px.要考虑
    上下内边距=6.所以整体的高度就是：13+6=19px */
    
    /* padding不会撑开盒子大小的情况 */
    /* 特殊情况。如果这个盒子啊。没有宽度。则padint不会撑开盒子。
    例：div 里面包一个p.p盒子的宽度会跟父级元素一样宽。定义p里面的paddting
    不会影响p盒子的宽度 */
    
    /* 外边距 */
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 100px;
    margin-bottom: 100px;
    /* 简写的方法跟padding完全一样 */
    
    
    /* 让盒子对齐方式 */
    /* 水平居中对齐的方式必须要两个条件:
    1.必须要有宽度
    2.左边外边距设置为:auto; */
    margin:0 auto;
    /* text-align: center;除了可以让文字居中对齐。还能让行内元素和行内块元素
    居中对齐 */
    text-align: center;
    
    line-height: 190px;
    
    
    /* 背景图片和插入图片的区别 */
    /* 插入图片移动位置只能靠盒模型：padding 和 margin 两种方式
    背景图片移动位置只能通过：background-position: 10px center; */
    
    /* 注：行内元素为了照顾兼容性.尽量只设置左右内外边距。不要设置上下内外边距 */
    
    /* 如果两个相邻的块元素垂直外边距的合并。
    一个设置了margin-top: 100. 一个设置margin-bottom：50.两者的间距不会
    变成150.而是取两个值中较大值。这种情况称为相邻快元素垂直外边距的合并; */
    /* 【外边距塌陷】子元素设置了上外边距。会把自己和父级元素都拉下来。
    嵌套关系。垂直外边边距合并解决方案 */
    /* 1.可以把父级元素定义上边框。 */
    border-top:1px solid transparent
    /* 2.可以为父级元素定义一个上padding值 */
    padding-top:1px
     /* 可以为父级元素添加: (推荐)*/
     overflow:hidden
     
     
     
     /* 浮动 float*/
     /* 1.普通流
     块级元素 会独占一行。从上向下顺序排列
     常用元素：div hr p h1-h6 ul ol dl form table
     行内元素: 会按照顺序。从左到右顺序排列。碰到父级元素边缘则自动换行；
     常用元素:span a i  em等
     2.浮动
     让盒子从普通流中浮起来。主要作用让多个块级盒子一行显示;
     1.脱离普通标准流的控制、漂浮起来了。浮在标准流的上面
     2.其他的盒子会顶替之前浮上去的盒子。
     3.加了浮动这后。 仍然是块级元素.但是属性类似：行内块元素。会自动把元素的inline-block
     3.定位
     将盒子在浏览器的某一个位置--CSS离不开定位。特别是后面的js特效 
     4.浮动元素之前是没有间隙的。
     5.属性值
     none:元素不符动
     left:元素向左浮动
     right:元素右浮动
     6.如果父级元素的宽度装不下这些浮动的盒子。多出的盒子会另起一行对齐。
     7.如果兄弟盒子。第一个盒子没有浮动。第二个盒子设置了浮动。不会浮到第一个的上面或者右边
     浮动只会影响当前的或者是后面的标准流盒子。
     如果一个盒子里面有多个盒子。如果有一个盒子设置了浮动。其它都要浮动。
     
     为什么要清除浮动
     因为父级盒子很多情况下。不方便给高度。但是盒子的浮动就不占有
     位置。最后父级盒子的高度为-0的标准流盒子
     根据子盒的内容自动显示高度
     
     清除浮动的方法1
     cloear:清除
     
     left:清楚左侧浮动
     right：清除右侧浮
     both:同时清楚左右两侧浮动的影响
     在子盒子浮动最后样增加
     <div style="clear: both;"></div>
     清除浮动的方法2
     在父级盒子里面增加：
     overflow: hidden;
     如果用这个。文字过高会出现上下滚动条
     
     清除浮动方法3【推荐使用】
     .clearfix:after{
         content:"";
         display:block;
         height:0;
         visibility:hidden;
         clear:both;
     }
     /* IE 6 7 专用 */
     /* .clear{*zoom:1} */
     
     /* 清除浮动方法4：双伪元素清除 */
     /* .clearfix:before,
     .clearfix:after{
         content: "";
         display: table;
     }
     .clearfix:after{
         clear: both;
     } */
     
     /* 总结：在什么情况下需要清除浮动
     1.父级元素没有高度
     2.子盒子浮动了
     3.影响下面布局了。就应该要清除浮动了 */
     
     /* ****************定位**************** */
     /* 定位模式
     static:静态定位(在定位时基本不用)
     relative:相对定位（原来在标准流的区域继续占有。）
     absolute:绝对定位（完全不占位置。父级元素没有定位。则以
     浏览器为准定位。如果跟着父级或者爷爷级定位。父级元素位置不变：把父
     级元素的定位设置为：relative）
     fixed:固定定位（完成不占位置。例头部的搜索或者中间的客服。
     屏幕怎么动。他都不会动。跟父级定位没有任何关系） 
     子级是绝对定位。父级要用相对定位。只认浏览器的可视区域*/
     /* 边偏移 */
     /* 
     top:
     left: 
     right：
     bottom:
     */
     /* 定位=定位模式+边偏移 */
     
     /* 定位的扩展 */
     /* 绝对定位的盒子居中对齐 */
     /* 正常普通流的盒子利用：margin:auto就可以水平居中定位 */
     /* 水平居中的left=父级盒的一半+自己的一半宽度 */
     /* left:50%
     让盒子往左走自己的一半
     margin-left:-100px */
                 
     /* 堆叠顺序（权重） */
     /* 只存在定位里面 */
     /* z-index:100000 */
     
     /* 定位改变display属性 */
     /* 1.利用display inline-block
     行内块不给width 默认的宽度就是内容的宽度
     2.浮动也能转换
     float:left
     3.绝对定位(固定定位)也能转换
     position:absolute */
}


/* 5.高级技巧 */
.gaoji{
    display: none; /* 隐藏元素,并不占位置 */
    display: block; /* 显示元素.将转换为行内块 */
    visibility: visible; /* 对象 可视 */
    visibility: hidden; /* 隐藏元素,并保留位置 */
    
    /* 溢出隐藏:
     visible:默认值。不管是否溢出。还是都显示出来
     hidden:当内容溢出当前元素的高度后.会自动隐藏后面的部分。
     scroll:不管超出内容否。总是显示滚动条
     auto:超出后。自动显示滚动条。不退出不显示滚动条
     还能清除浮动
     */
    overflow: hidden; 
    /* 当文字溢出.以...代替 */
    /* 1.先强制一行内显示文本 */
    white-space: nowrap;
    /* 2.超出部分隐藏 */
    overflow: hidden;
    /* 3.文字用省略号代替超出的部分 */
    text-overflow:ellipsis;
    
    /* 鼠标样式 */
    cursor: default;/* 默认的:小白箭头样式 */
    cursor: pointer;/* 小手样式 */
    cursor: move;/* 移动样式 */
    cursor: text;/* 文本输入光标效果 */
    cursor: not-allowed;/* 禁止点击输入 */
    
    
    /* 轮廓线--当光标移到输入框周围的线 */
    /* 注:修改输入框的边框线是通过边框进行修改.不是通过轮廓线 */
    outline: none; /* 去掉轮廓线 */
    
    
    /* 文本域之 禁止拖拽文本域大小 */
    resize: none;
    
    /* 垂直居中对齐 */
    /* 只针对行内元素和行内块元素 */
    vertical-align: baseline; /* 默认是按基线对齐 */
    vertical-align: middle; /* 默认是按垂直对齐 */
    vertical-align: top; /* 默认是按顶部对齐 */
}

.img{
    /* 去除图片底部有空白缝隙的问题 */
    /* 原因:图片默认跟文字是以基线对齐.所以底部会有空白间隙 */
    vertical-align: top;/* 只要不和基线对齐就行[推荐] */
    
    /* 或者跟把元素改成块元素 */
    /* 块元素对vertical-align: baseline是无效的 */
    display:block;
}


/*css精灵技术*/
.icon{
    width: 20px; 图标集里面小图标的宽度
    width: 20px; 图标集里面小图标的高度
    /* 图标集图片路径 不平铺 当前小图标在整个图片里面的坐标位置 */
    /* background: url(image/icon_list.png) no-repeat x y; */
    background: url(image/icon_list.png) no-repeat 10 100;
}