关于浮动的注意事项
宏觀地講,我們的web頁面和photoshop等設計軟件有本質的區別:web頁面的制作,是個“流”,必須從上而下,像“織毛衣”。而設計軟件,想往哪里畫個東西,都能畫。
行內元素和塊級元素的區別:(非常重要)
行內元素:
與其他行內元素并排;
不能設置寬、高。默認的寬度,就是文字的寬度。
塊級元素:
霸占一行,不能與其他任何元素并列;
能接受寬、高。如果不設置寬度,那么寬度將默認變為父親的100%。
塊級元素可以轉換為行內元素:
一旦,給一個塊級元素(比如div)設置:
display: inline;
行內元素轉換為塊級元素:
同樣的道理,一旦給一個行內元素(比如span)設置:
display: block;
那么,這個標簽將立即變為塊級元素,此時它和一個div無異。block”是“塊”的意思。也就是說:
此時這個span能夠設置寬度、高度
此時這個span必須霸占一行了,別人無法和他并排
如果不設置寬度,將撐滿父親
元素怎樣浮動:
元素的水平方向浮動,意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動,下面的文本流將環繞在它左邊:
實例:img {
總結
- 上一篇: 【观察】西部数据技术创新制胜,筑牢数据存
- 下一篇: 信息安全管理——消息摘要与数字签名