0501 div、块级元素、外边距、内边距、边框、父div塌陷、外边距重合

1 div

　　width的默认值是浏览器的宽度

　　height的默认值是0

　　1.1 作用　　

　　　　主要用来装其他元素，单独对div进行css样式或布局

　　1.2 div如果不给定宽高就没有任何显示效果

　　1.3 div的阴影设置　　　　

　　　　none：无阴影
　　　　<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
　　　　<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
　　　　<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
　　　　<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
　　　　<color>：设置对象的阴影的颜色。
　　　　inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <script type="text/javascript" src="../js/test.js"></script>
17 
18     <link rel="shortcut icon" href="../img/study04.ico">
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24         div{
25             width: 100px;
26             height: 100px;
27         }
28         #box1{
29             background-color: skyblue;
30             margin: 0 auto;
31 
32             box-shadow: 5px 5px 11px #067C95;
33         }
34         #box2{
35             background-color: skyblue;
36             margin: 0 auto;
37             box-shadow: 5px 5px 11px rgba(0,0,0,0.5);
38         }
39         #box3{
40             background-color: skyblue;
41             margin:0 auto;
42             box-shadow: 5px 5px 11px rgba(0,0,0,0.5) inset;
43         }
44 
45     </style>
46 </head>
47     
48 <body>
49     <div id="box1"></div>
50     <br /><hr size="5px" color="red" /><br />
51     <div id="box2"></div>
52     <br /><hr size="5px" color="red" /><br />
53     <div id="box3"></div>
54 </body>
55 </html>

div阴影源代码

2 块级元素

　　默认占据一行，前后元素都会被换行；所以在块级元素的右边是不能够放东西的

　　hr　　br　　p　　ul　　ol　　dl　　form　　li　　div　　table　　body　　html

　　注意：内联元素是没有宽度和高度的，也没有上外边距和下外边距；想要拥有这些都必须将内联元素变成块级元素，利用 display实现

3 外边距

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <meta name="description" content="" />
 6         <meta name="Keywords" content="" />
 7         <title></title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         #box1{
14             height: 200px;
15             width: 200px;
16             background-color: skyblue;
17             margin-left: 50px;
18         }
19         #box2{
20             height: 100px;
21             width: 100px;
22             background-color: blue;
23             margin: 10px 30px 50px 70px;
24         }
25         #box3{
26             height: 100px;
27             width: 100px;
28             background-color: red;
29         }
30     </style>
31 </head>
32 
33 <body>
34     <div id="box1"></div>
35     <div id="box2"></div>
36     <div id="box3"></div>
37 </body>
38 </html>

外边距源代码

4 内边距

　　左右内边距 + 宽 + 左右border大小 = 总宽度

　　上下内边距 + 高 +上下border大小 = 总高度

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <meta name="description" content="" />
 6         <meta name="Keywords" content="" />
 7         <title></title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         #box1{
14             height: 300px;
15             width: 500px;
16             background-color: skyblue;
17             margin-left: 50px;
18             padding: 10px;
19         }
20         #p1{
21             text-indent: 2em;
22         }
23     </style>
24 </head>
25 
26 <body>
27     <div id="box1">
28         <p id="p1">
29             重庆，简称巴或渝，位于中国西南部，是中华人民共和国直辖市、国家中心城市[1]  、超大城市、国际大都市，长江上游地区经济、金融、商贸物流、科技创新和航运中心，[2]  西南地区综合交通枢纽和最大的工商业城市[3]  ，国家重要的现代制造业基地，全国统筹城乡综合配套改革试验区；[1]  西部开放开发战略支撑和长江经济带西部中心枢纽；东邻湖北、湖南，南靠贵州，西接四川，北连陕西。
30         </p>
31     </div>
32 </body>
33 </html>

内边距源代码

　　注意：因各浏览器初始边距不一而出现的兼容问题，所以需要通过样式设定外边距和内柑橘的初始值为0

