Android程序员搞Web之CSS（四）
一、CSS（层叠样式表） 的三大特性
1、层叠性：
就近原则，后面设置的样式会将前面的样式覆盖；
样式冲突时层叠，样式不冲突时，不发生变化；
2、继承性：
子标签会继承父标签的样式
3、优先级
1）、important > 行内样式(1,0,0,0) > id选择器(0,1,0,0) > 类选择器优先级 (0,0,1,0) > 标签选择器(0,0,0,1)；
2）、具有叠加关系；
3）、只管自己的标签样式，不管父级标签的权重
二、背景 background
background-position: center; 该属性是设置相对位置； 也可以设置值 单位为 px，如果是两个值 则 前面表示 x，后面表示y；
background-repeat: no-repeat; 该属性设置平铺、拉伸等属性；
background-attachment: fixed; 该属性 设置 背景固定；
background: transparent 50%; 该属性设置 背景颜色透明度；
background：#444 url(image/test.jpg) no-repeat fixed center top; 背景也可以这样统一设置
hover ： 鼠标移过的时候样式
background：rgba（0,0,0,0）最后一位表示透明度取值范围是0~1；
三、盒子模型
1、盒子边框（border）
border-color: blue; 边框颜色
border-width: 2px;边框宽度
border-style: solid; 边框样式 none 没有边框 solid 实线边框 hidden 隐藏边框 dashed 虚线
border ：1px solid #123 ； 样式也可以这样设置
table, td {
border-collapse: collapse; 合并表格相邻边框
}
padding ： 上下左右 的内边距
padding 在 盒子 那里会存在将外部盒子的 面积撑大的操作，与 Android 开发的 padding 不同。外部盒子的尺寸为 =盒子长（宽）+padding值。
2、div 的部分属性配置
margin: 0 auto; /*上下外边距为0 左右外边距为自动 效果为 水平居中对齐*/
父子盒子 嵌套 margin 问题 ：子盒子设置 外边距会调整 父盒子的 位置，解决该 bug 的 方式为：
1）、为父盒子 设置 一个边框 即“ border-top: 1px solid #0000; ”
2）、为父盒子 设置一个内边距即“ padding-top: 1px;”
3）、为父盒子 设置 一个属性“ overflow: hidden; ”
外盒子的 尺寸= 盒子内容（height 或 width）+ padding + margin + border ；
内盒子的 尺寸= 盒子内容（height 或 width）+ margin + border ；
盒子设置圆角 ： border-radius: 10px; 可以设置像素 和 百分比；
盒子阴影： box-shadow: 2px 2px 5px 5px cornflowerblue; 参数1：水平影子位置，参数2：数值影子位置，参数3：模糊度，参数4：影子的大小； 参数5：影子的颜色
transition: all 2s; 可以设置 一种悬浮动画的效果
盒子浮动： 指脱离了原本属性的控制，移动到父元素的指定位置；可以 使多个 div 在一行内显示。
float: left; 参数 只有 left 和 right 还有 none 设置之后会 将div 转换为行内块元素
目的：让多个块级元素在一行内排布
3、布局流程
1）、确定页面的版心；
2）、分析各个元素布局；
3）、制作 HTML 结构；
4）、制作 CSS 结构；
4、清除浮动
标准流中 浮动的盒子 不占位置 ，固没有尺寸之说；
清除浮动的本质：为了解决父级元素因为子级元素浮动而引起内部高度为0的问题
清除浮动的方法：
1、额外标签法；在盒子子级的最后一个标签内添加一个标签 命名为“class="clear” 使用css属性为：clear：both；
2、父级添加 overflow 属性方法；为父盒子添加 overflow 属性 ，属性值为hidden或者auto
3、使用 after 伪元素清除浮动；添加如下css 内容
在 父盒子 内 添加 clearFix 这个类名:
<ul class="nav clearFix">
<li><a href="#">首页</a></li>
<li><a href="#">云云商城</a></li>
<li><a href="#">智慧门店</a></li>
<li><a href="#">营销平台</a></li>
<li><a href="#">媒体联盟</a></li>
<li><a href="#">关于云道</a></li>
</ul>
/*普通浏览器清除浮动*/
.clearFix:after {
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
/*ie 6清除浮动*/
.clearFix {
*zoom: 1;
}
4、使用 befor e和 after 双伪元素清除浮动；
在 父盒子 内 添加 clearFix 这个类名:
<ul class="nav clearFix">
<li><a href="#">首页</a></li>
<li><a href="#">云云商城</a></li>
<li><a href="#">智慧门店</a></li>
<li><a href="#">营销平台</a></li>
<li><a href="#">媒体联盟</a></li>
<li><a href="#">关于云道</a></li>
</ul>
/*普通浏览器清除浮动*/
.clearFix:before, .clearFix :after {
content: "";
display: table;
}
.clearFix:after {
clear: both;
}
/*ie 6清除浮动*/
.clearFix {
*zoom: 1;
}
四、PS 的部分使用技巧
1、献上 下载链接：
2、技巧
Ctrl + r ：显示标尺 设置为 像素 方便提取尺寸
Crtl + +(-): 放大 、缩小 图片
空格+鼠标左键：移动图片
Crtl + d：撤销 操作
五、定位
1、元素定位的属性
定位模式 和 边偏移
边偏移：包括 四个方向的偏移方式 即 上下左右，但是一次只能向一个地方进行偏移
定位模式：选择 position ： 属性值（static 自动定位 默认定位方式、relative 相对定位、absolute 绝对定位 相当于上一个已经定位的元素进行定位 、fixed 固定定位 相当于浏览器窗口进行定位）。
relative（相对定位）：(1)、以自己左上角为基准进行移动；（2）、可以通过边偏移移动位置，但原有位置继续占有；
position: relative;
right: 200px;
top: 200px;
absolute（绝对定位）：不占用位置；以当前屏幕左上角为基准点进行对齐；所有上一级没有定位，则以屏幕进行定位，上一级有有定位则以上一级左上角为基准点进行定位；
position: absolute;
right: 200px;
top: 200px;
fixed（固定定位）：
元素固定在指定位置；不占有位置；一直以浏览器左上角为基准；单独存在。
即要定位也需要居中对齐实现：
1、首先 left 50% 父盒子的一半大小；
2、走自己外边距负的一半值就可以了，margin-left；
.top {
width: 900px;
border: 1px solid #0000;
background-color: cornflowerblue;
height: 100px;
position: absolute;
left: 50%;
margin-left: -450px;
}
Z-index ：定位层级 值越大，则层级越高 越能显示在最上面。
欢迎关注.jpg
