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;}