CSS3盒模型

这篇具有很好参考价值的文章主要介绍了CSS3盒模型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

CSS3盒模型规定了网页元素的显示方式,包括大小、边框、边界和补白等概念。2015年4月,W3C的CSS工作组发布了CSS3基本用户接口模块,该模块负责控制与用户接口界面相关效果的呈现方式。

1、盒模型基础

在网页设计中,经常会听到内容(content)、补白(padding)、边框(border)、边界(margin)等术语,在日常生活中盒子装东西与此类似,所以统称为盒模型。

盒模型具有如下特点,其结构示意图如下图所示:

  • 盒子都有4个区域:边界、边框、补白、内容。
  • 每个区域都包括4个部分:上、右、下、左。
  • 每个区域可以统一设置,也可以分别设置。
  • 边界和补白只能定义大小,而边框可以定义样式、大小和颜色。
  • 内容可以定义宽度、高度、前景色和背景色。
    CSS3盒模型,# CSS,Web,css3,前端,css
    在默认状态下,所有元素的初始状态(margin、border、padding、width和height)都为0,背景色为透明。当元素包含内容后,width和height会自动调整为内容的宽度和高度。调整补白、边框和边界的大小,不会影响内容的大小,但会增加元素在网页内显示的总尺寸。

2、大小

使用width(宽)和height(高)属性可以定义内容区域的大小。
根据CSS盒模型规则,可以设计如下等式:

  • 元素的总宽度=左边界+左边框+左补白+宽+右补白+右边框+右边界
  • 元素的总高度=上边界+上边框+上补白+高+下补白+下边框+下边界

假设一个元素的宽度为200px、左右边界为50px、左右补白为50px、边框为20px,则该元素在页面中实际占据的宽度为50px + 20px + 50px + 200px + 50px + 20px + 50px =440px。

注意:在浏览器怪异解析模式中,元素在页面中占据的实际大小如下:

  • 元素的总宽度=左边界+宽+右边界
  • 元素的总高度=上边界+高+下边界

使用CSS盒模型公式表示如下:
元素的总宽度=左边框+左补白+宽+右补白+右边框
元素的总高度=上边界+上补白+高+下补白+下边框

【示例】定义两个并列显示的div元素,设置每个div的width为50%,显示效果如下图所示:

    <style type="text/css">
    div {                                     /*定义div元素公共属性 */
        float: left;                          /*向左浮动,实现并列显示*/
        background-image: url(images/1.jpg);  /* 定义背景图像 */
        background-color: #CC99CC;            /* 定义背景色 */
        font-size: 32px;                      /* 定义div内显示的字体大小 */
        color: #FF0000;                       /* 定义div内显示的字体颜色 */
        text-align: center;                   /* 定义div内显示的字体居中显示 */
        height: 540px;                        /* 定义高度*/}
    #box1 {                                   /*定义第1个div元素属性*/
        width: 50%;                           /* 占据窗口一半的宽度 */ }
    #box2 {                                   /*定义第2个div元素属性*/
        width: 50%;                           /* 占据窗口一半的宽度 */ }
    </style>
    <div id="box1">左边元素</div>
    <div id="box2">右边元素</div>

CSS3盒模型,# CSS,Web,css3,前端,css

3、边框

边框可以设计修饰线,也可以作为分界线。定义边框的宽度有多种方法,简单说明如下:
(1)直接在属性后面指定宽度值。

    border-bottom-width:12px;        /*定义元素的底边框宽度为12px*/
    border-top-width:0.2em;          /*定义顶部边框宽度为元素内字体大小的0.2倍*/

(2)使用关键字,如thin、medium和thick。thick比medium宽,而medium比thin宽。不同浏览器对此解析的宽度值不同,有的解析为5px、3px、2px,有的解析为3px、2px、1px。
(3)单独为某边设置宽度,可以使用border-top-width(顶边框宽度)、border-right-width(右边框宽度)、border-bottom-width(底边框宽度)和border-left-width(左边框宽度)。
(4)使用border-width属性定义边框宽度。

    border-width:2px;                     /*定义四边都为2px*/
    border-width:2px 4px;                 /*定义上下边为2px,左右边为4px*/
    border-width:2px 4px 6px;             /*定义上边为2px,左右边为4px,底边为6px*/
    border-width:2px 4px 6px 8px;         /*定义上边为2px,右边为4px,底边为6px,左边为8px*/

提示:当定义边框宽度时,必须定义边框样式,因为边框样式默认为none,即不显示,所以仅设置边框的宽度,就看不到效果。

定义边框颜色可以使用颜色名、RGB颜色值或十六进制颜色值。

