首页 > Web开发 > 详细

12.CSS盒子模型

时间:2020-03-11 21:53:57      阅读:78      评论:0      收藏:0      [点我收藏+]

1.什么是盒子模型

网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物盒子作一个比喻来理解,所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

技术分享图片

 

技术分享图片

2.盒子边框(border)

语法:

1 border : border-width border-style border-color
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             border: 5px solid red;
 9             width: 80px;
10         }
11     </style>
12 </head>
13 <body>
14     <div>码海无际</div>
15 </body>
16 </html>

技术分享图片

边框属性—设置边框样式(border-style),边框样式用于定义页面中边框的风格,常用属性值如下:

  1. none:没有边框即忽略所有边框的宽度(默认值)

  2. solid:边框为单实线(最为常用的)

  3. dashed:边框为虚线

  4. dotted:边框为点线

  5. double:边框为双实线

CSS 边框属性:

属性描述
border 简写属性,用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div {
 8             border-width: 5px;
 9             border-style: solid;
10             border-color: red;
11             width: 80px;
12         }
13         .d2 {
14             border-bottom: 5px solid blue;
15             width: 80px;
16         }
17     </style>
18 </head>
19 <body>
20     <div>码海无际</div>
21     <br>
22     <div class="d2">码海无际</div>
23 </body>
24 </html>

技术分享图片

3.内边距(padding)

padding属性用于设置内边距。 是指 边框与内容之间的距离。

  1. padding-top:上内边距

  2. padding-right:右内边距

  3. padding-bottom:下内边距

  4. padding-left:左内边距

  5. padding:上内边距 右内边距 下内边距 左内边距

注意: 后面跟几个数值表示的意思是不一样的:

值的个数表达意思
1个值 padding:上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值 padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值 padding:上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值 padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .dv1 {
 8             border: 1px solid red;
 9             width: 80px;
10             padding: 15px 30px;
11         }
12 
13         .dv2 {
14             border: 1px solid red;
15             width: 80px;
16             padding-top: 15px;
17             padding-bottom: 15px;
18             padding-left: 30px;
19             padding-right: 30px;
20         }
21     </style>
22 </head>
23 <body>
24     <div class="dv1">码海无际</div>
25     <br>
26     <div class="dv2">码海无际</div>
27 </body>
28 </html>

技术分享图片

4.外边距(margin)

1)外边距的使用

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

  1. margin-top:上外边距

  2. margin-right:右外边距

  3. margin-bottom:下外边距

  4. margin-left:上外边距

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

取值顺序跟内边距相同。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .dv1{
 8             width: 80px;
 9             border: 1px solid red;
10             margin: 15px;
11         }
12         .dv2{
13             width: 80px;
14             border: 1px solid red;
15         }
16     </style>
17 </head>
18 <body>
19     <div class="dv1">码海无际</div>
20     <div class="dv2">码海无际</div>
21 </body>
22 </html>

技术分享图片

2)外边距实现盒子居中

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

  1. 必须是块级元素。

  2. 盒子必须指定了宽度(width)

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .dv1 {
 8             width: 120px;
 9             border: 1px solid red;
10             margin: 50px auto; /*只是让盒子居中,盒子里面的内容不会居中*/
11             text-align: center;
12         }
13     </style>
14 </head>
15 <body>
16     <div class="dv1">码海无际</div>
17 </body>
18 </html>

技术分享图片

3)清除元素的默认内外边距

为了更方便地控制网页中的元素,制作网页时,可使用如下代码清除元素的默认内外边距:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             padding: 0; /* 清除内边距 */
 9             margin: 0; /* 清除外边距 */
10         }
11         .dv1 {
12             width: 120px;
13             border: 1px solid red;
14         }
15     </style>
16 </head>
17 <body>
18     <div class="dv1">码海无际</div>
19 </body>
20 </html>

技术分享图片

5.外边距合并

1)相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .dv1 {
 8             width: 80px;
 9             height: 50px;
10             background-color: red;
11             margin-bottom: 20px;
12         }
13         .dv2 {
14             margin-top: 30px;
15             width: 80px;
16             height: 50px;
17             background-color: blue;
18         }
19     </style>
20 </head>
21 <body>
22     <div class="dv1">码海无际</div>
23     <div class="dv2">码海无际</div>
24 </body>
25 </html>

技术分享图片

2)嵌套块元素垂直外边距的合并

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

解决方案:

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

  2. 可以为父元素添加overflow:hidden。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .dv1 {
 8             width: 100px;
 9             height: 100px;
10             background-color: red;
11             /*border-top: 1px solid darkmagenta;*/
12             /*padding-top: 1px;*/
13             overflow: hidden;
14         }
15         .dv2 {
16             width: 80px;
17             height: 50px;
18             background-color: blue;
19             margin-top: 20px;
20         }
21     </style>
22 </head>
23 <body>
24     <div class="dv1">
25         <div class="dv2"></div>
26     </div>
27 </body>
28 </html>

技术分享图片

12.CSS盒子模型

原文:https://www.cnblogs.com/mahaiwuji/p/12465455.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!