5 边框

　　注意：最好都加上边框，将颜色设置为白色（如：鼠标滑上去时需要添加边框时，如果之前没有添加边框，就会改变元素的大小，从而影响到其他的元素）

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <meta name="description" content="" />
 6         <meta name="Keywords" content="" />
 7         <title></title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         #box1{
14             height: 300px;
15             width: 500px;
16             background-color: skyblue;
17             margin-left: 50px;
18             /*border: 1px solid red;*/
19             border-top-width: 1px;
20             border-top-style: solid;
21             border-top-color: red;
22         }
23         #p1{
24             text-indent: 2em;
25         }
26     </style>
27 </head>
28 
29 <body>
30     <div id="box1">
31         <p id="p1">
32             重庆，简称巴或渝，位于中国西南部，是中华人民共和国直辖市、国家中心城市[1]  、超大城市、国际大都市，长江上游地区经济、金融、商贸物流、科技创新和航运中心，[2]  西南地区综合交通枢纽和最大的工商业城市[3]  ，国家重要的现代制造业基地，全国统筹城乡综合配套改革试验区；[1]  西部开放开发战略支撑和长江经济带西部中心枢纽；东邻湖北、湖南，南靠贵州，西接四川，北连陕西。
33         </p>
34     </div>
35 </body>
36 </html>

边框源代码

　　5.1 边框圆角半径设置

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <script type="text/javascript" src="../js/test.js"></script>
17 
18     <link rel="shortcut icon" href="../img/study04.ico">
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24         div{
25             width: 100px;
26             height: 100px;
27         }
28         #box1{
29             background-color: skyblue;
30             margin: 0 auto;
31 
32             box-shadow: 5px 5px 11px #067C95;
33 
34             border: 1px solid blue;
35             border-radius: 10%;
36         }
37         #box2{
38             background-color: skyblue;
39             margin: 0 auto;
40             box-shadow: 5px 5px 11px rgba(0,0,0,0.5);
41 
42             border: 1px solid blue;
43             border-radius: 20%;
44         }
45         #box3{
46             background-color: skyblue;
47             margin:0 auto;
48             box-shadow: 5px 5px 11px rgba(0,0,0,0.5) inset;
49 
50             border: 1px solid blue;
51             border-radius: 30%;
52         }
53 
54     </style>
55 </head>
56     
57 <body>
58     <div id="box1"></div>
59     <br /><hr size="5px" color="red" /><br />
60     <div id="box2"></div>
61     <br /><hr size="5px" color="red" /><br />
62     <div id="box3"></div>
63 </body>
64 </html>

边框圆角半径设置源代码

6 父div塌陷

　　6.1 问题

　　　　如果一个父div不指定宽度和高度，那么他会被子div撑大，也就是说父div的宽度和高度和子div的宽度和高度相同

　　　　但是，如果子div添加了外边距，父div不会将子div的外边距包括在内

　　6.2 解决办法

　　　　6.2.1 在父div添加一个边框

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <meta name="description" content="" />
 6         <meta name="Keywords" content="" />
 7         <title>测试页面</title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         #father{
14             /*height: 400px;
15             width: 400px;*/
16             background-color: skyblue;
17             border: 1px solid red;
18             /*overflow: hidden;*/
19         }
20         #son{
21             height: 200px;
22             width: 200px;
23             background-color: blue;
24             margin: 20px;
25         }
26         /*#box2{
27             height: 200px;
28             width: 200px;
29             background-color: green;
30             margin-top: 20px;
31         }*/
32     </style>
33 </head>
34 
35 <body>
36     <div id="father">
37         <div id="son"></div>
38     </div>
39     <!-- <div id="box2"></div> -->
40 </body>
41 </html>

利用给父div加边框防止父div塌陷

　　　　6.2.2 在父div实现 overflow：hidden;

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <meta name="description" content="" />
 6         <meta name="Keywords" content="" />
 7         <title>测试页面</title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         #father{
