盒模型的属性丶display显示丶浮动
生活随笔
收集整理的這篇文章主要介紹了
盒模型的属性丶display显示丶浮动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一丶盒模型的屬性(重要)
1.padding
padding是標準文檔流,父子之間調整位置
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>padding</title><style>*{padding: 0;margin: 0;}.box{width: 200px;height: 200px;background-color: red;/*上下左右*/padding: 10px;/*上下 左右*/padding: 20px 30px;/*上 左右 下*/padding: 20px 30px 40px;/*順時針 上右下左*/padding: 20px 30px 40px 50px;}</style></head><body><div class="box">alex</div></body> </html> padding2.border
三要素:?線性的寬度? 線性的樣式? 顏色
solid?實線 dotted小圓點 double雙實線 bottom虛線
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>border</title><style>*{padding: 0;margin: 0;}.box{width: 200px;height: 200px;background-color: red;/*根據方向來設置*/border-left: 5px solid green;border-right: 1px dotted yellow;border-top: 5px double purple;border-bottom: 1px dashed;}</style></head><body><div class="box">alex</div></body> </html> border實例:制作三角形
transparent?透明
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>制作三角形</title><style type="text/css">div{width: 0;height: 0;border-bottom: 20px solid red;border-left: 20px solid transparent;border-right: 20px solid transparent;}</style></head><body><div></div></body> </html> 制作三角形3.margin
前提:必須是在標準文檔流下
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>margin</title><style>.s1{background-color: red;margin-right: 30px;}.s2{background-color: rgb(0,128,0);margin-left: 30px;}</style></head><body><span class="s1">alex</span><span class="s2">wusir</span></body> </html> marginmargin垂直方向上的坑:
margin的水平不會出現任何問題
垂直方向上?margin會出現'塌陷問題'
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>margin坑</title><style>.s1{width: 200px;height: 200px;background-color: red;margin-bottom: 40px;}.s2{width: 200px;height: 200px;background-color: green;margin-top: 100px;}</style></head><body><div class="s1"></div><div class="s2"></div></body> </html> margin(坑) <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>margin父子盒子的坑</title><style type="text/css">.box{width: 300px;height: 300px;background-color: red;/*float: left;*/}.child{width: 100px;height: 100px;background-color: green;margin-left: 50px;margin-top: 50px;}</style></head><body><div class="father"><div class="child"></div></div></body> </html> margin父子盒子的坑?
?二丶display顯示
前提;必須是在標準文檔流下
塊級元素和行內元素的相互轉換:
塊級元素可以轉換為行內元素:
display:inline
此時這個div不能設置寬度丶高度;
此時這個div可以和別人并排了
行內元素轉換為塊級元素:
display:block
此時這個span能夠設置寬高
此時這個span必須霸占一行了,別人無法和他并排
如果不設置寬度,將撐滿父親
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>display</title><style>.box{width: 100px;height: 100px;background-color: red;border: 1px solid yellow;}div a{display: block;width: 100px;height: 100px;}span{display: inline-block;width: 300px;height: 200px;background-color: yellow;}</style></head><body><div class="box">alex</div><div class="box">wusir</div><div><a href="#"><img src="http://img07.tooopen.com/images/20170818/tooopen_sy_220999936848.jpg" alt="" width="300" height="300"/></a></div><input type="text" /><br /><span>哈哈哈哈</span><span>嘻嘻嘻嘻</span></body> </html> display?
三丶浮動
float :? ? none? 表示不浮動,默認
? left:表示左浮動
? right:表示右浮動
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>浮動</title><style>*{padding: 0;margin: 0;}.father{width: 500px;}.box1{width: 100px;height: 100px;background-color:red;float: left;}.box2{width: 100px;height: 300px;background-color:green;float: left;}.box3{width: 100px;height: 100px;background-color:blue;float: left;}.father2{width: 600px;height: 200px;background-color: yellow;}</style></head><body><div class="father"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><div class="father2"></div></body> </html> 浮動我們該如何清除浮動呢?有以下幾種方法
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>清除浮動</title><style>*{padding: 0;margin: 0;}.father{width: 500px;height: 300px;}.box1{width: 100px;height: 100px;background-color:red;float: left;}.box2{width: 100px;height: 300px;background-color:green;float: left;}.box3{width: 100px;height: 100px;background-color:blue;float: left;}.father2{width: 600px;height: 200px;background-color: yellow;}</style></head><body><div class="father"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><div class="father2"></div></body> </html> 固定高度 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>清除浮動</title><style>*{padding: 0;margin: 0;}.father{width: 500px;}.box1{width: 100px;height: 100px;background-color:red;float: left;}.box2{width: 100px;height: 300px;background-color:green;float: left;}.box3{width: 100px;height: 100px;background-color:blue;float: left;}.father2{width: 600px;height: 200px;background-color: yellow;}.clearfix{clear:both;}</style></head><body><div class="father"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><!-- 內墻法 --><div class="clearfix"></div></div><div class="father2"></div></body> </html> clearfix內墻法? ?visibility:hidden;?設為隱藏
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>偽元素清除法</title><style>*{padding: 0;margin: 0;}.father{width: 500px;}.box1{width: 100px;height: 100px;background-color:red;float: left;}.box2{width: 100px;height: 300px;background-color:green;float: left;}.box3{width: 100px;height: 100px;background-color:blue;float: left;}.father2{width: 600px;height: 200px;background-color: yellow;}.clearfix:after{content: '.';clear: both;display: block;visibility: hidden;height: 0;}</style></head><body><div class="box"><div class="father clearfix"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div></div><div class="father2"></div></body> </html> 偽元素清除法 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>偽元素清除法</title><style>*{padding: 0;margin: 0;}.father{width: 500px;overflow: hidden;}.box1{width: 100px;height: 100px;background-color:red;float: left;}.box2{width: 100px;height: 300px;background-color:green;float: left;}.box3{width: 100px;height: 100px;background-color:blue;float: left;}.father2{width: 600px;height: 200px;background-color: yellow;}</style></head><body><div class="box"><div class="father"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div></div><div class="father2"></div></body> </html> overflow清除法?
總結
以上是生活随笔為你收集整理的盒模型的属性丶display显示丶浮动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： zabbix监控docker容器
- 下一篇： CSS 小结笔记之滑动门技术