大学计算机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;

        }
        .div1 {

            width: 200px;

            height: 200px;

            background: red;

            margin: 50px 0px;
        }
    </style>
</head>
<body>
    <div class="div">
        <div class="div1"></div>
    </div>
</body>
</html>

效果图：

 

三、兄弟元素margin合并问题演示

当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。
 

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        body {

            background: pink;

        }

        

        .div {

            overflow: hidden;

            margin: 0 auto;

            margin-top: 10px;

            width: 450px;

            height: 600px;

            background: #aaa;

        }

        

        .div1 {

            width: 200px;

            height: 200px;

            background: red;

            margin: 50px 0px;

        }

        

        .div2 {

            width: 200px;

            background: green;

            margin: 30px 0px;

            height: 200px;

        }

    </style>

</head>



<body>

    <div class="div">

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

        <div class="div2"></div>

    </div>

</body>

</html>

效果图： 

四、兄弟元素margin合并问题解决方法

使兄弟元素不在同一个BFC区域下，具体做法如：将兄弟元素分别触发BFC或将兄弟元素包在不同的div下，这些不同的div再分别触发BFC。参考BFC概念及应

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        body {

            background: pink;

        }

        

        .div {

            overflow: hidden;

            margin: 0 auto;

            margin-top: 10px;

            width: 300px;

            height: 600px;

            background: #aaa;

        }

        

        .div1 {

            width: 200px;

            height: 200px;

            background: red;

            margin: 50px 0px;

            float: left;

        }

        

        .div2 {

            width: 200px;

            background: green;

            margin: 30px 0px;

            height: 200px;

            float: left;

        }

    </style>

</head>



<body>

    <div class="div">

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

        <div class="div2"></div>

    </div>

</body>



</html>

效果图：

 

CSS3 圆角

使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

CSS3 border-radius 属性

使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。

以下为三个实例：

1. 指定背景颜色的元素圆角：

圆角！

2. 指定边框的元素圆角:

圆角！

3. 指定背景图片的元素圆角:

圆角！

代码如下:

实例

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
• 一个值： 四个圆角值相同

以下为三个实例:

1. 四个值 - border-radius: 15px 50px 30px 5px:

2. 三个值 - border-radius: 15px 50px 30px:

3. 两个值 - border-radius: 15px 50px:

以下为源代码:

实例

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

您还可以创建椭圆边角:

实例

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

CSS3 圆角属性

属性	描述
border-radius	所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

CSS3 - 盒子阴影

box-shadow: offset-x offset-y [blur [spread]] [color] [inset]

box-shadow 属性用于向盒子添加一个或多个阴影效果。
offset-x：阴影的水平偏移量。正数向右偏移，负数向左偏移。
offset-y：阴影的垂直偏移量。正数向下偏移，负数向上偏移。
blur：阴影模糊度，不能取负数。
spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。
inset：表示添加内阴影，默认为外阴影。

外阴影

设置单个阴影

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box {

            width: 300px;

            height: 300px;

            margin: 100px 100px;

            border: 1px solid #CCCCCC;

            box-shadow: 0px 0px 20px red;

        }

    </style>
</head>
<body>

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

设置多个阴影

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box {

            width: 300px;

            height: 300px;

            margin: 100px 100px;

            border: 1px solid #CCCCCC;

            box-shadow: 0px 0px 10px red, 5px -5px 10px blue, 10px -10px 10px yellow, 20px -20px 10px black;

        }

    </style>
</head>
<body>

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

spread取值对阴影大小的影响

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box {

            width: 100px;

            height: 100px;

            margin: 100px 100px;

            border: 1px solid #CCCCCC;

            box-shadow: 120px 0px 0px 0px red;

        }

    </style>
</head>
<body>

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

当 spread 为0时，阴影大小与元素大小相同。

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box {

            width: 100px;

            height: 100px;

            margin: 100px 100px;

            border: 1px solid #CCCCCC;

            box-shadow: 120px 0px 0px 10px red;

        }

    </style>
</head>
<body>

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

当 spread 为正数时，阴影大小将大于元素大小。如原来总宽高为102px的元素（包括边框2px），在设置阴影大小为10px后，阴影的宽高会变为122px（阴影宽高各加10）。

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box {

            width: 100px;

            height: 100px;

            margin: 100px 100px;

            border: 1px solid #CCCCCC;

            box-shadow: 120px 0px 0px -10px red;

        }

    </style>
</head>
<body>

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

当 spread 为负数时，阴影大小将小于元素大小。如原来总宽高为102px的元素（包括边框2px），在设置阴影大小为-10px后，阴影的宽高会变为82px（阴影宽高各减10）。

内阴影

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box {

            width: 300px;

            height: 300px;

            margin: 100px 100px;

            border: 1px solid #CCCCCC;

            box-shadow: 0px 0px 20px red inset;

        }

    </style>
</head>
<body>

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

CSS Float(浮动)

什么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}

.text_line

{

clear:both;

margin-bottom:2px;

}

</style>

</head>



<body>

<h3>图片库</h3>

<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>

<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">

<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">

<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">

<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">

<h3 class="text_line">第二行</h3>

<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">

<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">

<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">

<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">

</body>

</html>

 

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}

</style>

</head>



<body>

<h3>图片库</h3>

<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>

<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">

<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">

<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">

<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">

<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">

<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">

<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">

<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">

</body>

</html>

 

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title></title>

<style>

img 

{

    float:right;

}

</style>

</head>

​

<body>

<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>

<p>

<img src="logocss.gif" width="95" height="84" />

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

</p>

</body>

</html>

 

CSS 中所有的浮动属性

"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。

属性	描述	值	CSS
clear	指定不允许元素周围有浮动元素。	left right both none inherit	1
float	指定一个盒子（元素）是否可以浮动。	left right none inher

CSS 网页布局

网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

 

头部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：

CSS3 实例

.header { background-color: #F1F1F1; text-align: center; padding: 20px; }

菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面：

CSS3 实例

/* 导航条 */ .topnav { overflow: hidden; background-color: #333; } /* 导航链接 */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* 链接 - 修改颜色 */ .topnav a:hover { background-color: #ddd; color: black;

内容区域

内容区域一般有三种形式:

• 1 列：一般用于移动端
• 2 列：一般用于平板设备
• 3 列：一般用于 PC 桌面设备

 

我们将创建一个 3 列布局，在小的屏幕上将会变成 1 列布局（响应式）：

CSS3 实例

/* 创建三个相等的列 */ .column { float: left; width: 33.33%; } /* 列后清除浮动 */ .row:after { content: ""; display: table; clear: both; } /* 响应式布局 - 小于 600 px 时改为上下布局 */ @media screen and (max-width: 600px) { .column { width: 100%; } }

提示:要设置两列可以设置 width 为 50%。创建 4 列可以设置为 25%。

提示:如果你想了解更多 @media 的规则可以查看 CSS3 多媒体查询。

提示: 现在更高级的方式是使用 CSS Flexbox 来创建列的布局，但 Internet Explorer 10 及更早的版本不支持该方式， IE6-10 可以使用浮动方式。

CSS Flexbox 的更多内容可以查看 CSS3 弹性盒子(Flex Box)。

不相等的列

不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。

CSS3 实例

.column { float: left; } /* 左右侧栏的宽度 */ 
.column.side { width: 25%; } /* 中间列宽度 */
 .column.middle { width: 50%; } /* 响应式布局 - 宽度小于600px时设置上下布局 */ @media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; } 

底部区域

底部区域在网页的最下方，一般包含版权信息和联系方式等。

CSS3 实例

.footer { background-color: #F1F1F1; text-align: center; padding: 10px; }