1218 认识盒子

1. 盒子由内而外由content\padding\border\margin四个矩形带组成
2. 盒子的宽高是很基本的描述,内容区宽和高用width和height属性来描述,此时一路加法,加上padding,border各自的宽高就得到了盒子整体的宽高;也可以先用box-sizing:border-box 切换为盒子整体的宽高,然后在里面做减法,减去padding和border就是内容区宽高;
3. 不同元素的margin在碰撞时会分水平和垂直方向,水平方向体现为左右叠加,垂直方向为重叠塌陷,,大的盖住小的;
4. padding和margin主要影响的是页面布局,为了跨浏览器统一,经常会让所有元素内部的padding和彼此margin等于0,且box-sizing延伸到border-box;
5. 为了使容器的内容区更能弹性装载内容,overflow:auto可以随大随小;
6. 容器的内容区在装载内容时,宽度相对固定,高度是希望随内容本身而变化,在变化的时候可以加上限制,比如min-height,max-height,内容本身的高度和这两个设定值需要进行比较在进行展示;应该是区域规划的目的
7. 水平居中:行内元素想要在容器中水平居中,那么容器使用text-align:center 属性值就可以了;块元素则用自身的margin在容器中找位置,margin左右对称则居中;
8. 垂直居中:行内元素把自身的line-height设置和容器高度一致,那么它在容器中就是垂直居中的;行内块元素和块元素自带宽高,如果想在父容器中垂直居中,它本身设计好合适宽度,高度按比例缩放,父容器可以只设置内容区宽度,高度由子元素对应来填,同时padding的值上下对称,那么子元素在容器中就是垂直居中的,且自身的宽度一路影响到盒子的整体大小;
9. 水平和垂直居中:行内元素在父容器上设置text-align和line-height属性;块元素可以综合使用padding和margin来设置

这次也不写coding了