DIV+CSS经常用到的属性、参数及说明

下面给您讲一下DIV+CSS经常用到的属性、参数及说明的攻略。

一、CSS常用属性

1.1 文本相关属性

1.1.1 font属性

font属性用来设置文本的字体、大小、行高、颜色等，常用的设置方式为：

font: italic small-caps bold 20px/2 cursive;

上述代码中，设置了文本为斜体、小型小写大写字母、粗体、字体大小为20px、行高为2倍、字体为草书字体。

1.1.2 text-align属性

text-align属性用来设置文本水平对齐方式，可设置为left、center、right等，常用的设置方式为：

text-align: center;

上述代码中，文本水平居中对齐。

1.1.3 line-height属性

line-height属性用来设置文本行高，常用的设置方式为：

line-height: 1.5;

上述代码中，设置文本行高为文本字体大小的1.5倍。

1.2 布局相关属性

1.2.1 display属性

display属性用来设置元素的显示方式，可设置为block、inline、inline-block、none等，常用的设置方式为：

display: none;

上述代码中，元素不显示。

1.2.2 position属性

position属性用来设置元素的定位方式，可设置为static、relative、absolute、fixed等，常用的设置方式为：

position: absolute;

上述代码中，元素使用绝对定位方式。

1.2.3 margin、padding属性

margin和padding属性用来设置元素的外边距和内边距，常用的设置方式为：

margin: 20px;
padding: 10px;

上述代码中，设置元素外边距为20px，内边距为10px。

二、DIV+CSS经常用到的参数

2.1 选择器

选择器是CSS中用来选择HTML元素的一种方法，常用的选择器有：

• ID选择器：#id
• 类选择器：.class
• 标签选择器：tag
• 属性选择器：[attr=value]
• 通用选择器：*

举例来说，如果想设置ID为“abc”的元素的字体大小为20px，可以使用以下代码：

#abc {
    font-size: 20px;
}

2.2 盒子模型

盒子模型是CSS中用来描述元素的布局方式的一种概念，常用的参数有：

• content-box：内容框模型，指元素的宽度和高度只包括内容的宽度和高度，不包括边框和内边距的宽度和高度。
• border-box：边框框模型，指元素的宽度和高度包括边框和内边距的宽度和高度。

举例来说，如果想设置一个元素的盒子模型为border-box，可以使用以下代码：

div {
    box-sizing: border-box;
}

三、示例说明

3.1 高亮显示链接

如果想实现点击链接后，链接文字变色且底部有一条下划线效果，可以使用以下代码：

<a href="#" class="link">链接</a>

a.link {
    color: #007bff;
    text-decoration: none;
}

a.link:hover {
    text-decoration: underline;
}

3.2 两栏布局

如果想实现左侧栏和右侧栏的布局，可以使用以下代码：

<div class="left"></div>
<div class="right"></div>

.left {
    width: 200px;
    height: 300px;
    float: left;
    background-color: #eee;
}

.right {
    margin-left: 200px;
    height: 300px;
    background-color: #ddd;
}

上述代码中，左侧栏使用了float属性，右侧栏使用了margin-left属性实现。