html和css學習筆記

1.塊級元素與行元素區別

塊級元素：

• 塊級元素老是出如今一行，它排斥其餘元素跟他同站一行；
• 塊級元素的行高以及內外邊距均可以直接控制；
• 它能夠容納內聯元素和其餘元素；

行元素：

• 能和其餘元素同處一行；
• 高度和外邊距不能直接設置(能夠經過display:inline-block/block來設置)；
• 寬度就是它的文字和圖片的寬度不可改變（左右margin/padding有效，上下無效；）;
• 內聯元素只能容納文本及其它內聯元素

2.relative和absolute的根本區別：前者脫離了文檔流，然後者沒有。

3.學習了一些新的技巧

a. layout-flow屬性有兩個值:horizontal(字體水平設置)；vertical-ideographic(豎行顯示)；

b. box-sizing:border-box;content-box;重點在於區別盒子的實際大小的計算方式。前者的padding和margin是包含在內的，然後者的實際寬度=padding+margin+border+content;

c. 小圖標和文字對齊（設置負值）

img{vertical-align:-10px;}