【css知识】div常用属性大全赶快收藏整理起来吧

最新推荐文章于 2024-06-14 20:15:32 发布

天若有情673

最新推荐文章于 2024-06-14 20:15:32 发布

阅读量99

点赞数 2

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_56334307/article/details/139544394

版权

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                /* 设置盒子的宽度 */
                width: 200px;
                /* 设置盒子的高度 */
                height: 200px;
                /* 设置盒子的背景颜色 */
                background-color: aqua;
                /* 设置盒子中文本的颜色，但通常用于inline元素，对div这类块级元素无效 */
                color: red;
                /* 设置盒子内部的内边距，上右下左，顺时针方向 */
                padding: 10px 15px;
                /* 设置盒子的边框，宽度、样式、颜色 */
                border: 2px solid #000;
                /* 设置盒子的圆角 */
                border-radius: 14px;
                /* 设置盒子的阴影效果，水平偏移、垂直偏移、模糊半径、扩展半径、颜色 */
                box-shadow: 2px 2px 5px 4px aquamarine;
                /* 设置盒子内文本的大小 */
                font-size: 50px;
                /* 设置盒子内文本的水平对齐方式 */
                text-align: center;
                /* 设置盒子内文本的行高，用于垂直居中 */
                line-height: 100px;
                /* 设置盒子内文本的字体 */
                font-family: "黑体";
                /* 设置盒子内文本的字体粗细 */
                font-weight: 700;
                /* text-decoration属性用于设置文本装饰，但值的设置不正确，应使用如'underline'、'overline'、'line-through'、'blink'等，且它们之间不能通过空格分隔 */
                text-decoration: #fff underline overline line-through;
                /* 设置盒子内文本的转换，这里是首字母大写 */
                text-transform: capitalize;
            }
        </style>
    </head>
    <body>
        <div class="box">content content</div>
    </body>
</html>