大学计算机HTML，css盒子，页面布局，浮动

CSS盒子

1.盒子居中的方法

1、先让盒子的上下边缘和父盒子的水平中心线重叠，，然后再让子盒子往回移动自身一半的距离

 1 <div class="father">                // 结构

 2         <div class="son"></div> 

3  </div>

          /*下面为样式*/

 4         /* 通过 transform 属性来移动*/

 5         .father {

 6             width: 500px; 

7             height: 500px;

 8             background-color: skyblue;

 9             border: 1px solid #000;

10             margin: 0 auto;

11         }

12         .son {

13             width: 200px;

14             height: 200px;
15             background-color: pink;
16             border: 1px solid #000;
17             margin-top: 50%;                  // 向下移动父盒子的一半18             transform: translateY(-50%);      // 向上移动自身盒子的一半
19         }     
 20     
21             /* 通过 定位来移动*/
22            .father {
23             width: 500px;
24             height: 500px;
25             background-color: skyblue;
26             border: 1px solid #000;
27             margin: 0 auto;
28             position: relative;
29         }
30         .son {
31             width: 200px;
32             height: 200px;
33             background-color: pink;
34             border: 1px solid #000;
35             position: absolute;
36             top: 50%;                  // 先向下移动父盒子的一半
37             margin-top: -100px;        // 再向上移动自身盒子的一半
38         
 39         }    

2、使用表格的 vertical-align :middle 属性来实现盒子垂直居中

 1  .father {
 2             width: 500px;
 3             height: 500px;
 4             background-color: skyblue; 
5             border: 1px solid #000; 
6             display: table-cell;         // 显示形式为表格 
7             vertical-align: middle;      // 里面内容为居中对齐 
8         }
 9         .son {
10             width: 200px;
11             height: 200px;
12             background-color: pink;
13             border: 1px solid #000;
14         }

3、知道父盒子的高度，可以使用 margin 计算盒子的上下边距，来使盒子居中

 1  .father { 
2             width: 500px; 
3             height: 500px;
 4             background-color: skyblue; 
5             border: 1px solid #000; 
6             margin: 50px auto; 
7             
 8         }
 9         .son {
10             width: 200px;
11             height: 200px;
12             background-color: pink;
13             border: 1px solid #000;
14             margin-top: 149px;         // 根据父盒子的高度指定 margin-top 即可
15         }

二、盒子水平居中的方法

1、使用 margin: 0 auto;

 1  .father {
 2             width: 500px; 
3             height: 500px;
 4             background-color: skyblue; 
5             border: 1px solid #000;
 6             margin: 50px auto; 
7              
8         } 
9         .son {
10             width: 200px;
11             height: 200px;12             background-color: pink;
13             border: 1px solid #000;
14             margin: 0 auto;           // 让盒子左右自动适应，想当于 left:auto; right:auto
15         }

2、通过计算 margin 左右边距来实现居中

 1  .father {
 2             width: 500px;
 3             height: 500px;
 4             background-color: skyblue; 
 5             border: 1px solid #000; 
 6             margin: 50px auto; 
 7          
 8         }
 9         .son {
 10             width: 200px;
 11             height: 200px;
 12             background-color: pink;
 13             border: 1px solid #000;
 14             margin-left: 149px;          // 父盒子的定宽的，指定 margin-left 即可 
 15         }

3、先让盒子左右边缘和父盒子垂直的中心线垂直，然后把子盒子往回移动自身宽度的一半

 1 /* 通过 transform 实现*/  
2  .father { 
3             width: 500px; 
4             height: 500px; 
5             background-color: skyblue; 
6             border: 1px solid #000; 
7             margin: 50px auto; 
8              
9         }
10         .son {
11             width: 200px;
12             height: 200px;
13             background-color: pink;
14             border: 1px solid #000;
15             margin-left: 50%;                // 先移动父盒子的一半16             transform: translateX(-50%);     // 再移动自身盒子一半
17 
18         }
19  /*通过 定位实现*/
20  .father {
21             width: 500px;
22             height: 500px;
23             background-color: skyblue;
24             border: 1px solid #000;
25             margin: 50px auto;
26             position: relative;
27             
28         }
29         .son {
30             width: 200px;
31             height: 200px;
32             background-color: pink;
33             border: 1px solid #000;
34             position: absolute;
35             left: 50%;                       // 向右移动父盒子一半36             margin-left: -100px;             // 向左移动自身盒子一半
37             /* transform: translateX(-50%); */    //向左移动自身盒子一半

38 }

4.把盒子转成 行内块，然后用 text-align 属性使盒子水平居

 1  .father {  
2             width: 500px;  
3             height: 500px;  
4             background-color: skyblue; 
 5             border: 1px solid #000;
 6             margin: 50px auto; 
7             text-align: center;               // 让父盒子设置水平居中 
8             
 9         }
10         .son {
11             width: 200px;
12             height: 200px;13             background-color: pink;
14             border: 1px solid #000;
15             display: inline-block;            // 让子盒子显示为行内块模式16         }

外边距合并问题以及解决方式

一、父子元素margin合并问题演示

在div里面有子元素div1时，若父元素div在没有设置overflow:hidden或者是border属性，则父元素div的margin-top的值为父元素div和子元素div1中的margin-top的最大值。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        body {

            background: pink;

        }

        .div {

            margin: 0 auto;

            margin-top: 10px;

            width: 450px;

            height: 450px;

            background: #aaa;

        }
        .div1 {

            width: 200px;

            height: 200px;

            background: red;

            margin: 50px 0px;

        }

    </style>

</head>
<body>

    <div class="div">

        <div class="div1"></div>

    </div>

</body>
</html>

注意：div1在div中的margin-top值为0px。

效果图：

 

二、父子元素margin合并问题解决办法

方法一：设置父元素的overflow属性为hidden。

方法二：设置父元素的border属性，如：border:1px solid red;

<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        body {

            background: pink;

        }
        .div {

            overflow: hidden;

            /* border:1px solid red;*/

            /* 利用overflow属性或者通过给父级元素设置border可以避免出现父级元素的

               margin合并的情况，当没有设置这两个属性之一时，该div的margin-top值

               会取div1的margin-top和其自身margin-top的最大值*/

            margin: 0 auto;

            margin-top: 10px;

            width: 450px;

            height: 450px;

            background: #aaa;