CSS样式

反方向的钟111

已于 2023-08-03 17:44:33 修改

阅读量38

点赞数

文章标签： css 前端

于 2023-08-03 17:43:45 首次发布

本文链接：https://blog.csdn.net/qq_68112729/article/details/132088511

版权

CSS样式

一.文本样式
二.背景样式
三.边框样式
四.盒子模型
- 1.设置盒子宽度

一.文本样式

大小 {font-size:30px;} xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

行高 {line-height: normal;}(正常) 单位：PX、PD、EM

粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)

大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

 "Helvetica", "sans-serif"," Verdana"

二.背景样式

色彩 {background-color: #FFFFFF;}

图片 {background-image: url();}

重复 {background-repeat: no-repeat;}

滚动 {background-attachment: fixed;}(固定) scroll;(滚动)

位置 {background-position: left;}(水平) top(垂直);

简写方法 {background:#000 url(..) repeat fixed left top;}

三.边框样式

<style>
    .border{
        /*边框宽度*/
        border-width: 2px;
        /*边框颜色*/
        border-color: red;
        /*边框样式：solid 实线  dotted 点线  dashed 虚线*/
        border-style: dashed;
        /*边框样式缩写：样式 颜色 宽度*/
        border:solid green 5px;
        /*边框可以为4个方向分别设置*/
        border-top: dashed black 4px;
        border-right: dashed #FF00FF 4px;
        border-bottom: dotted darkblue 4px;
        border-left: solid fuchsia 5px;
        /*没有边框*/
        border: none;
        /*常用的细边框样式*/
        border: solid 1px #ccc;
    }
</style>
solid /*实线框*/

dotted /*虚线框*/

double /*双线框*/

groove /*立体内凸框*/

ridge /*立体浮雕框*/

inset /*凹框*/

outset /*凸框*/

四.盒子模型

margin：外边距，清除边框外区域，外边距是透明的。
border：边框，围绕在内边距和内容外的边框。
padding：内边距，清除内容周围区域内边距是透明的。
content：内容，显示文字和图像。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    /* border:边框，分4个方向，同理margin、padding也分为四个方向
    * margin:元素与元素之间对的距离
    * padding:内容与边框之间的距离
    * 设置的时候顺序：上 右 下 左
    */
        .div{
            border: solid red 10px;
            /*四个方向上的元素与元素之间的距离都是50px*/
            margin: 50px;
            /*两个值的时候：第一个参数表示上下距离都是50px,第二个参数表示左右距离都是100px*/
            margin: 50px 100px;
            padding: 50px;
            /*
             一个元素真正的宽度=width+左右padding值+左右的border值
             一个元素的真正高度=height+上下的padding值+上下的border值
             * */
        }
    </style>
</head>
<body>
    <div class="div">111111111112222222222223333333333333333</div>
</body>

1.设置盒子宽度

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* box-sizing:确认元素的大小
        content-box: 实际宽度=width+左右的psdding值+上下的border值
        			 实际高度=height+上下的padding值+上下的border值
        border-box:实际宽度=width;实际高度=height
        			padding和border不会影响元素的实际宽高
        * */
        .box{
           width: 100px;
           height: 200px;
           border: 5px solid;
           padding: 5px;
           box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div class="box">你好中国</div>
</body>

反方向的钟111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式

content-box: 实际宽度=width+左右的psdding值+上下的border值。一个元素的真正高度=height+上下的padding值+上下的border值。一个元素真正的宽度=width+左右padding值+左右的border值。/*两个值的时候：第一个参数表示上下距离都是50px,第二个参数表示左右距离都是100px*/实际高度=height+上下的padding值+上下的border值。/*四个方向上的元素与元素之间的距离都是50px*//*常用的细边框样式*/
复制链接

扫一扫