欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Android 程序员搞 Web 之 CSS(四)

程序员文章站 2022-06-13 17:01:45
...

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(五)

相关标签: web 开发