博客

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

  • Post author:
  • Post category:其他


目录



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>

参数说明如下：

  • 第一个参数h-shadow，必选，表示阴影偏移x的位置，大于0往右偏，小于0往左偏
  • 第二个参数v-shadow，必选，表示阴影偏移y的位置，大于0往下偏，小于0往上偏
  • 第三个参数blur，表示阴影模糊的程度，默认为0px不模糊，数值越大越模糊

显示效果如下：

文字阴影


版权声明：本文为yy8623977原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。