宜宾网站建设公司

CSS单位和值与样式设置技巧

这篇文章主要讲解了“CSS单位和值与样式设置技巧”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS单位和值与样式设置技巧”吧！

德清ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

一、单位和值

1.1 颜色值

在网页中的颜色设置是非常重要，有字体颜色（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;}

配色表：

CSS单位和值与样式设置技巧
1.2 长度值

长度单位总结一下，目前比较常用到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:

以这个例子为例。



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）。

二、样式设置技巧

2.1 水平居中-行内元素

我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。

这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一　　下行内元素怎么进行水平居中？

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：

html代码：

XML/HTML Code复制内容到剪贴板

  1.   

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

  

  •   

  • css代码：   

  •   

  •   

    • 2.2 定宽块状居中

    当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

    这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

    满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

    html代码：

    XML/HTML Code复制内容到剪贴板

    1.   

    2.   

      我是定宽块状元素，哈哈，我要水平居中显示。
        

    3.   

    4. css代码：   

    5.     

    6.   

    也可以写成：

    margin-left:auto;
    margin-right:auto;
    注意：元素的“上下 margin” 是可以随意设置的。

    2.3 不定宽

    在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)

    不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

    加入 table 标签
    设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
    设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
    这一小节我们来讲一下第一种方法：

    为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

    第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。

    第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

    举例如下：

    html代码：

    XML/HTML Code复制内容到剪贴板

    1.   

    2.  

        

    3.   

      4.   

    4.     

      5.   

    5.   

      6.   

    6.  

      7.   

    7.     

          

      •         

      • 我是第一行文本
        •   

      •         

      • 我是第二行文本
        •   

      •         

      • 我是第三行文本
        •   

      •     

        

    8.     

      9.   

      

  • css代码：   

  •     

  • 　  

    • 除了上一节讲到的插入table标签，可以使不定宽块状元素水平居中之外，本节介绍第2种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置。

    第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：

    html代码：

    XML/HTML Code复制内容到剪贴板

    1.   

    2.   

    3.     

          

      •         

      • 1
        •   

      •         

      • 2
        •   

      •         

      • 3
        •   

      •     

        

      

  •   

  • css代码：   

  •     

  • 　  

    • 这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

    除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。

    方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

    我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。

    代码如下：

    XML/HTML Code复制内容到剪贴板

    1.   

    2.   

    3.     

          

      •         

      • 1
        •   

      •         

      • 2
        •   

      •         

      • 3
        •   

      •     

        

      

  •   

  • css代码：   

  •     

  •   

    • 这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。

    感谢各位的阅读，以上就是“CSS单位和值与样式设置技巧”的内容了，经过本文的学习后，相信大家对CSS单位和值与样式设置技巧这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


    分享名称：CSS单位和值与样式设置技巧
    新闻来源：http://hbruida.cn/article/gpghdo.html

    其他资讯