HTML和CSS知识汇总5-CSDN博客

本文链接：https://blog.csdn.net/2302_77512583/article/details/139778388

盒子模型

1、外边距

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

```css

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距右外边距下外边距左外边

```

取值顺序跟内边距相同。

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。

2. 盒子必须指定了宽度（width）

然后就给**左右的外边距都设置为auto**，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

```css

.header{ width:960px; margin:0 auto;}

```

2、小风车案例展示

<!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>
        /* 1、行內以及行內快元素如果html中間有回車將會被解析為空白，會有空白 */
        /* 2、一行內顯示的元素空間不足，會自動換行到下一行 */
        
        .windmill {
            width: 400px;
            height: 400px;
            /* background-color: aquamarine; */
            font-size: 0px;
            /* 风车居中显示 */
            margin: 0 auto;
            /* 过度：在一定的时间内完成这个动作 */
            transition: all 100s;
        }
        
        .windmill div {
            width: 200px;
            height: 200px;
            background-color: rgb(3, 244, 124);
            display: inline-block;
        }
        
        .blade1 {
            border-radius: 0 100% 0 100%;
        }
        
        .blade2 {
            border-radius: 100% 0 100% 0;
        }
        
        .windmill:hover {
            /* 属性变换css3的一个值 */
            transform: rotate(360000deg);
        }
    </style>
</head>

<body>
    <!-- 解决方案：1、浮动 2、弹性盒子 3、给父元素设置font-size为零 -->
    <div class="windmill">
        <div class="blade1"></div>
        <div class="blade2"></div>
        <div class="blade2"></div>
        <div class="blade1"></div>
    </div>
</body>

</html>

3、外边距的应用-盒子居中

margin: 0 auto;

可以让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。

2. 盒子必须指定了宽度（width）

然后就给**左右的外边距都设置为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>
        .main {
            /* 盒子居中要素 */
            /* 1、块元素div */
            /* 2、版心 内容中心宽度 */
            /* 3、 margin: 0 auto;*/
            width: 1000px;
            height: 100px;
            margin: 0 auto;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="main">文档主体内容</div>

</body>

</html>

4、清除外边距

<!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;
        }
        
        .main {
            width: 1000px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="main">文档主体内容</div>

</body>

</html>

注意：并列元素外边距设置不要写两个只给一个margin元素设置

5、嵌套元素的外边距（外边距塌陷）

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

简单来说就是，两个盒子嵌套时，不能单纯设置内盒子的margin-top的值，会导致两个盒子都向下移动，不能满足只移动一个盒子的效果。

>解决方案：

>1. 可以为父元素定义1像素的上边框或上内边距。

>2. 可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。

<!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>
        .father {
            width: 400px;
            height: 200px;
            background-color: red;
            margin-top: 10px;
            /* 1、给父元素设置1px的上边框或者1px的边框*/
            border: 1px solid red;
            /* 2、overflow：hidden; 溢出隐藏 BFC原理 */
            overflow: hidden;
        }
        
        .son {
            margin-top: 20px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

6、盒子大小的计算

标准的盒子模型：width/height + padding + border

/* 2、IE盒子模型/怪异盒子模型：宽度=width */ */

IE盒子总长度=margin+width

标准盒子总长度=margin + width/height + padding + border

**2.IE盒子（border-box）：**

又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。

<!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>
        /* 标准的盒子模型：width/height + padding + border */
        /* 宽度：200+20+20+30+30 */
        /* 2、IE盒子模型/怪异盒子模型 */
        /* 宽度：width */
        
        .box {
            width: 200px;
            height: 300px;
            padding: 20px;
            margin: 40px;
            border: 30px solid red;
            /* 标准盒子模型 */
            /* box-sizing: content-box; */
            /* 2、IE盒子模型/怪异盒子模型 */
            box-sizing: border-box;
        }
        /* IE盒子总长度=margin+width 
        标准盒子总长度=margin + width/height + padding + border */
    </style>
</head>

<body>
    <div class="box">盒子</div>
</body>

</html>

7、盒子阴影

box-shadow: 水平阴影垂直阴影模糊距离阴影尺寸阴影颜色;

> 注意:

> 1. 前两个属性是必须写的。其余的可以省略。

> 2. 默认是外阴影 (outset) ，不用设置，想要内阴影设为 inset 。

> 3. X轴与Y轴如果有值，就改变了（正值向右向下）

<!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>
        .box {
            width: 200px;
            height: 300px;
            margin: 50px auto;
            border: 2px solid #ccc;
            /* 盒子阴影 */
            /* box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色; */
            box-shadow: 10px 10px 10px 10px red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

8、溢出的使用

overflow：；

<!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>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 自动：当内容超出时，自动出现滚动条 */
            overflow: auto;
            /* scroll：不管超出与否总是显示滚动条 */
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div class="box">
        快科技6月18日消息，据国内媒体报道，2020年，脑瘫少年姚俊鹏高考分超过理科一本线108分，以623分的成绩考上中国药科大学。快科技6月18日消息，据国内媒体报道，2020年，脑瘫少年姚俊鹏高考分超过理科一本线108分，以623分的成绩考上中国药科大学。快科技6月18日消息，据国内媒体报道，2020年，脑瘫少年姚俊鹏高考分超过理科一本线108分，以623分的成绩考上中国药科大学。
    </div>
</body>

</html>

9、图片溢出

/* 针对图片做溢出隐藏 */

overflow: hidden;

10、浮动

<!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>
        .con {
            width: 800px;
            height: 200px;
            border: 1px solid red;
            margin: 50px auto;
        }
        
        .con div {
            width: 200px;
            height: 200px;
            /* 浮动 */
            /* 浮动后的元素的display属性是block，但是可以一行展示 */
            /* 左浮动 */
            float: left;
            /* 右浮动 */
            float: right;
        }
        
        .con1 {
            background-color: red;
        }
        
        .con2 {
            background-color: blue;
        }
        
        .con .con3 {
            background-color: pink;
            float: right;
        }
    </style>
</head>

<body>
    <div class="con">
        <div class="con1">box1</div>
        <div class="con2">box2</div>
        <div class="con3">box3</div>
    </div>

</body>

</html>