CSS盒子模型(border、padding、margin设置)、行内块或行内元素水平居中、去除li小圆点、圆角、盒子阴影、文字阴影、透明度

原创已于 2023-10-05 16:39:22 修改

· 6.1k 阅读

17 ·

版权

文章标签：

#css margin #css padding #css圆角 #css阴影 #css行内块元素居中

于 2022-01-27 21:06:02 首次发布

CSS3 专栏收录该内容

17 篇文章

订阅专栏

1. 盒子模型的组成

盒子模型组成

1. border边框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        div {
            width: 300px;
            height: 300px;
            border: 5px dotted red;
            border-right: 10px dashed yellow;
        }



    </style>
</head>
<body>

<div>盒子一</div>


</body>
</html>

参数说明如下：

border3个参数分别是border-width、border-style、border-color, 其中border-style的值可以是none(默认)、solid、dashed(虚线)
还可以设置border-top、border-left、border-bottom
border会使盒子实际尺寸变大

显示效果如下：
border边框

1.1 border-collapse: collapse

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        table {
            border-collapse: collapse;
        }


        th,td {
            border: 1px solid red;
        }


    </style>
</head>
<body>

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>张三</td>
            <td>18</td>
        </tr>
        <tr>
            <td>赵四</td>
            <td>19</td>
        </tr>

    </tbody>

</table>

</body>
</html>

设置border-collapse: collapse可以使表格之间的间隙没有，而且设置的border相邻的部分会被合并

显示效果如下：
border-collapse

2. padding内边距

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        div {
            width: 300px;
            height: 300px;
            padding: 40px 30px 20px 10px;
        }

        P {
            padding: 40px 30px 20px 10px;
        }


    </style>
</head>
<body>

<div>
    <p>段落一</p>
</div>

</body>
</html>

当padding值为1个时，则表示周围4块。当padding值为两个时，则第一个表示上下，第二个表示左右。当padding值为4个，则分别表示上、右、下、左
也可以用padding-left、padding-right、padding-top、padding-bottom单独指定

如果盒子指定了width/height，再指定padding值，padding会使盒子变大
padding变大

如果盒子没有指定width/height，但指定padding值，padding不会使盒子变大
padding不变大

3. margin外边距

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        * {
            margin: 0px;
            padding: 0px;
        }

        div {
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 10px auto 30px auto;
        }
        
    </style>
</head>
<body>

<div>盒子一</div>

</body>
</html>

说明：

因为浏览器会给不同盒子设置不同的margin和padding，为了统一，需要将margin和padding设置为0
当margin值为1个时，则表示周围4块。当margin值为两个时，则第一个表示上下，第二个表示左右。当margin值为4个，则分别表示上、右、下、左
也可以用margin-left、margin-right、margin-top、margin-bottom单独指定
块元素水平居中的条件：
1. 块元素设置了width
2. 块元素左、右margin设置为auto

显示效果如下：
margin设置

3.1 margin-top塌陷问题

如果父盒子和子盒子都有margin-top，则会引起盒子塌陷问题

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        * {
            margin: 0px;
            padding: 0px;
        }

        .outer {
            width: 300px;
            height: 300px;
            background-color: red;
            overflow: hidden;
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: yellow;
            
        }

        div {
            margin-top: 10px;

        }


    </style>
</head>
<body>

<div class="outer">
    <div class="inner">盒子一</div>
</div>

</body>
</html>

正常显示效果如下：
正常效果

如果不加overflow: hidden;，显示效果如下：
塌陷问题

4. 行内块或行内元素水平居中

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        * {
            margin: 0px;
            padding: 0px;
        }

        div {
            text-align: center;
        }

    </style>
</head>
<body>

<div>
    <span>行内元素</span>
    <img src="images/baidu.png"/>
</div>

</body>
</html>

只需给父元素添加text-align: center;即可

显示效果如下：
行内元素或行内块元素水平居中

5. 去除li小圆点

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        li {
            list-style: none;
        }


    </style>
</head>
<body>

<ul>
    <li>元素一</li>
    <li>元素二</li>
    <li>元素三</li>
</ul>

</body>
</html>

显示效果如下：
去除li小圆点

6. border-radius圆角

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        div {
            width: 800px;
            height: 300px;
            background-color: red;
            border-radius: 10px 50% 50% 40px;
        }


    </style>
</head>
<body>

<div>盒子一</div>

</body>
</html>

参数说明如下：

百分比的长度, 为长和宽最大的百分值
当border-radius值为1个时，则表示4个圆角。当border-radius值为两个时，则第一个表示左上角和右下角，第二个表示右上角和左下角。当border-radius值为4个，则分别表示左上角、右上角、右下角、左下角
也可以用border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius单独指定

显示效果如下：
boder圆角

7. 盒子阴影box-shadow

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        div {
            width: 800px;
            height: 300px;
            background-color: red;
            box-shadow: 10px 20px 5px 3px rgba(0,0,0,0.8);
        }


    </style>
</head>
<body>

<div>盒子一</div>

</body>
</html>

参数说明如下：

盒子阴影不占用空间，不影响其它盒子排列
第一个参数h-shadow，必选，表示阴影偏移x的位置，大于0往右偏，小于0往左偏
第二个参数v-shadow，必选，表示阴影偏移y的位置，大于0往下偏，小于0往上偏
第三个参数blur，表示阴影模糊的程度，默认为0px不模糊，数值越大越模糊
第四个参数spread，表示阴影的大小，数值越大，阴影越大

显示效果如下：
盒子阴影

8. 文字阴影

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        h4 {
            text-shadow: 3px 6px 2px rgba(0, 0, 0, 0.8);
        }


    </style>
</head>
<body>

<h4>我是有阴影的文字</h4>

</body>
</html>

参数说明如下：