WEBSTORM前端 —— 第2章：CSS —— 第4节：盒子模型-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>网页</title>
    <style>
        .red{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .green{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">div1</div>
    <div class="green">div2</div>
</body>
</html>

效果图：

2.Pxcook软件

（像素大厨）是一款切图设计工具软件。支持PSD文件的文字，颜色，距离自动智能识别，手动测量尺寸和颜色等。

官网链接：Pxcook

3.盒子模型——组成

①作用：布局网页，摆放盒子和内容

②重要组成部分：

内容区域——width 与 height

内边距——padding（出现在内容与盒子边缘之间）

边框线——border

外边距——margin（出现在盒子外面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>网页</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
            padding: 20px;
            border: 1px solid #ec9292;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>div1</div>
</body>
</html>

效果图：

4.盒子模型 ——边框线

**①属性名：border（bd）**
属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

②设置单方向边框线

属性名：border + 方位名词

（bd+方位名词首字母，如：bdl）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>网页</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;

            border-top: 1px solid #f1b00c;
            border-bottom: 5px dotted #42dd0e;
            border-right: 2px dashed #9f05ec;
            border-left: 10px solid #e3e011;
        }
    </style>
</head>
<body>
    <div>div1</div>
</body>
</html>

效果图：

5.盒子模型——内外边距

①作用：设置内容与盒子边缘之间的距离

②属性名：

内边距：padding 或 padding + 方位名词

外边距：margin

③padding与margin多值写法：（2个属性名的属性写法，含义一样）

取值个数	示例	含义
一个值	padding：10 px；	四个方向内边距均为10px。
两个值	padding：10px 20px；	上下10px，左右20px。
三个值	padding：10px 40px 80px；	上10px，左右40px，下80px
四个值	padding：10px 20px 40px 80px	上10px，右20px，下40px，左80px

6.盒子模型——尺寸计算

①默认情况：盒子尺寸=内容尺寸+border尺寸+内边距尺寸

②结论：给盒子加border/padding会撑大盒子

③解决：

（1）手动做减法，减掉border/padding的尺寸

（2）内减模式：box-sizing：border-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>网页</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;

            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>div1</div>
</body>
</html>

效果图：

7.清除默认样式

例如京东

* {

margin： 0；

padding： 0；}

（具体见专栏中webstorm前端项目中的CSS选择器中的部分！）

8.盒子模型——元素溢出

①作用：控制溢出元素的内容的显示方式

②属性名：overflow

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>网页</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;

            overflow: scroll;
        }
    </style>
</head>
<body>
    <div>div1</div>
</body>
</html>

效果图：

9.外边距问题

①合并现象

（1）场景：垂直排列的兄弟元素，上下margin会合并

（2）现象：取两个margin中的较大值生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>网页</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin-bottom: 80px;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <div class="one">div1</div>
    <div class="two">div2</div>
</body>
</html>

效果图：

②塌陷问题

（1）场景：父子级的标签，子级的添加上外边距会产生此问题

（2）现象：导致父级一起向下移动

（3）解决：

Ⅰ.取消子级margin，父级设置padding

Ⅱ.父级设置overflow：hidden

Ⅲ.父级设置border-top

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>网页</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: aqua;

            border-top:  1px solid #f11f1f;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: orange;

            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">father
        <div class="son">son</div>
    </div>
</body>
</html>

效果图：

10.行内元素——内外边距问题

（1）场景：行内元素添加margin和padding，无法改变元素垂直位置。

（2）解决方法：给行内元素添加line-height可改变垂直位置

11.盒子模型——圆角

（1）作用：设置元素的外边框为圆角

（2）属性名：border-radius

（3）属性值：数字+px/百分比

（4）提示：属性值是圆角半径

（5）常见应用：

①正圆形状：属性值为：宽高的一半/50%

②胶囊形状：属性值为：盒子高度的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>网页</title>
    <style>
        img{
            background-color: orange;
            border-radius: 50%
        }
        div{
            width:200px;
            height: 80px;
            background-color: green;
            border-radius: 40px;
        }
    </style>
</head>
<body>
    <img src="图像/灰太狼.png" height="330" width="409"/>

    <div></div>

</body>
</html>

12.盒子模型——阴影

（1）作用：给元素设置阴影效果

（2）属性名：box-shadow

（3）属性值：X轴偏移量，Y轴偏移量。模糊半径，扩散半径，颜色，内外阴影。

注：X轴Y轴偏移量必须书写！且默认是外阴影，内阴影需添加inset！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>网页</title>
    <style>
        div{
            width:200px;
            height: 80px;
            margin: 50px;
            background-color: #eee4a5;
            box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5)inset;
        }
    </style>
</head>
<body>

    <div></div>

</body>
</html>

效果图：