11-2 css盒模型和浮動以及矢量圖用法

時間 2019-11-29

標籤 css 模型浮動以及矢量用法欄目 CSS 简体版

原文原文鏈接

一盒模型html

1屬性web

width：內容的寬度瀏覽器

height: 內容的高度ide

padding：內邊距，邊框到內容的距離svg

border: 邊框，就是指的盒子的寬度字體

margin：外邊距，盒子邊框到附近最近盒子的距離url

2例子spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!DOCTYPE html>
 9 <html lang="en">
10 <head>
11     <meta charset="UTF-8">
12     <title>盒模型</title>
13     <style>
14         div{
15             width:200px;
16             height:200px;
17             background-color: red;
18             padding: 50px; #若是寫四個數字順序是上右下左
19             border: 1px solid green;
20         }
21     </style>
22 </head>
23 <body>
24 <div>
25 
26 </div>
27 
28 </body>
29 </html>
30 
31 </body>
32 </html>

3 圖解3d

二 margin用法code

標準文檔流：
margin:調整兄弟之間的距離
padding:調整父子標籤之間的位置，注意盒模型的計算

坑1：
margin垂直方向塌陷問題：
當設置第一個盒子爲margin-bottom:50px;
第二個盒子爲margin-top:100px;那麼小的margin會掉到大的magin中，這就是margin塌陷
水平方向上不會出現塌陷問題。

非標準文檔流（脫標）：

標準流下的標籤,兄弟之間使用margin調整位置，父子之間使用padding調整子標籤的位置（當心盒模型的計算）
脫標的元素，margin和padding能夠任意使用
浮動的盒子： margin: 0 auto;不起任何做用
使用margin：0 auto;注意點：

1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width，文字水平居中使用text-align: center;

2.只有標準流下的盒子才能使用margin:0 auto;

當一個盒子浮動了，固定定位，絕對定位(後面會講)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

例子一：標準文檔流：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>margin用法</title>
 6     <style>
 7         .box{
 8             width:200px;
 9             height:200px;
10             background-color: red;
11             margin-bottom: 50px;
12             /*margin-left: -20px;*/
13         }
14         .box2{
15             width: 200px;
16             height: 200px;
17             background-color: yellow;
18             margin-top: 50px;
19         }
20         span{
21             background-color: red;
22         }
23         .t{
24             margin-right: 20px;
25             /*右邊出現20px的距離，並非他本身向右移動20px*/
26         }
27         .f{
28             margin-left: 10px;
29         }
30 
31     </style>
32 </head>
33 <body>
34 <div class="box">
35     漂洋過海來看你
36 
37 </div>
38 <div class="box2">
39 
40 </div>
41 <span class="t">看就看就看</span>
42 <spanc class="f">大幅度發</spanc>
43 
44 </body>
45 </html>

View Code

例子二：脫標狀況下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>浮動元素margin塌陷不會出現問題</title>
 6     <style>
 7         .father{
 8             width: 300px;
 9             height: 500px;
10             border: 1px solid red;
11         }
12         .box1{
13             width: 200px;
14             height: 30px;
15             background-color: yellow;
16             margin-bottom: 50px;
17             float: left;
18         }
19         .box2{
20             width: 200px;
21             height: 50px;
22             background-color: green;
23             margin-top: 50px;
24             float: left;
25         }
26     </style>
27 </head>
28 <body>
29 <div class="father">
30     <div class="box1">
31         1
32     </div>
33     <div class="box2">
34         2
35     </div>
36 </div>
37 
38 </body>
39 </html>

View Code

三浮動float

1 浮動

（1）脫標：脫標的元素不在標準文檔流下佔位置
瀏覽器認爲第一個盒子不是標準文檔流的盒子，認爲第二個盒子爲標準文檔流下的盒子
（2）浮動的元素互相貼靠
（3）浮動元素有字圍效果
第一個元素浮動，第二個元素不浮動，那麼第二個元素的文字會圍繞着第一個浮動元素顯示
（4）凡是脫標（浮動、絕對定位、固定定位）的元素，不區分行內標籤仍是塊標籤，寬高能夠任意設置
浮動永遠不是一個盒子在浮動，要浮動一塊兒浮動

例子：

 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         div{
12             width: 200px;
13             height: 200px;
14         }
15         .box1{
16             background-color: red;
17             float: left;
18             height: 300px;
19         }
20         .box2{
21             background-color: yellow;
22             float:left;
23             width: 230px;
24         }
25         .box3{
26             background-color: blue;
27             float: left;
28             height: 100px;
29         }
30     </style>
31 </head>
32 <body>
33 <div class="box1">
34     1
35 </div>
36 <div class="box2">
37     2
38 </div>
39 <div class="box3">
40     3
41 </div>
42 
43 </body>
44 </html>

View Code

2 浮動的字圍效果（文字圍繞圖片）

