盒模型
margin外边距
padding内边距
border轮廓线
width和height指的是内容区域(content)的高度
外边距叠加
两个外边距相遇时，会形成一个外边距，但是并不是两个外边距相加，而是等于两者中较大的外边距。
这里考虑几种情况：
- 两个元素位置相邻。
这是最简单的一种，相邻元素（这里用上下来举例），margin-bottom和margin-top相遇，哪个长就按哪个的算。
- 两个元素嵌套。
那么就是两个元素中相同一边的外边距比较，谁大取谁。
- 同一元素外边距相邻
同一元素的上下相贴的时候，哪边大取哪边。
外边距叠加发生的情况：普通文档流中框的垂直外边距才会发生外边距叠加。行内框，浮动框，绝对定位框之间的外边距不会发生叠加
定位
可视化格式模型
html文档中的元素可以分为块级元素（div，p，h1等）和行级元素（img，span等）。
但是通过display的设置，可以使更改这些元素的本来属性。display:none,display:block等。
相对定位
position:relative
元素相对于其在普通文档流中的位置进行定位。无论是否移动，总是占据原来的空间。
绝对定位
position:absolute
绝对定位是不占据原有文档流的空间的。
绝对定位是基于离其最近的已定位先祖进行定位，若无已经定位的先祖，则相对于初始包含块（可以理解为整个浏览器界面）
固定定位
固定定位是绝对定位的一种，他可以使元素一直出现在视窗的某个位置（比如一直出现在右下角的返回最顶部按钮）
浮动
浮动的元素不在文档的普通流中占地方。即浮动会让元素脱离文档流
对文本内容来说，如果被浮动的图片，那么会造成文本环绕图片的情况。要想清除这种情况，需要给行框加上clear属性，clear属性可以选择left，right，both，none以此来确定哪些边不应该挨着浮动框。
ps.
visibility属性设置元素是否可变，hidden是不可见，visible是可见，collapse是表格中的数据不可见，但不影响表格布局，inherit规定从父元素继承visibility的值。
content属性用来和伪类:after,:before使用，确定插入值
若有收获，就点个赞吧
0 人点赞
