017 盒子

時間 2019-12-06

標籤盒子欄目 CSS 简体版

原文原文鏈接

一：盒子居中html

1.盒子居中佈局

　　能夠使用auto進行控制盒子居中。優化

　　讓一個盒子居中的條件：網站

　　　　必須是塊級元素spa

　　　　盒子須要指定寬度3d

2.案例code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             text-align: center;/*讓盒子中的內容（文字，行內元素，行內塊元素）居中對齊*/
 9             width: 500px;
10             height: 400px;
11             background-color: pink;
12             margin: 0 auto; /*auto能夠讓盒子水平居中*/
13             /*margin-left: auto; */ /*auto能夠讓盒子靠右邊*/
14         }
15     </style>
16 </head>
17 <body>
18     <div>
19         認識好久了
20     </div>
21 </body>
22 </html>

3.效果htm

二：外邊距合併問題blog

1.存在的問題three

　　在上下相鄰的兩個塊元素相遇時，若是上面的元素有上線外邊距margin-bottom，下面的元素有margin-top，則他們之間的間距不是兩個數值之和。

　　而是選擇其中較大的那個。

　　這種現象較相鄰元素垂直外邊距的合併。

2.解決方式

　　避免這種狀況。

3.存在的問題

　　效果圖：

　　案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .c1 {
 8             width: 500px;
 9             height: 200px;
10             background-color: pink;
11             padding-top: 20px;
12         }
13         .c2 {
14             width: 200px;
15             height: 100px;
16             background-color: purple;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="c1">
22         <div class="c2"></div>
23     c1</div>
24 </body>
25 </html>

　　上面的程序是能夠實現的。

　　可是下面的程序卻不能實現，案例以下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .c1 {
 8             width: 500px;
 9             height: 200px;
10             background-color: pink;
11             /*padding-top: 20px;*/
12         }
13         .c2 {
14             width: 200px;
15             height: 100px;
16             background-color: purple;
17             margin-top: 50px; 
18         }
19     </style>
20 </head>
21 <body>
22     <div class="c1">
23         <div class="c2"></div>
24     c1</div>
25 </body>
26 </html>

　　其效果：

4.解決方式

　　問題：嵌套塊元素垂直外邊距的合併。

　　能夠爲父元素定義1像素的上邊框或者上內邊距

　　能夠爲父元素添加overflow：hidden

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .c1 {
 8             width: 500px;
 9             height: 200px;
10             background-color: pink;
11             overflow: hidden; /**/
12         }
13         .c2 {
14             width: 200px;
15             height: 100px;
16             background-color: purple;
17             margin-top: 50px; 
18         }
19     </style>
20 </head>
21 <body>
22     <div class="c1">
23         <div class="c2"></div>
24     c1</div>
25 </body>
26 </html>

　　效果：

三：padding的特殊

1.說明

　　有的時候，在寫pading的時候，盒子沒有變大。

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .c1 {
 8             width: 500px;
 9             height: 200px;
10             background-color: pink;
11         }
12         .c2 {
13             padding-left: 30px;
14             background-color: purple;
15         }
16     </style>
17 </head>
18 <body>
19     <div class="c1">
20         <div class="c2">123</div>
21     </div>
22 </body>
23 </html>

3.效果

4.緣由

　　子盒子沒有給定寬度，用的是默認的，因此不會撐開。

　　若是這個時候，子盒子給了寬度，則會撐開盒子。

四：圓角邊框

1.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 100px;
10             border: 1px solid red;
11             border-radius: 20px;
12         }
13     </style>
14 </head>
15 <body>
16     <div></div>
17 </body>
18 </html>

2.效果

3.使用百分比

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 100px;
10             border: 1px solid red;
11             border-radius: 100%;
12         }
13     </style>
14 </head>
15 <body>
16     <div></div>
17 </body>
18 </html>

　　效果：

4.分別設置四個角

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 100px;
10             border: 1px solid red;
11             border-radius: 100px 0;
12         }
13     </style>
14 </head>
15 <body>
16     <div></div>
17 </body>
18 </html>

　　效果：

五：盒子陰影

1.語法

　　box-shadow:水平陰影，垂直陰影，模糊距離，陰影尺寸，陰影顏色，內外陰影

　　屬性：

　　h-shadow：水平陰影

　　v-shadow：垂直陰影

　　blur：模糊距離

　　spread：陰影尺寸

　　color：陰影的顏色

　　inset：內部陰影

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 300px;
 9             height: 200px;
10             box-shadow: 2px 4px 40px 6px rgba(0,0,0,0.4);
11         }
12     </style>
13 </head>
14 <body>
15     <div></div>
16 </body>
17 </html>

3.效果

4.優化

　　兼容性問題，可是如今能夠使用了。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 300px;
 9             height: 200px;    
10         }
11         div:hover {
12             box-shadow: 2px 4px 40px 6px rgba(0,0,0,0.4);
13         }
14 
15     </style>
16 </head>
17 <body>
18     <div></div>
19 </body>
20 </html>

六：體會浮動float