【示例1】分别为元素的各个边框定义不同的颜色:

    <style type="text/css">
    #box {/*定义边框的颜色 */
        height: 164px;                         /* 定义盒的高度 */
        width: 240px;                          /* 定义盒的宽度 */
        padding: 2px;                          /* 定义内补白 */
        font-size: 16px;                       /* 定义字体大小 */
        color: #FF0000;                        /* 定义字体显示颜色 */
        border-style: solid;                   /* 定义边框为实线显示 */
        border-width: 50px;                    /* 定义边框的宽度 */
        border-top-color: #aaa;                /* 定义顶边框颜色为十六进制值*/
        border-right-color: gray;              /* 定义右边框颜色为名称值*/
        border-bottom-color: rgb(120,50,20);   /* 定义底边框颜色为RGB值*/
        border-left-color:auto;                /* 定义左边框颜色将继承字体颜色*/}
    </style>
    <div id="box"><img src="images/1.jpg" width="240" height="164" alt=""/></div>

CSS3盒模型,# CSS,Web,css3,前端,css

CSS支持的边框样式主要包括以下几个:

  • none:默认值,无边框,不受任何指定的border-width值影响。
  • hidden:隐藏边框,IE不支持。
  • dotted:定义边框为点线。
  • dashed:定义边框为虚线。
  • solid:定义边框为实线。
  • double:定义边框为双线,两条线及其间隔宽度之和等于指定的border-width值。
  • groove:根据border-color值定义3D凹槽。
  • ridge:根据border-color值定义3D凸槽。
  • inset:根据border-color值定义3D凹边。
  • outset:根据border-color值定义3D凸边。

【示例2】在一段文本中包含一个span元素,利用它为部分文本定义特殊样式,设计顶部边框为80px的红色实线,底部边框为80px的绿色实线,如下图所示:

    <style type="text/css">
    p {                                        /* 定义段落属性 */
        margin: 50px;                          /* 定义段落的边界为50px */
        border: dashed 1px #999;               /* 定义段落的边框 */
        font-size: 14px;                       /* 定义段落字体大小 */
        line-height: 24px;                     /* 定义段落行高为24px */}
    span {                                     /* 定义段落内内联文本属性 */
        border-top: solid red 80px;            /* 定义行内元素的上边框样式 */
        border-bottom: solid green 80px;       /* 定义行内元素的下边框样式 */
        color: blue;
    }
    </style>
    <p> 寒蝉凄切,对长亭晚,骤雨初歇。都门帐饮无绪,留恋处舟催发。执手相看泪眼,竟无语凝噎。念去去千里烟波,
暮霭沉沉楚天阔。 <span>多情自古伤离别,更那堪冷落清秋节。</span>今宵酒醒何处?杨柳岸晓风残月。此去经年,应是良
辰好景虚设。便纵有千种风情,更与何人说? </p>

CSS3盒模型,# CSS,Web,css3,前端,css
可以看到上边框压住上一行文字,并超出段落边框,下边框压住下一行文字,也超出段落边框。

4、边界

元素与元素外边框之间的区域称为边界,也称为外边距。设置边界可以使用margin属性。

    margin:2px;                     /*定义元素四边边界为2px*/
    margin:2px 4px;                 /*定义上下边界为2px,左右边界为4px*/
    margin:2px 4px 6px;             /*定义上边界为2px,左右边界为4px,下边界为6px*/
    margin:2px 4px 6px 8px;         /*定义上边界为2px,右边界为4px,下边界为6px,左边界为8px*/

也可以使用margin-top、margin-right、margin-bottom、margin-left属性独立设置上、右、下和左边界的大小。

    margin-top:2px;           /*定义元素上边界为2px*/
    margin-right:2em;         /*定义右边界为元素字体的2倍*/
    margin-bottom:2%;         /*定义下边界为父元素宽度的2%*/
    margin-left:auto;         /*定义左边界为自动*/

margin可以使用任何长度单位,如px、lb、in、cm、em、%等。margin默认值为0,可以取负值。如果设置负值,将反向偏移元素的位置。

【示例1】通过边界调整子元素在包含框内的显示位置:

    <style type="text/css">
    body {margin: 0; /*适用IE*/padding: 0;              /*适用非IE*/}/*清除页边距*/
    div {                                               /*定义父子元素共同属性*/
        margin: 20px;
        padding: 20px;
        float: left;}
    #box1 {                                             /*定义父元素的属性*/
        width: 500px;
        height: 300px;
        float: left;
        background-image: url(images/1.jpg);
        border: solid 20px red;}
    #box2 {                                             /*定义子元素的属性*/
        width: 150px;
        height: 150px;
        float: left;
        background-image: url(images/2.jpg);
        border: solid 20px blue;}
    </style>
    <div id="box1">
        <div id="box2">子元素</div>
    </div>

