css 盒子下

1.padding 

有小属性

1 padding-top: 30px;
2 padding-right: 30px;
3 padding-bottom: 30px;
4 padding-left: 30px;
小属性

综合属性

 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         .box{
12             width: 200px;
13             height: 200px;
14             background-color: red;
15             /*单独一个上下左右*/
16             /*padding: 10px;*/
17             /*单独两个 上下 左右*/
18             /*padding: 10px 20px;*/
19             /*单独三个上 左右 下*/
20             /*padding: 10px 20px 30px;*/
21             /*单独四个 顺时针上右下左*/
22             padding: 10px 20px 30px 40px;
23         }
24         
25     </style>
26 </head>
27 <body>
28 <div class="box">alex </div>
29 </body>
30 </html>
综合

2.border

线框与三个属性 颜色 大小 样式  

border-left-color:red

border-left-style :solid

border-left-width:10px

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin: 0;
10 
11         }
12         .box{
13             width: 200px;
14             height: 200px;
15             background-color: red;
16             
17             /*width  style color*/
18             /*根据方向来设置*/
19             /*border-left: 5px solid green;
20             border-right: 1px dotted yellow;
21             border-top: 5px double purple;
22             border-bottom: 1px dashed purple;*/
23 
24             /*border-left-style: solid;
25             border-left-width: 1px;
26             border-left-color: green;*/
27 
28             border-width: 5px 10px;
29             border-color: green yellow;
30             border-style: solid double;
31 
32             /*border: 5px solid green*/
33             
34 
35         }
36     </style>
37 </head>
38 <body>
39     <!-- padding是标准文档流，父子之间调整位置 -->
40     <div class="box">alex</div>
41     
42 </body>
43 </html>
border 三元素

3.margin

进行兄弟之间的分块

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .s1{
 8             background-color: red;
 9             margin-right: 30px;
10         }
11         .s2{
12             background-color:rgb(0,128,0);
13             margin-left: 30px;
14         }
15     </style>
16 </head>
17 <body>
18 <!--span 永远是1行-->
19     <span class="s1">alex</span>
20     <span class="s2">wusir</span>
21     
22 </body>
23 </html>
兄弟距离

 

4.margin 的坑 

在两个方块进行移动的时候 在上下模块下 一个上 一个下 两个快之间的间距不是位移相加 而是最大的那段位移

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .s1{
 8             width: 200px;
 9             height: 200px;
10             background-color: red;
11             margin-bottom: 40px;
12         }
13         .s2{
14             width: 200px;
15             height: 200px;
16             background-color:rgb(0,128,0);
17             margin-top: 100px;
18             
19         }
20     </style>
21 </head>
22 <body>
23     <!--  -->
24     <div class="s1"></div>
25     <div class="s2"></div>
26     
27 </body>
28 </html>
margin 的坑

4.1 在父子模型下 移动子盒子模型父模型也会改变

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .s1{
 8             width: 200px;
 9             height: 200px;
10             background-color: red;
11             margin-bottom: 40px;
12         }
13         .s2{
14             width: 200px;
15             height: 200px;
16             background-color:rgb(0,128,0);
17             margin-top: 100px;
18             
19         }
20     </style>
21 </head>
22 <body>
23     <!--  -->
24     <div class="s1"></div>
25     <div class="s2"></div>
26     
27 </body>
28 </html>
margin 父子模型的 坑

5.display

display 显示  必须是在标准文档下 (没有 float)

属性:

display:block  块级标签 -独占一行 -可以设置宽高 不设置默认100%宽

inline 行内标签
      - 在一行内显示
      - 不可以设置宽高，根据内容来显示宽高
inline-block 行内块
      - 在一行内显示
      - 可以设置宽高
      
none  不显示 隐藏 不在文档上占位置

  visibility：hidden;隐藏 在文档上占位置
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .box{
 8             width: 100px;
 9             height: 100px;
10             background-color: red;
11             /*display: inline;*/
12             display: inline;
13             border: 1px solid yellow;
14         }
15         div a {
16             display: block;
17             width: 300px;
18             height: 300px;
19         }
20         span{
21             display:inline-block;
22             width: 300px;
23             height: 200px;
24             background-color: yellow;
25             
26         }
27     </style>
28 </head>
29 <body>
30 
31     
32     <div class="box">alexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalex</div>
33     <div class="box">wusir</div>
34 
35 
36     <div>
37         <a href="#">
38             <img src="https://i1.mifile.cn/a4/xmad_15350224111785_ASnBL.jpg" alt="" width="300" height="300">
39         </a>
40     </div>
41 
42     <input type="text">
43     <span>aaaaa</span>
44     <span>aaaaa</span>
45 
46 </body>
47 </html>
display 详细代码

 