<!--第一個元素浮動，第二個元素不浮動，那麼第二個元素的文字會圍繞着第一個浮動元素顯示-->
例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>字圍效果</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .box{
12             width: 200px;
13             height: 200px;
14             background-color: red;
15             float: left;
16         }
17         p{
18             margin-left: 150px;
19             padding-left: 168px;
20         }
21         img{
22 
23             height: 200px;
24         }
25     </style>
26 </head>
27 <body>
28 <div class="box">
29     <img src="../day10/test.jpg" alt="紫霞仙子">
30 
31 </div>
32 <p>紫霞和青霞原是佛祖纏在一塊兒的燈芯，兩人前世鬥爭激烈。因此佛祖就把她們兩個卷在一塊兒變成一根燈芯，
33     要她們苦練修行化解這段恩怨，惋惜事與願違，致使比之前鬥得更厲害了。在電影裏，他們兩個用一個軀體，
34     白天是紫霞，晚上是青霞。因爲紫霞單純執着，爲愛癡狂，只羨鴛鴦不羨仙，爲了尋找本身的愛情不顧一切私下凡間，
35     發現至尊寶是本身的如意郎君後追求至尊寶，未遂，後迷失在大沙漠，被牛魔王救出並遭其逼婚。在影片最後，
36     紫霞和青霞和好了。後來紫霞爲保護變成孫悟空的至尊寶被牛魔王一叉刺死，青霞回到瞭如來佛祖那裏當燈芯。
37 </p>
38 
39 </body>
40 </html>

View Code

3 只要是浮動的元素均可以設置寬高

例子：

 1 <!--（4）凡是脫標（浮動、絕對定位、固定定位）的元素，不區分行內標籤仍是塊標籤，寬高能夠任意設置-->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>浮動</title>
 7     <style>
 8         span{
 9             float: left;
10             width: 100px;
11             height: 100px;
12             background-color: red;
13 
14         }
15         div{
16             float: left;
17             width: 200px;
18             height: 200px;
19             background-color: yellow;
20         }
21     </style>
22 </head>
23 <body>
24 <div>
25     哈哈
26 </div>
27 <span>你好</span>
28 <span>好啊</span>
29 
30 </body>
31 </html>

View Code

4 浮動帶來的問題

父盒子撐不起來了

解決辦法：四種方法任選其一均可以

（1）給父盒子設置固定高度百年不變導航欄
（2）內牆法：這個方法不經常使用
給最後一個浮動的元素添加一個塊級標籤，而且該標籤設置屬性 clear：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: 100%;
13             margin: 0 auto;
14             /*height: 200px;*/
15             /*第一種解決辦法給父盒子設置固定高度*/
16             background-color: black;
17             /*第四種方法：給父盒子加上overflow*/
18             /*overflow: hidden;*/
19         }
20         .box1{
21             width: 200px;
22             height: 100px;
23             background-color: red;
24             float: left;
25             margin: 0 auto;
26         }
27         .box2{
28             width: 200px;
29             height: 200px;
30             background-color: yellow;
31             float: left;
32         }
33         .box3{
34             width: 200px;
35             height: 100px;
36             background-color: blue;
37             float: left;
38         }
39         /*第二種方法內牆法*/
40         .clearfix{
41             clear: both;
42         }
43         /*第三種方法僞元素清除法*/
44         /*.clearfix:after{*/
45             /*content: '.';*/
46             /*display: block;*/
47             /*height: 0;*/
48             /*visibility: hidden;*/
49             /*clear: both;*/
50         /*}*/
51     </style>
52 </head>
53 <body>
54 <div class="father">
55     <div class="box1">
56          1
57     </div>
58     <div class="box2">
59          2
60     </div>
61     <div class="box3">
62         3
63     </div>
64     <div class="clearfix">
65 
66     </div>
67 </div>
68 <div class="active"></div>
69 
70 </body>
71 </html>

View Code

四 overflow用法

visible 默認值。內容不會被修剪，會呈如今元素框以外。
hidden 內容會被修剪，而且其他內容是不可見的。
scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>overflow用法</title>
 6     <style>
 7         body{
 8             overflow: auto;
 9         }
10         div{
11             width: 500px;
12             height: 100px;
13             border: 1px solid red;
14             overflow: inherit;
15             /*overflow: scroll;*/
16         }
17     </style>
18 </head>
19 <body>
20 <div>
21     唐朝（618年—907年），是繼隋朝以後的大一統王朝，共歷二十一帝，享國二百八十九年，因皇室姓李，故又稱爲李唐，是公認的中國最強盛的時代之一。
22 隋末天下羣雄並起，617年，唐國公李淵晉陽起兵，次年於長安稱帝創建唐朝。唐太宗繼位後開創「貞觀之治」。唐高宗承貞觀遺風開創「永徽之治」。690年，武則天以周代唐，定都洛陽，史稱武周。神龍革命後恢復唐朝國號。 [1-11]  唐玄宗即位後勵精圖治，開創了萬邦來朝的開元盛世。 [12]  天寶末全國人口達八千萬上下。 [13-16]  安史之亂後藩鎮割據、宦官專權致使國力漸衰，中後期經唐憲宗元和中興、唐武宗會昌中興、唐宣宗大中之治國勢復振。878年，爆發黃巢起義破壞了唐朝統治根基，907年，朱溫篡唐，唐朝覆亡，中國進入五代十國。 [17]
23 </div>
24 
25 </body>
26 </html>