CSS3盒模型,# CSS,Web,css3,前端,css

5、补白

元素包含内容与内边框间的区域称为补白,也称为内边距。设置补白可以使用padding属性。

    padding:2px;                    /*定义元素四周补白为2px*/
    padding:2px 4px;                /*定义上下补白为2px,左右补白为4px*/
    padding:2px 4px 6px;            /*定义上补白为2px,左右补白为4px,下补白为6px*/
    padding:2px 4px 6px 8px;        /*定义上补白为2px,右补白为4px,下补白为6px,左补白为8px*/

也可以使用padding-top、padding-right、padding-bottom、padding-left属性独立设置上、右、下和左补白的大小。

    padding-top:2px;          /*定义元素上补白为2px*/
    padding-right:2em;        /*定义右补白为元素字体的2倍*/
    padding-bottom:2%;        /*定义下补白为父元素宽度的2%*/
    padding-left:auto;        /*定义左补白为自动*/

补白取值不可以为负。补白和边界一样都是透明的,当设置背景色和边框色后,才能看到补白区域。

【示例】设计导航列表项目并列显示,然后通过补白调整列表项目的显示大小:

    <style type="text/css">
    ul {                                 /*清除列表样式*/
        margin: 0;                       /*清除IE列表缩进*/
        padding: 0;                      /*清除非IE列表缩进*/
        list-style-type: none;           /*清除列表样式*/}
    #nav {width: 100%;height: 32px;}     /*定义列表框宽和高*/
    #nav li {                            /*定义列表项样式*/
        float: left;                     /*浮动列表项*/
        width: 9%;                       /*定义百分比宽度*/
        padding: 0 5%;                   /*定义百分比补白*/
        margin: 0 2px;                   /*定义列表项间隔*/
        background: #def;                /*定义列表项背景色*/
        font-size: 16px;
        line-height: 32px;               /*垂直居中*/
        text-align: center;              /*平行居中*/}
    </style>
    <ul id="nav">
        <li>美 丽 说</li>
        <li>聚美优品</li>
        <li>唯 品 会</li>
        <li>蘑 菇 街</li>
        <li>1 号 店</li>
    </ul>

CSS3盒模型,# CSS,Web,css3,前端,css

6、界面

6.1、显示方式

浏览器解析有两种模式:怪异模式和标准模式。在怪异模式下,border和padding包含在width或height之内;在标准模式下,border、padding、width或height是各自独立区域。

使用box-sizing属性可以定义对象的解析方式,具体语法如下所示:

    box-sizing : content-box | border-box;

取值简单说明如下:

  • content-box:为默认值,padding和border不包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即元素的实际宽度=宽+边框+补白。
  • border-box:padding和border包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即元素的宽度=width。

【示例】设计两个盒子,在标准模式和怪异模式下进行解析比较,显示效果如下图所示:

    <style type="text/css">
    div {
        float: left;                         /* 并列显示 */
        height: 100px;                       /* 元素的高度 */
        width: 100px;                        /* 元素的宽度 */
        border: 50px solid red;              /* 边框 */
        margin: 10px;                        /* 外边距 */
        padding: 50px;                       /* 内边距 */
    }
    .border-box { box-sizing: border-box;}   /* 怪异模式解析 */
    </style>
    <div>标准模式</div>
    <div class="border-box">怪异模式</div>

CSS3盒模型,# CSS,Web,css3,前端,css

6.2、调整大小

使用resize属性可以允许用户通过拖动的方式改变元素的尺寸,具体语法如下所示:

    resize:none | both | horizontal | vertical

取值简单说明如下:

  • none:为默认值,不允许用户调整元素大小。
  • both:用户可以调节元素的宽度和高度。
  • horizontal:用户可以调节元素的宽度。
  • vertical:用户可以调节元素的高度。

目前除了IE浏览器外,其他主流浏览器都支持该属性。

【示例】演示使用resize属性设计可以自由调整大小的图片:

    <style type="text/css">
    #resize {
        /*以背景方式显示图像,这样可以更轻松地控制缩放操作*/
        background:url(images/1.jpg) no-repeat center;
        /*设计背景图像仅在内容区域显示,留出补白区域*/
        background-clip:content;
        /*设计元素最小和最大显示尺寸,用户也只能在该范围内自由调整*/
        width:200px; height:120px;
        max-width:800px; max-height:600px;
        padding:6px; border: 1px solid red;
        /*必须同时定义overflow和resize,否则resize无效,元素默认溢出显示为visible*/
        resize: both;
        overflow: auto;
    }
    </style>
    <div id="resize"></div>

