HTML-CSS布局相關元素小心得
<pre>
在這里分享給大家一些HTML-CSS的相關知識，供新人學習，老人查閱,共勉。
------DanlV
</pre>
標準文檔流
網頁在解析的時候，遵循從上向下，從左向右的一個順序，而這個順序就是標準文檔流。 標準文檔流 -- 》 定義了標簽的特性以及網頁的解析順序 。標準文本流 -- 》 指的是網頁中文字
如果想要讓行內元素和塊級元素不再遵循本身的特性，除了轉換 （display）以外，還可以通過float和position來實現。*因為通過float（浮動） 和 position(定位) 可以讓元素脫離"標準文檔流"。
TIPS：
1. position 定位可以讓元素即擴里文檔流，也脫離文本流
2.float 讓元素脫離了標準文檔流，但是沒有讓元素脫離標準文本流
遵循規則
- 網頁解析順序 :上 - > 下 左 -> 右
- 塊級元素和行內元素的規則:
1.塊級元素自己霸占一行 ，不能與其他元素并列顯示；可以設置寬度和高度；如果不設置寬度，塊級元素會默認沾滿整個父元素的寬；
2.行內元素能夠與其他的行內元素并排顯示；不能夠設置寬度和高度，寬度是內容的寬度，高度是內容的高度； - 高矮不齊，底邊對其
- 單詞寫滿一行，自動換行
- 如果單詞沒有寫完(沒有空格)，那么單詞不換行
- 一個元素擺脫標準文檔流限制的三種方式
1.浮動
2.絕對定位
3.固定定位
盒子模型
CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。
我們把網頁中任意一個元素都稱之為盒子模型。
原理
內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。
屬性
1.width、height指的是盒子中內容的寬度和高度
2.padding--內邊距指的是內容距離盒子邊框的距離 （在寫css代碼的時候，能夠使用簡寫就不要使用其他的寫法。）
width: 300px;
height: 300px;
border: 2px solid purple;
background-color: orange;
margin: 1px;
/*上下左右內邊距都死10px*/
padding: 10px;
/*上下為10px 左右為20px*/
padding: 10px 20px;
/*上為10px 左右為20px 下為30px*/
padding: 10px 20px 30px;
/*上為10px 左為20px 下為30px 右為40px*/
padding: 10px 20px 30px 40px;
3.margin塌陷現象：兩個盒子分別設置左邊距，右邊距，顯示的結果顯示值大的一個邊距。
div {
width: 300px;
height: 200px;
/*display: inline-block;*/
float: left;
}
.d1 {
background-color: red;
/*margin-bottom: 20px;*/
margin-right: 20px;
}
.d2 {
background-color: blue;
/*margin-top: 30px;*/
margin-left: 10px;
}
<div class="d1"></div>
<div class="d2"></div>
4.盒子居中
.test {
width: 300px;
height: 300px;
background-color: red;
margin: 100px auto;/將左右的margin設置為auto將會居中/
}
<div class="test"></div>
浮動
浮動，讓元素脫離標準文檔流，float:left/right。
浮動的特性
- 元素脫離標準文檔流
- 存在相互貼靠的效果
- 字圍
清除浮動方案
因為浮動會使當前標簽產生向上浮的效果，同時會影響到前后標簽、父級標簽的位置及 width height 屬性。
而且同樣的代碼，在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。
解決浮動引起的問題有多種方法，但有些方法在瀏覽器兼容性方面還有問題。
父級定義height，只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
父級元素結尾處加空div標簽設屬性clear:both（內墻法）
-
父級元素之后加空div標簽設屬性clear:both（外墻法）
<style>
li {
list-style: none;
}.box1 ul li { float: left; width: 30px; height: 40px; margin-left: 10px; background-color: orange; } .clear { clear: both; } </style></head>
<body>
<div class="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="clear"></div><div class="box2"> <ul> <li>11</li> <li>22</li> <li>33</li> <li>44</li> </ul> </div></body>
- 父級div定義偽類:after和zoom
<style type="text/css">
.div1 {
background: #000080;
border: 1px solid red;
}
.div2 {
background: #800080;
border: 1px solid red;
height: 100px;
margin-top: 10px
}
.left {
float: left;
width: 20%;
height: 200px;
background: #DDD
}
.right {
float: right;
width: 30%;
height: 80px;
background: #DDD
}
/*清除浮動代碼*/
.clearfloat:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0
}
.clearfloat {
zoom: 1
}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
父級div定義overflow:hidden，不能和position配合使用，因為超出的尺寸的會被隱藏
父級div定義overflow:auto，內部寬高超過父級div時，會出現滾動條
父級div也一起浮動，可能會產生新的浮動問題
-
父級div定義display:table，將div屬性變成表格，可能產生新的未知問題
<style type="text/css"> .div1 { background: #000080; border: 1px solid red; width: 98%; /*解決代碼*/ display: table; margin-bottom: 10px; } .div2 { background: #800080; border: 1px solid red; height: 100px; width: 98%; } .left { float: left; width: 20%; height: 200px; background: #DDD } .right { float: right; width: 30%; height: 80px; background: #DDD } </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>
