单位和值及CSS样式设置水平居中

最新推荐文章于 2023-04-07 15:59:41 发布

转载最新推荐文章于 2023-04-07 15:59:41 发布 · 302 阅读

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS中的颜色设置方法，包括英文命令颜色、RGB颜色及十六进制颜色，并讲解了常用的长度单位如px、em和百分比。此外还深入探讨了不同元素的水平居中设置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

颜色值
在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：

1、英文命令颜色

前面几个小节中经常用到的就是这种设置方法：

p{color:red;}

2、RGB颜色

这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来p{color:rgb(133,45,200);}的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%);}

3、十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

长度值
长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

1、像素

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：

但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

html:

<p>以这个<span>例子</span>为例。</p>
css:

p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
1.水平居中设置-行内元素
行内元素的水平居中：
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的（父元素和子元素：如下html代码中，div是“我想要在父容器中水平居中显示”）这个文本的父元素。反过来说，这个文本是div的子元素）如下代码
html

我想要在父容器中水平居中显示。

代码：

<style>
  .txtCenter{
    text-align:center;
  }
</style>

2.水平居中设置-定宽块状元素
当被设置元素为块状元素时用text-align:center就不起作用了，这时候分两种情况：定宽块状元素和不定宽块状元素。
定宽块状元素：块状元素的宽度width为固定值。
满足定宽和块状两个条件的元素是可以用过设置“左右margin”值为“auto”来实现居中的。如下代码所示
html代码：

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

css代码：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为div设置了边框*/
    width:200px;/*定宽*/
    margin:20px auto;/*margin-left与margin-right设置为auto*/
}
</style>

也可以写成：

margin-left:auto;
margin-righ:auto;

注意：元素的“上下margin”是可以随意设置的。
水平居中总结-不定宽块状元素方法（一）
在实际工作中我们会遇到需要为“不定宽的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过该设置宽度来限制它的弹性。（不定宽块状元素：块状元素宽度width不固定。）
不定宽度的块状元素有三种方法居中：
1.加入table标签
2.设置display:inline方法方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置。
3.设置position:relative和left:50%利用相对定位的方式，将元素向左偏移50%，即达到居中的目的。
第一种方法：
利用table标签的长度自适应性（即不定义其长度也不默认父元素的body长度，table长度根据其内文本长度决定），因此可以看作一个定宽度块元素，然后再来用定宽度块状居中的margin的方法，使其水平居中。
第一步：为需要设置的居中元素外面加入一个table标签（包括、、）。
第二步：为这个table设置“左右margin居中”（这个和定宽块状元素的方法一样）。
举例如下：
html代码：

<div>
    <table>
        <tbody>
            <tr><td>
                <ul>
                    <li>我是第一行文本</li>
                    <li>我是第二行文本</li>
                    <li>我是第三行文本</li>
                </ul>
                </td></tr>
            </tbody>
        </table>
    </div>

css代码：

<style>
table{
border:px solid;
margin: 0 auto；
}
</style>

水平居中总结-不定宽块状元素方法（二）
第二种方法：改变块级元素的display为inline类型（设置为行内元素显示），然后使用text-align:center来实现居中效果。
html代码：

<body>
<div class="container>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    <ul>
</div>
</body>

css代码：

<style>
.container{
    text-align:center;
}
/*margin:0;padding:0(消除文本与div边框之间的间隙)*/
.container ul{
    list-style:none;/*设置列表属性*/
    margin:0;
    padding:0;
    display:inline;
}
/*margin-right:8px(设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

水平居中总结-不定宽块状元素方法（三）
第三种方法：设置浮动和相对定位
通过给父元素设置float，然后给父元素设position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中。
可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div的平分线）对齐，从而实现li层的居中。
代码如下:

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码：

<style>
.container{
    float:left;
    position:relative;
    left:50%
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;

    position:relative;
    left:-50%
}
.container li{
float:left;
display:inline;
margin-right:8px;
}
</style>

float:left，将块状元素左浮动到窗口左边，然后relative left50%父级块状元素相对自己右移50%，此元素及其子级块状元素的左边框均位于中间位置，然后子级块状元素relative left-50%相对自己左移50%后，相当于将子级的一半左移过去，一半在左边，一半在右边，自然就水平居中了。不懂的画个图就懂了。