14             /*height: 400px;
15             width: 400px;*/
16             background-color: skyblue;
17             /*border: 1px solid red;*/
18             overflow: hidden;
19         }
20         #son{
21             height: 200px;
22             width: 200px;
23             background-color: blue;
24             margin: 20px;
25         }
26         /*#box2{
27             height: 200px;
28             width: 200px;
29             background-color: green;
30             margin-top: 20px;
31         }*/
32     </style>
33 </head>
34 
35 <body>
36     <div id="father">
37         <div id="son"></div>
38     </div>
39     <!-- <div id="box2"></div> -->
40 </body>
41 </html>

利用overflow防止父div塌陷

7 外边距重合

　　7.1 问题

　　　　相邻的两个div的外边距会重合（只用上下的div会重合，如果将连个div变成行内元素，那么他们相邻时不会出现外边距重合现象）

　　　　两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。

　　7.2 解决办法

　　　　7.2.1 在相邻的两个垂直的div中，选择一个进行行内元素处理（即：将块级div变成行内div）

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <meta name="description" content="" />
 6         <meta name="Keywords" content="" />
 7         <title></title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         div{
14             height: 200px;
15             width: 200px;
16             background-color: skyblue;
17         }
18 
19         #box1{
20            background-color: blue;
21            margin-bottom: 20px;
22            /*display: inline-block;*/
23         }
24         #box2{
25             margin-top: 40px;
26             display: inline-block;
27         }
28 
29 
30 
31         #box3{
32             background-color: red;
33             display: inline-block;
34             margin-right: 20px;
35         }
36 
37         #box4{
38             display: inline-block;
39             margin-left: 20px;
40         }
41     </style>
42 </head>
43 
44 <body>
45     <!-- 垂直相邻的连个div会重合 -->
46     <div id="box1"></div>
47     <div id="box2"></div>
48     
49     <!-- 验证水平相邻的div的外边距不会重合 -->
50     <hr size="10" color="green" />
51     <div id="box3"></div>
52     <div id="box4"></div>
53 </body>
54 </html>

利用改变成行div解决外边距重合

　　　　7.2.2 给其中一个div添加一个父div，并且为这个父div设定边框或者实现overflow：hidden;

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <meta name="description" content="" />
 6         <meta name="Keywords" content="" />
 7         <title>测试页面</title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         #father{
14             /*height: 400px;
15             width: 400px;*/
16             background-color: skyblue;
17             border: 1px solid red;
18             overflow: hidden;
19         }
20         #son{
21             height: 200px;
22             width: 200px;
23             background-color: blue;
24             margin: 20px;
25         }
26         #box2{
27             height: 200px;
28             width: 200px;
29             background-color: green;
30             margin-top: 20px;
31         }
32     </style>
33 </head>
34 
35 <body>
36     <div id="father">
37         <div id="son"></div>
38     </div>
39     <div id="box2"></div>
40 </body>
41 </html>

利用添加父div解决外边距重合

posted @ 2017-05-10 22:18 寻渝记阅读(683) 评论(0) 收藏举报

刷新页面返回顶部

0501 div、块级元素、外边距、内边距、边框、父div塌陷、外边距重合

1 div

1.1 作用

1.2 div如果不给定宽高就没有任何显示效果

1.3 div的阴影设置

2 块级元素

3 外边距

4 内边距

5 边框

5.1 边框圆角半径设置

6 父div塌陷

6.1 问题

6.2 解决办法

6.2.1 在父div添加一个边框

6.2.2 在父div实现 overflow：hidden;

7 外边距重合

公告

　　1.1 作用　　

　　1.2 div如果不给定宽高就没有任何显示效果

　　1.3 div的阴影设置　　　　

　　5.1 边框圆角半径设置

　　6.1 问题

　　6.2 解决办法

　　　　6.2.1 在父div添加一个边框

　　　　6.2.2 在父div实现 overflow：hidden;