1.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .up {
 8             width: 300px;
 9             height: 200px;
10             background-color: pink;
11             float: left;
12         }
13         .down {
14             width: 330px;
15             height: 230px;
16             background-color: purple;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="up"></div>
22     <div class="down"></div>
23 </body>
24 </html>

2.效果

　　就像是up浮在down上

3.浮動

　　能夠多個div在一行展現

　　使用inline-block中間有縫隙

　　脫離了標準流的控制。

4.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .up {
 8             width: 300px;
 9             height: 200px;
10             background-color: red;
11             float: left;
12         }
13         .middle {
14             width: 300px;
15             height: 200px;
16             background-color: blue;
17             float: left;
18         }
19         .down {
20             width: 300px;
21             height: 200px;
22             background-color: green;
23             float: left;
24         }
25     </style>
26 </head>
27 <body>
28     <div class="up"></div>
29     <div class="middle"></div>
30     <div class="down"></div>
31 </body>
32 </html>

5.效果

6.特性

　　只有左右浮動

　　脫離標準流，不佔用位置

7.使用父盒子，以及padding

　　由於float會影響不少，這個時候，須要對有float的進行一個父盒子的包裝，則能夠不影響其餘的盒子。

　　float不會跨過padding。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .fir {
 8             width: 500px;
 9             height: 400px;
10             background-color: blue;
11             padding: 20px; 
12         }
13         .sec {
14             width: 200px;
15             height: 100px;
16             background-color: red;
17             float: right;
18         }
19     </style>
20 </head>
21 <body>
22     <div class="fir">
23         <div class="sec"></div>
24     </div>
25 </body>
26 </html>

8.效果

9.能夠讓元素默認轉換爲行內塊元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             height: 50px;
 9             background-color: pink;
10             float: left;
11         }
12     </style>
13 </head>
14 <body>
15     <div>人生路漫漫其修遠</div>
16 </body>
17 </html>

10.效果

七：版心與佈局流程

1.版心

　　網站的可視區

　　常見的寬度960,980,100，1200

2.一列固定寬度且居中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .top {
 8             width: 900px;
 9             height: 80px;
10             background-color: #eee;
11             border:1px dashed #ccc;
12             margin: 0 auto;
13         }
14         .banner {
15             width: 900px;
16             height: 220px;
17             background-color: #eee;
18             border:1px dashed #ccc;
19             margin: 5px auto;
20         }
21         .main {
22             width: 900px;
23             height: 220px;
24             background-color: #eee;
25             border:1px dashed #ccc;
26             margin: 5px auto;
27         }
28     </style>
29 </head>
30 <body>
31     <div class="top">top</div>
32     <div class="banner">banner</div>
33     <div class="main"></div>
34     <div class="footer"></div>
35 </body>
36 </html>

　　效果：

3.左右型結構

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .top {
 8             width: 900px;
 9             height: 80px;
10             background-color: #eee;
11             border:1px dashed #ccc;
12             margin: 0 auto;
13         }
14         .banner {
15             width: 900px;
16             height: 60px;
17             background-color: #eee;
18             border:1px dashed #ccc;
19             margin: 5px auto;
20         }
21         .main {
22             width: 900px;
23             height: 220px;
24             background-color: #eee;
25             border:1px dashed #ccc;
26             margin: 5px auto;
27         }
28         .left {
29             width: 293px;
30             height: 220px;
31             background-color: black;
32             float: left;
33             margin-right: 5px; 
34             border: 1px dashed red;
35         }
36         .right {
37             width: 600px;
38             height: 220px;
39             background-color: yellow;
40             float: left;
41         }
42         .footer {
43             width: 900px;
44             height: 120px;
45             background-color: #eee;
46             border:1px dashed #ccc;
47             margin: 5px auto;
48         }
49     </style>
50 </head>
51 <body>
52     <div class="top"></div>
53     <div class="banner"></div>
54     <div class="main">
55         <div class="left"></div>
56         <div class="right"></div>
57     </div>
58     <div class="footer"></div>
59 </body>
60 </html>

　　效果：

4.通欄平均分佈寫法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         * {
 8             padding: 0;
 9             margin: 0;
10         }
11         .top {
12             height: 80px;
13             background-color: #eee;
14             border:1px dashed #ccc;
15             margin: 0 auto;
16         }
17         .inner {
18             width: 900px;
19             height: 80px;
20             background-color: #eee;
21             border:1px dashed #000;
22             margin: 0 auto;
23         }
24         .banner {
25             width: 900px;
26             height: 60px;
27             background-color: #eee;
28             border:1px dashed #ccc;
29             margin: 5px auto;
30         }
31         .banner li {
32             float: left;
33             width: 222px; 
34             height: 60px;
35             margin-right: 4px;
36         }
37         .first {
38             background-color: pink;
39         }
40         .second {
41             background-color: purple;
42         }
43         .three {
44             background-color: blue;
45         }
46         li.four {
47             background-color: green;
48             margin-right: 0px; 
49         }
50         .main {
51             width: 900px;
52             height: 220px;
53             border:1px dashed #ccc;
54             margin: 5px auto;
55         }
56         .left {
57             width: 295px;
58             height: 220px;
59             background-color: #eee;
60             float: left;
61             margin-right: 5px; 
62         }
63         .right {
64             width: 600px;
65             height: 220px;
66             background-color: yellow;
67             float: left;
68         }
69         .footer {
70             width: 900px;
71             height: 120px;
72             background-color: #eee;
73             border:1px dashed #ccc;
74             margin: 5px auto;
75         }
76     </style>
77 </head>
78 <body>
79     <div class="top">
80         <div class="inner">123</div>
81     </div>
82     <div class="banner">
83         <ul>
84             <li class="first">1</li>
85             <li class="second">2</li>
86             <li class="three">3</li>
87             <li class="four">4</li>
88         </ul>
89     </div>
90     <div class="main">
91         <div class="left"></div>
92         <div class="right"></div>
93     </div>
94     <div class="footer"></div>
95 </body>
96 </html>

　　效果：

八：實戰

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。