CSS(4)-CSDN博客

本文链接：https://blog.csdn.net/2303_79590957/article/details/135033954

盒子模型：

盒子有3个属性：

1.内边距：padding,出现在盒子与内容边缘之间；

2.边框线：border，边框线粗细，线条样式（solid实线，dashed虚线，dotted点线）颜色；

3.外边距：margin，出现在盒子外面，用来拉开两个盒子之间的距离。

默认整个盒子所占的宽（高）度=width(hight)+padding+border+margin

内边距（padding）+外边距（margin):

padding: 20px;margin: 20px;的选定方式：

从1到4，1有（20px）则1为20px，2无，则2和1一样，3无，则3和对面的1一样，4无，则4和对面的2一样。依此类推：padding: 10px 30px 40px;为

1：10px；

2：30px；

3：40px；

4：30px；

也可以单独选定，例如：padding-bottom，margin-left（top,bottom,left,right）等。

尺寸计算：

如上文：默认整个盒子所占的宽（高）度=width(hight)+padding+border+margin；

所以当只知道整个盒子的大小时，想计算width（手动）会很麻烦，于是我们可以添加内减模式，即：box-sizing:border-box;就只要设置width就可以了。

盒子的版心居中：

默认情况下，盒子（div）的宽与页面的宽是相等的，所以想设置版心居中，就得先把width先设置了，在加上margin: 0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 1000px;
            height: 200px;
            background-color: pink;
            /* 不会撑大尺寸 */
            /* margin: 50px; */
            /* margin: 20px 5px; */
            /* margin: 20px 5px 10px; */
            /* margin: 20px 5px 10px 15px; */
            /* margin-right: 10px; */
            /* 版心居中时，盒子必须要有宽度 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>div标签</div>
</body>
</html>

效果如下：

清除默认样式：

先清除默认的，再根据设计卡精确设计具体CSS代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* 选中所有标签，启用內减模式 */
            /* 先清除默认的，再根据设计卡精确设计 */
            margin: 0;
            padding: 0 0;
            box-sizing: border-box;
        }
        li {
            /* 列表样式，清除小圆点 */
            list-style: none;
        }
    </style>
</head>
<body>
    <h1>h1标签</h1>
    <ul>
        <li>li1</li>
    </ul>
</body>
</html>