6.浮动

关于浮动  优点是可以使块级标签在一行内显示 

缺点是:没有高度的限制下 会重叠在一起 需要控制

盒子浮动:不在页面占位置,如果父盒子不设置高度,那么撑不起父盒子的高度,页面会出现混乱

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7     *{
 8         padding: 0;
 9         margin: 0;
10     }
11     .father{
12         width: 500px;
13         /*height: 400px;*/
14         
15         height: 300px;
16     }
17     .box1{
18         width: 100px;
19         height: 100px;
20         background-color:red;
21         float: left;
22     }
23     .box2{
24         width: 100px;
25         height: 300px;
26         background-color:green;
27         float: left;
28     }
29     .box3{
30         width: 100px;
31         height: 100px;
32         background-color:blue;
33         float: left;
34     }
35     .father2{
36         width: 600px;
37         height: 200px;
38         background-color: yellow;
39     }
40     </style>
41 </head>
42 <body>
43     <div class="father">
44         <div class="box1">1</div>
45         <div class="box2">2</div>
46         <div class="box3">3</div>
47 
48     </div>
49 
50     <div class="father2"></div>
51 
52     
53 </body>
54 </html>
浮动错误示例

如果父类不设置高度,则会不断撑大,会造成页面混乱

7.解决浮动方法

清除浮动：
   1.给父盒子设置固定高度（后期不好维护）
   2.clear:both;
      给浮动元素的最后面，加一个空的块级标签(标准文档流的块级标签)
      给当前这个标签设置一个clearfix类名，设置该标签属性cleart:both
      
      问题：代码冗余
   3.   .clearfix:after {
         content: ".";
         display: block;
         height: 0;
         visibility: hidden;
         clear: both
      }
   4.overflow:hidden;

要浮动一起浮动，有浮动，清除浮动
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7     *{
 8         padding: 0;
 9         margin: 0;
10     }
11     .father{
12         width: 500px;
13         /*height: 400px;*/
14 
15     }
16     .box1{
17         width: 100px;
18         height: 100px;
19         background-color:red;
20         float: left;
21     }
22     .box2{
23         width: 100px;
24         height: 500px;
25         background-color:green;
26         float: left;
27     }
28     .box3{
29         width: 100px;
30         height: 100px;
31         background-color:blue;
32         float: left;
33     }
34     .father2{
35         width: 600px;
36         height: 200px;
37         background-color: yellow;
38     }
39     /*这里是将clear：both 重新将浮点固定*/
40     .clearfix{
41         clear:both;
42     }
43     </style>
44 </head>
45 <body>
46     
47         <div class="father">
48             <div class="box1">1</div>
49             <div class="box2">2</div>
50             <div class="box3">3</div>
51             <!-- 内墙法 -->
52             <div class="clearfix"></div>
53 
54         </div>
55 
56     <div class="father2"></div>
57 
58     
59 </body>
60 </html>
View Code

 伪元素清除法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7     *{
 8         padding: 0;
 9         margin: 0;
10     }
11     .clearfix:after{
12         content: '.';
13         clear:both;
14         display: block;
15         visibility: hidden;
16         height: 0;
17 
18     }
19     .father{
20         width: 500px;
21 
22         /*overflow: hidden;*/
23         /*height: 400px;*/
24         /*height: 300px;*/
25     }
26     /*.clearfix{*/
27         /*clear:both*/
28     /*}*/
29 
30     .box1{
31         width: 100px;
32         height: 100px;
33         background-color:red;
34         float: left;
35     }
36     .box2{
37         width: 100px;
38         height: 50px;
39         background-color:green;
40         float: left;
41     }
42     .box3{
43         width: 100px;
44         height: 100px;
45         background-color:blue;
46         float: left;
47     }
48     .father2{
49         width: 600px;
50         height: 200px;
51         background-color: yellow;
52     }
53     </style>
54 </head>
55 <body>
56     <div class="father clearfix" >
57         <div class="box1">1</div>
58         <div class="box2">2</div>
59         <div class="box3">3</div>
60 
61     </div>
62     <!--需要加入一个class类-->
63     <!--<div class="clearfix"> </div>-->
64 
65     <div class="father2"></div>
66 </body>
67 </html>
伪元素清除法

 

 



 



 






            

            
posted @ 
2018-09-19 20:27 
逆欢 
阅读(123) 
评论(0) 
编辑 
收藏 
举报