一、盒子模型練習 我們有個需求: 創建兩個盒子,大盒子嵌套一個小盒子,大盒子是紅色的,小盒子是藍色的,並且小盒子在大盒子中是居中的。 註意點: (1) 註意點:如果兩個盒子是嵌套關係,設置裡面的盒子的外邊距的話,外面的 盒子也會頂下來 ,即:僅有屬性: margin-left:100px; marg ...
一、盒子模型練習
我們有個需求:
創建兩個盒子,大盒子嵌套一個小盒子,大盒子是紅色的,小盒子是藍色的,並且小盒子在大盒子中是居中的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .big{ width:500px; height: 500px; background-color: red; box-sizing: border-box; border:1px solid; } .small{ width:300px; height:300px; background-color: blue; /*margin-left:100px;*/ /*margin-top:100px;*/ margin:100px auto;/*這樣寫是等價於上面兩個語句,這種方法就是讓我們的小盒子居中 /*註意點:如果兩個盒子是嵌套關係,設置裡面的盒子,外邊距的話,外面的盒子也會頂下來 解決方法:在外面的大盒子中添加一個border屬性,因此在企業開發中,一般情況下入伏哦需要控制嵌套關係盒子的舉例, 應該首先考慮padding,其次在考慮margin,因為margin本質上是用於控制兄弟關係之間的間隙的,*/ } </style> </head> <body> <div class="big"> <div class="small"></div> </div> </body> </html>
註意點:
(1)
註意點:如果兩個盒子是嵌套關係,設置裡面的盒子的外邊距的話,外面的
盒子也會頂下來 ,即:僅有屬性:
margin-left:100px;
margin-top:100px;
解決方法:在外面的大盒子中添加一個border屬性,因此在企業開發中,一般情況下如果需要控制嵌套關係盒子的距離,應該首先考慮padding,其次在考慮margin,因為margin本質上是用於控制兄弟關係之間的間隙的
(2)我們看到一個新的屬性值
margin:100px auto
這個前面是距離,後面auto就會將小盒子進行居中,如果寫成:margin:0 auto.那麼只會在水平方向上進行居中,因此我們要計算好距離像素,寫到屬性值中。
二、text-align:center和margin:0 auto之間的區別
1.text-align:center;作用:設置盒子中的存儲的文字/圖片水平居中。
2.margin:0 auto;作用:讓盒子自己水平居中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>d116_box_center_and_content_center</title> <style> .father{ width:800px; height:500px; background-color:red; text-align: center; margin: 0 auto; } .son{ width:100px; height:100px; background-color: blue; margin: 0 auto; } </style> </head> <body> <div class="father"> 我是一個文字 <br> <img src="image/example1.jpg" alt=""> <div class="son"> </div> </div> </body> </html>
三、源碼:
d115_box_in_the_center.html
d116_box_center_and_content_center.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/d115_box_in_the_center.html
https://github.com/ruigege66/HTML_learning/blob/master/d116_box_center_and_content_center.html
2.CSDN:https://blog.csdn.net/weixin_44630050(心悅君兮君不知-睿)
3.博客園:https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號:傅里葉變換,個人賬號,僅用於技術交流,後臺回覆“禮包”獲取Java大數據學習視頻禮包