Android 程序员搞 Web 之 CSS（四）

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、献上 下载链接：

ps cs6 **版: ooei

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 ：定位层级 值越大，则层级越高 越能显示在最上面。

Android程序员搞Web之CSS（五）