CSS设置技巧（单元、值和样式设置技巧）

单位和价值

1.1色值

网页中的颜色设置非常重要，包括字体颜色（颜色）、背景颜色（背景色）、边框颜色（边框）等。设置颜色有很多种方法。

1、英文命令颜色

在前几部分中经常使用这种集合方法：

{颜色：红色；}
2，RGB颜色

这是在PS图象处理软件的RGB颜色相同，三种颜色的R（红色），与G（绿色）、B（蓝色）。

{颜色：RGB（13345200）；}
每个项目的值可以是0到255之间的整数和0%～100%的百分比：

{颜色：RGB（20%，33%，25%）；}
3和十六小数色

这种颜色设置方法现在是一种广泛使用的方法。其原理是RGB设置，但每个项目的价值是由十六位二进制00-FF 0-255。

p { color: # 00ffff；}

配色表：
1.2长度值

长度单位总结起来，目前比较常用的是PX（像素）、EM、%，应该注意的是，这三个单位实际上都是相对单位。

1、像素

为什么像素是相对单位因为像素是指显示器上的小点（CSS规范假定为90像素= 1英寸），事实上，浏览器将使用显示的实际像素值，目前大多数设计者倾向于使用PX作为单位。

2、EM

它是该元素给定字体的字体大小值。如果该元素的字体大小为14px，然后1em = 14px；如果字体大小是18px，1em = 18px。下面的代码：

P {字体大小：12px；文本缩进：2em；}
上面的代码是可以实现段落缩进24px（即距离两字体大小之间）。

这是一个特例：

但是，当该单位设置为EM的字体大小，计算标准是根据下面的代码的父元素的字体大小：

Html：

以这个例子为例。

Css：

P{font-size:14px}
字体大小：0.8em跨度{；}
在跨度结果字体例如字体的大小11.2px（14 * 0.8 = 11.2px）。

3、百分比

P {字体大小：12px；线高度：130% }

设置行高（行距）130%（12 * 1.3 = 15.6px）的字体。

两。风格的设置技巧

2.1电平中心元件

我们需要在实际工作中水平居中的ZhongChangHui场景，如美，文章的标题通常是水平居中。

在这里我们也分两种情况：行内元素或块状元素和块元素分为固定宽度的块元素和无限宽的块元素。今天，让我们来了解一下行元是在中间

如果元素设置为文本，一元一张，和其他元素的水平，通过设置文本对齐：中心到父元素的父元素。（和Komoto：如下面的HTML代码，DIV是我要在父容器中；显示的文本。另一方面，父元素的子元素的文本是这个div）下面的代码：

HTML代码：
xml代码将内容复制到剪贴板。
我想在父容器中显示级别。

CSS代码：
txtcenter {。
文本对齐：中心；
}
2.2固定宽块中间

当文本对齐：中心为块状元素，它不能与文本对齐：中心。还有两种情况：固定宽度块元素和不定宽块元素。

在这一节中，让我们从一个广泛的块元素开始。（块元素的宽度：块元素宽度的宽度是一个固定值。）

满足这两个条件的固定宽度和形状可通过设置达到元素；左、右margin价值；auto实现中心。让我们看看设置div的一个例子，这是块元素中：

HTML代码：
xml代码将内容复制到剪贴板。
我是一个大的元素，哈哈，我想在中间的显示。

CSS代码：
div {
边境：1px solid红； / *为了显示div中心设立边界的影响。

宽度：200px； / * * /固定宽度
保证金：保证金20px汽车；左右边距设置为自动 / * * /
}

它也可以写成：

左缘：自动；
右边距：汽车；
注：该元素的上下margin可任意设定。

2.3定宽

在实际工作中，我们会遇到需要；不定宽度的块元素设置中心，如Web页面分页导航，因为一些分页是不确定的，所以我们不能设置宽度限制其弹性。（不确定块的块元素：元素的宽度宽度不固定的。）

三种方法是在一个不确定的宽度的块元素的中间（这三种方法目前使用很多）。

添加表标签
设置显示：内联方法：类似于第一个，显示类型被设置为内部元素，并设置不定元素的属性设置。
设置位置：相对和左边：50%：通过相对定位，元素向左移动50%，即到达中心。
这是我们第一步的一小部分：

为什么选择方法通过增加表标签长度自适应表标签没有定义长度的使用不是身体长度默认母（表长度是根据文本的长度范围内确定），所以它可以被看作是一个固定宽度的块元素，然后使用块的固定宽度的中心边缘的方法，。中间层。

第一步是向需要设置的中间元素添加一个表标记（包括，和）。

第二步：设置这个表，左右边界在中间（这与设置宽块元素的方法相同）。

例子如下：

HTML代码：
xml代码将内容复制到剪贴板。

我是第一行文字
我是第二行文字
我是第三行文字
CSS代码：
表{
border: 1px solid；
保证金：0汽车；
}
U3000

除了在最后一节插入表标记之外，我们还可以在中间设置不定的宽块元素。本节介绍了实现这种效果的第二种方法，将元素的显示类型转换为内部元素，并通过它们的属性直接设置它们。

第二种方法是将块级元素的显示改为内联类型（设置为行元素显示），然后使用文本对齐中心实现中心效果：

HTML代码：
xml代码将内容复制到剪贴板。
一
二
三
CSS代码：
集装箱{。
文本对齐：中心；
}
边距：0（填充：0 *；消除文本和div帧之间的间隙）。
容器{ {
列表样式：无；
保证金：0；
填充：0；
显示：内联；
}
右边距：8px（李 / *设置文字之间的间隔）。
集装箱李{
右边距：8px；
显示：内联；
}
U3000

与此方法相比，第一种方法的优点是不增加语义标签。但也存在一些问题：它将块元素的显示类型改为内联，并成为行中的元素，因此有较少的函数，如设置长度值。

除了将表标记插入前两部分，并更改元素的显示类型之外，我们还可以在中间设置不确定的宽块元素。本节介绍了第三种实现这种效果的方法：浮动定位和相对定位。

方法三：通过将浮点设置为父元素，将位置：相对和左：50%到父元素，设置位置：相对和左：- 50%来实现水平居中。

我们可以这样理解：虚构的父层UL层（即在下面的例子中，div层）的平分线父层UL层（div层）分为两个部分，CSS代码的UL层最左边的父层UL层和UL层（DIV层）。平分线对齐；和CSS代码的里层的里层和UL层最左边的平分线（DIV层平分线）对齐，从而实现李中间层。

代码如下：
xml代码将内容复制到剪贴板。
一
二
三
CSS代码：
集装箱{。
浮点数：左；
职位：相对；
左：50%
}

容器{ {
列表样式：无；
保证金：0；
填充：0；

职位：相对；
左：- 50%；
}
集装箱里{浮动：左；显示：内联；右边距：8px；}
这三种方法用途广泛，各有利弊。选择哪种方法，可以根据具体情况确定。