View Code

五 backgrouad用法

background-image:url(./1.jpg)
background-repeat: repeat|no-repeat|repeat-x|repeat-y
background-position: x y;
x和y若是是正值，意味着調整當前圖片的位置信息，相對於原來的位置進行調整
x和y若是是負值，切背景圖，注意：必定要有明確的width和height

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>背景</title>
 6     <style>
 7         .jieyi{
 8             border: 1px solid red;
 9             width: 1200px;
10             height: 1000px;
11             background-image: url("./zixia.jpg");
12             background-repeat: no-repeat;
13             /*!*調整圖片位置*,能夠寫正數，也能夠寫負數/*/
14             background-position: -133px -97px ;
15             /*設置固定背景圖像，圖像不會隨着頁面的其餘部分滾動*/
16             background-attachment: fixed;
17         }
18     </style>
19 </head>
20 <body>
21 <div class="jieyi"></div>
22 <div class="taobao"></div>
23 
24 </body>
25 </html>

View Code

六文字屬性和文本屬性

（11）line-height
(1)針對單行文本垂直居中

公式：行高的高度等於盒子的高度，可使當行文本垂直居中，注意只適用單行文本。

(2)針對多行文本垂直居中

行高的高度不能小於字體的大小，否則上下字之間會緊挨一塊兒。

第一步，一個寬度300*300的盒子，看盒子中一共顯示了幾行文字，假如是5行，再看一下行高，若是行高是line-height:30px; 那麼就知道行高*5=150px

第二步，讓(盒子的高度-150px)/2=75;那麼設置盒子的padding-top:75px;同時保證盒子的高度爲300px,那麼高度改成225px;

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>文字屬性和文本屬性</title>
 6     <style>
 7         html{
 8             font-size: 20px;
 9         }
10         body{
11             font-size:20px;
12         }
13         .box1 {
14             font-size: 30px;
15             border: 1px solid red;
16         }
17         .box2{
18             width: 200px;
19             height: 160px;
20             background-color: green;
21             text-decoration: underline;
22             color: blue;
23             /*coursor鼠標放到上面所顯示的樣式*/
24             cursor: pointer;
25             text-align: center;
26             font-size: 20px;
27             line-height: 30px;
28             padding-top: 40px;
29             /*font-family: "Times New Roman","Microsoft YaHei","SimSun";*/
30         }
31         .box2:hover{
32             text-decoration: none;
33         }
34     </style>
35 </head>
36 <body>
37 <div class="box1">
38     文字文字文字文字文字文字文字文字文字文字文字
39 </div>
40 <div class="box2">
41     你好 啊
42 </div>
43 <div class="circle">
44     哈哈哈
45 </div>
46 
47 </body>
48 </html>

View Code

七阿里巴巴矢量圖用法

1 登陸網址：http://www.iconfont.cn/

2 搜索你所須要的圖標

3 添加到項目庫或者下載到本地

4幫助--代碼應用查看如何使用

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>iconfont</title>
 6     <style>
 7         @font-face {
 8           font-family: 'iconfont';  /* project id 731660 */
 9           src: url('http://at.alicdn.com/t/font_731660_9t01w5nx8ml.eot');
10           src: url('http://at.alicdn.com/t/font_731660_9t01w5nx8ml.eot?#iefix') format('embedded-opentype'),
11           url('http://at.alicdn.com/t/font_731660_9t01w5nx8ml.woff') format('woff'),
12           url('http://at.alicdn.com/t/font_731660_9t01w5nx8ml.ttf') format('truetype'),
13           url('http://at.alicdn.com/t/font_731660_9t01w5nx8ml.svg#iconfont') format('svg');
14         }
15     .iconfont{
16         font-family:"iconfont" !important;
17         font-size:16px;font-style:normal;
18         -webkit-font-smoothing: antialiased;
19         -webkit-text-stroke-width: 0.2px;
20         -moz-osx-font-smoothing: grayscale;
21     }
22     i{
23         display: block;
24     }
25     a{
26         text-decoration: none;
27         color: #777;
28     }
29     a:hover{
30         color: #ff6700;
31     }
32     </style>
33 </head>
34 <body>
35     <a href="#" title="">
36         <i class="iconfont">&#xe636;</i>
37         手機
38         <i class="iconfont">&#xe603;</i>
39         電話卡
40     </a>
41 
42 </body>
43 </html>

View Code

如圖所示：

相關標籤/搜索

每日一句

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