CSS3盒模型,# CSS,Web,css3,前端,css

6.3、缩放比例

zoom是IE的专有属性,用于设置对象的缩放比例,另外它还可以触发IE的haslayout属性,清除浮动、margin重叠等作用,设计师常用这个属性解决IE浏览器存在的布局Bug。

CSS3支持该属性,基本语法如下所示:

    zoom:normal | <number> | <percentage>

取值说明如下:

  • normal:使用对象的实际尺寸。
  • <number>:用浮点数定义缩放比例,不允许负值。
  • <percentage>:用百分比定义缩放比例,不允许负值。

目前,除了Firefox浏览器之外,所有主流浏览器都支持该属性。

【示例】使用zoom放大第2幅图片为原来的2倍:

    <style type="text/css">
    img {
        height: 200px;
        margin-right: 6px;
    }
    img.zoom { zoom: 2; }
    </style>
    <img src="images/bg.jpg"/>
    <img class="zoom" src="images/bg.jpg"/>

当zoom属性值为1或100%时,相当于normal,表示不缩放;当zoom属性值为小于1的正数时,表示缩小,如zoom: 0.5;表示缩小一半。

7、轮廓样式

轮廓与边框不同,它不占用页面空间,且不一定是矩形。轮廓属于动态样式,只有当对象获取焦点或者被激活时呈现。使用outline属性可以定义块元素的轮廓线,具体语法如下所示:

    outline:<'outline-width'> || <'outline-style'> || <'outline-color'> || <'outline-offset'>

取值简单说明如下:

  • <'outline-width'>:指定轮廓边框的宽度。
  • <'outline-style'>:指定轮廓边框的样式。
  • <'outline-color'>:指定轮廓边框的颜色。
  • <'outline-offset'>:指定轮廓边框偏移值。

