Affablebean项目开发过程知识笔记

最新推荐文章于 2025-03-02 00:22:06 发布

燕临

最新推荐文章于 2025-03-02 00:22:06 发布

阅读量521

点赞数

分类专栏：反思总结文章标签： CSS

本文链接：https://blog.youkuaiyun.com/Ada_73/article/details/79242315

版权

反思总结专栏收录该内容

4 篇文章

订阅专栏

近期开展了Affablebean项目的开发。该项目是在于开发一个网络在线商店。初步实现类似于天猫、淘宝等网页版的效果。

一.项目介绍

二.开发背景

三.实际需求分析

四.开发过程

五.知识笔记

（一）CSS

1.margin

margin为调节位置的属性。它后面可以跟1~4个参数。因此共有四种使用方式。下面进行依次举例。

margin：10px 20px 30px 40px

此时有四个参数，四个参数依次表示上边距为10px，右边距为20px，下边距为30px，坐边距为40px。

margin：10px 20px 30px；

此时有三个参数，三个参数依次表示上边距为10px，左右边距为20px，下边距为30px。

margin：10px 20px；

此时有两个参数，两个参数依次表示为上下边距为10px，左右边距为20px。

margin：10px；

此时只有一个参数，这个参数表示上下左右的边距均为10px；

可以通过margin函数来实现浮动项目的上下左右位置的移动。

在此项目中的应用举例：

.category_categoryBox{
    height:50px;
    width:180px;
    margin:15px 0 15px 30px;
    float:left;
    background:#aaa;
}

2.font-size

font-size属性用来设置文本字体的大小。它的值

值	描述
xx-small x-small small medium large x-large xx-large	把字体设置为不同大小。从xx-small到xx-large。默认值为medium
smaller	将字体设置为比父元素更小的尺寸
larger	将字体设置为比父元素更大的尺寸
length	将字体设置为固定值
%	将字体设置为基于父元素的一个百分比的尺寸
inherit	从父元素继承字体大小

在此项目中的应用举例：

.category_selectedText{
    line-height:150%;
    font-size:large;
    margin:10px 0 10px 35px;;
    float:left;
}

3.line-height

该属性用来设置以百分比计的行高。且不允许使用负数。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。

值	描述
normal	默认，设置合理的行间距。
number	设置数字，此数字会与当前字体尺寸相乘来计算行间距。
length	设置固定的行间距。
%	基于当前字体尺寸百分比的行间距。
inherit	规定应该从父元素继承line-height的值。

在此项目中应用举例：

.category_RightText_Left{
    line-height:150%;
    font-size:medium;
    margin:40px 30px 30px 30px;
    float:left;
}

4.position

position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

此项目中应用举例：

#category_indexRightColumn{
    position:absolute;
    left:536px;
    top:270px;
    height:400px;
    width:600px;
    float:left;
    background:#eee;
    z-index:0;
}

5.z-index

该属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素前面。元素的堆叠顺序可以出现负数。且z-index仅能在定位元素上奏效。如：position：absolute。该属性设置一个定位元素沿Z轴位置，Z轴定义为垂直延伸到显示区的轴。如果属性值为正数，表示距离用户更近，为负数则表示距离用户更远。