CSS：盒子模型、三大特性、新特性

最新推荐文章于 2023-07-11 20:20:15 发布

YPnt

最新推荐文章于 2023-07-11 20:20:15 发布

阅读量370

点赞数

分类专栏：前端学习文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_53067049/article/details/128547833

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

盒子模型要素：border边框、content内容、padding内边距、margin外边距

盒子模型

边框

border-width边框的宽度、border-style边框的样式、border-color边框颜色

而对于table而言，其也是盒子的模型之一，除以上操作之外，还存在一个更重要的属性，border-collapse用于将表格边框进行合并。

而盒子的边框会影响盒子的大小，边框会使得盒子大小变大。

内边距

padding-top.....设置盒子与其中文字的间距

外边距

与盒子border外层的间距

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 父元素塌陷问题：给定一个边框、给定内边距、添加一个overflow:hidden */
        
        div {
            width: 300px;
            height: 200px;
            border-width: 10px;
            border-style: solid;
            border-color: aqua;
            /* 指定特定边框效果 */
            border-top-width: 1px;
            /* 等价于border: 10px solid aqua; */
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
            /* 等价于padding: 5px; */
            /* word-wrap: break-word; */
            margin-top: 10px;
        }
        
        table {
            width: 200px;
            height: 100px;
        }
        
        table,
        td {
            border: 3px blue solid;
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        他会自动换行嘛他会自动换行嘛他会自动换行嘛他会自动换行嘛他会自动换行嘛他会自动换行嘛他会自动换行嘛
    </div>
    <div>
        他会分开嘛他会分开嘛他会分开嘛他会分开嘛他会分开嘛他会分开嘛他会分开嘛他会分开嘛他会分开嘛他会分开嘛
    </div>
    <table>
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>111</td>
                <td>222</td>
                <td>333</td>
                <td>444</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

三大特性

层叠性：后样式与前样式冲突，则将其覆盖

继承性：孩子将继承父亲的样式

权重：!important>内联样式>ID选择器>类、伪类>标签选择器>通用选择器

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三大特性</title>
    <style>
        /* 重叠性 */
        
        div {
            /* 存在!important则覆盖之后所有样式 */
            color: aquamarine!important;
            font-size: large;
        }
        
        div {
            color: black;
        }
        /* 继承性 */
        
        .test {
            color: blue;
        }
        
        #iddd {
            color: burlywood;
        }
        
        ul {
            color: blue;
        }
        /* 权重叠加 */
        
        ul>li {
            color: grey;
        }
    </style>
</head>

<body>
    <div>这是重叠性。这是重叠性。这是重叠性。后样式将前样式覆盖。</div>
    <div class="test">class的权重blue</div>
    <div class="test" id="iddd">id的权重burlywood</div>
    <div class="test" id="iddd" style="color:red">style的权重red</div>
    <ul>
        <li>这是继承性。这是继承性。这是继承性。子标签继承父标签的某些样式（text,font,line,color）<br/></li>
    </ul>
</body>

</html>

新特性

border-radius圆角边框，将盒子四角变成圆角，其中属性长度，为圆的半径，然后该圆与矩形的四角进行靠近，得到圆角。

盒子阴影，h-shadow:水平阴影位置、v-shadow:垂直阴影位置、blur:影子的虚实、spread:影子的尺寸、color:颜色

文字阴影，h-shadow:水平阴影位置、v-shadow:垂直阴影位置、blur:虚实、color:颜色

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 10px;
        }
        
        .two {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            /* border-radius: 50px; */
        }
        
        .three {
            width: 200px;
            height: 100px;
            background-color: red;
            border-radius: 50px;
            /* border-radius: 50px; */
        }
        
        .four {
            width: 200px;
            height: 100px;
            background-color: red;
            border-radius: 10px 20px 30px 40px;
            /* 分开写则使用b-t-l */
            border-top-left-radius: 10px;
        }
        
        .five {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .five:hover {
            /* h-shadow:水平阴影位置     v-shadow:垂直阴影位置    blur:虚实    spread:尺寸      color:颜色 */
            box-shadow: 10px 10px 10px -4px rgb(0, 0, 0, .3);
        }
        
        .six {
            width: 100px;
            height: 100px;
            text-shadow: 5px 5px 6px rgb(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <!-- 圆角 -->
    <!-- 圆角边框 -->
    <div class="one"></div>
    <!-- 圆形 -->
    <div class="two"></div>
    <!-- 圆角矩形 -->
    <div class="three"></div>
    <!-- 不同圆角 -->
    <div class="four"></div>

    <!-- 阴影 -->
    <div class="five"></div>

    <!-- 文字阴影 -->
    <div class="six">这是文字阴影</div>
</body>

</html>