【示例】设计当文本框获得焦点时,在周围画一个粗实线外廓,以提醒用户交互效果:

    <style type="text/css">
    ……
    /*设计表单内文本框和按钮在被激活和获取焦点状态下时,轮廓线的宽、样式和颜色*/
    input:focus, button:focus { outline: thick solid #b7ddf2 }
    input:active, button:active  { outline: thick solid #aaa }
    </style>
    <div id="stylized" class="myform">
        <form id="form1" name="form1" method="post" action="">
            <h1>登录</h1>
            <p>请准确填写个人信息...</p>
            <label>Name <span class="small">姓名</span> </label>
            <input type="text" name="textfield" id="textfield" />
            <label>email <span class="small">电子邮箱</span> </label>
            <input type="text" name="textfield" id="textfield" />
            <label>Password <span class="small">密码</span> </label>
            <input type="text" name="textfield" id="textfield" />
            <button  type="submit">登录</button>
            <div class="spacer"></div>
        </form>
    </div>

CSS3盒模型,# CSS,Web,css3,前端,css

8、圆角样式

使用border-radius属性可以设计元素的边框以圆角样式显示,具体语法如下所示:

    border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

取值简单说明如下:

  • <length>:用长度值设置对象的圆角半径长度,不允许负值。
  • <percentage>:用百分比设置对象的圆角半径长度,不允许负值。
  • border-radius:此属性派生了以下4个子属性:
    ●border-top-right-radius:定义右上角的圆角。
    ●border-bottom-right-radius:定义右下角的圆角。
    ●border-bottom-left-radius:定义左下角的圆角。
    ●border-top-left-radius:定义左上角的圆角。

提示:border-radius属性可包含两个参数值:第一个参数值表示圆角的水平半径;第二个参数值表示圆角的垂直半径。如果仅包含一个参数值,则第二个参数值与第一个参数值相同。如果参数值中包含0,则这个角就是矩形,不会显示为圆角。

【示例】下面代码定义img元素显示为圆形,当图像宽高比不同时,显示效果不同:

    <style type="text/css">
    img {/*定义图像圆角边框*/
        border: solid 1px red;
        border-radius: 50%; /*圆角*/
    }
    .r1 {/*定义第1幅图像宽高比为1∶1*/
        width:300px;
        height:300px;
    }
    .r2 {/*定义第2幅图像宽高比不为1∶1*/
        width:300px;
        height:200px;
    }
    .r3 {/*定义第3幅图像宽高比不为1∶1*/
        width:300px;
        height:100px;
        border-radius: 20px; /*定义圆角*/
    }
    </style>
    <img class="r1" src="images/1.jpg" title="圆角图像" />
    <img class="r2" src="images/1.jpg" title="椭圆图像" />
    <img class="r3" src="images/1.jpg" title="圆形图像" />

CSS3盒模型,# CSS,Web,css3,前端,css

9、阴影样式

使用box-shadow属性可以定义元素的阴影效果,基本语法如下所示:

    box-shadow : none | inset? && <length>{2,4} && <color>?

取值简单说明如下:

  • none:无阴影。
  • <length>①:第1个长度值用来设置对象的阴影水平偏移值,可以为负值。
  • <length>②:第2个长度值用来设置对象的阴影垂直偏移值,可以为负值。
  • <length>③:如果提供了第3个长度值则用来设置对象的阴影模糊值,不允许负值。
  • <length>④:如果提供了第4个长度值则用来设置对象的阴影外延值,可以为负值。
  • <color>:设置对象的阴影的颜色。
  • inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影。

【示例1】定义一个简单的实影投影效果:

    <style type="text/css">
    img{
        height:300px;
        box-shadow:5px 5px;
    }
    </style>
    <img src="images/1.jpg" />

CSS3盒模型,# CSS,Web,css3,前端,css
【示例2】定义位移、阴影大小和阴影颜色:

    img{
        height:300px;
        box-shadow:2px 2px 10px #06C;
    }

CSS3盒模型,# CSS,Web,css3,前端,css
【示例3】定义内阴影,阴影大小为10px,颜色为#06C:

    <style type="text/css">
    pre {
        padding: 26px;
        font-size:24px;
        box-shadow: inset 2px 2px 10px #06C;
    }
    </style>
    <pre>
    -moz-box-shadow: inset 2px 2px 10px #06C;
    -webkit-box-shadow: inset 2px 2px 10px #06C;
    box-shadow: inset 2px 2px 10px #06C;
    </pre>

CSS3盒模型,# CSS,Web,css3,前端,css文章来源地址https://www.toymoban.com/news/detail-741522.html

到了这里,关于CSS3盒模型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(69)
  • [HTML]Web前端开发技术7(HTML5、CSS3、JavaScript )CSS的定位机制——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS的定位机制 文档流定位 元素类型   浮动定位 float的用处 float的特点 clear属性 层定位 position属性

    2024年02月05日
    浏览(72)
  • [HTML]Web前端开发技术9(HTML5、CSS3、JavaScript )——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS颜色与背景 颜色color属性 背景background属性 1. 背景颜色background-color 2. 背景图像background-image 3. 背景

    2024年02月03日
    浏览(75)
  • [HTML]Web前端开发技术12(HTML5、CSS3、JavaScript )——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 网页标题:三列自适应宽度 网页标题:多行三列自适应宽度 一级水平导航菜单:采用“无序列表+超

    2024年01月16日
    浏览(75)
  • web前端大作业_Html5+CSS3+JS原生项目_京东商城首页 详细代码

    index.html css index.css js index.js 效果图如下:            

    2024年02月11日
    浏览(62)
  • [HTML]Web前端开发技术26(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 数据类型 数据类型-字符型 数据类型-数值型 数据类型-布尔型 数据类型-其它类型 变量 转义字符 运算

    2024年02月20日
    浏览(70)
  • [HTML]Web前端开发技术5.2(HTML5、CSS3、JavaScript )CSS基础,decoration,selector,properties,Cascading——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS基础 CSS继承与层叠 使用CSS控制Web页面 CSS选择器类型 CSS选择器声明 课后练习 应用CSS链接外部样式

    2024年02月05日
    浏览(73)
  • 前端之css3

            1 新增实用的选择器,例如动态伪类,目标伪类,伪元素         2 新增更好的视觉效果         3 新增丰富的背景效果         4 新增全新的布局方案         5 新增web字体         6 新增颜色,hsl,hsla,rgba         7 新增2D和3D变换         8 新增动画和过渡效

    2024年02月13日
    浏览(70)
  • 前端学习——CSS3

    box-sizing resize box-shadow opacity background-origin background-clip background-size background复合属性 多背景图 边框圆角 边框外轮廓 文本阴影 文本换行 文本溢出 文本修饰 文本描边 线性渐变

    2024年02月12日
    浏览(53)
  • [HTML]Web前端开发技术8(HTML5、CSS3、JavaScript )CSS样式属性,withborder,italic | oblique,indent,padding,——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS属性值中的单位 CSS字体样式 font-size设置字号 字体样式font-style属性 字体系列font-family属性 字体变体

    2024年02月04日
    浏览(73)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包