web新手第二周知识汇总

这周学习了盒模型以及一些定位的知识，现在简单做下汇总

盒模型组成部分:

ie浏览器默认值是border-box content（内容盒）蓝色 padding（内容和边框的距离 绿色 填充盒包含内容）boder margin（两个 标签之间的距离 棕黄色 边框盒包含 填充） 分类 block inline none

文本类 inline 默认属性 p是块级 属性
       content

不生产盒子 display：none
    消失 后出现:

例子:
article{
display: none;
}
div:hover{
color: red;
}
div:hover+article{ display: block;
boder
dotted 点线
doubie 双实线
透明色 gainsboro
左边小三角
border: 10px solid transparent;
border-left-color: indigo;
定位体系：
1常规流 （
普通 文档 普通文档
2浮动 （ 不常用 有副作用） float（默认：none left/right
3绝对定位（默认static） position： absolute fixed
先判断第一步是什么定位，判断了就不用再看了

定位体系块级 auto（根据定位体系的规则计算）自动装满 默认自动

margin 单位 px em % auto
boder px em（当前字体大小的倍数）
padding px em %
width px em % auto
height px em % auto
%去包含块的百分率
父元素宽度的百分比 最后都会变成px

常规流块盒
包含块高度水平等于父元素宽度
水平居中：margin：0 auto0；
锤子方向 margin为AUTO 0px height为auto适应内容的高度
若两个外边距相邻，则进行锤子外边距合并
外边距相邻：没有boder padding conten
正数取最大，负数取最小，一正一负则相加
盒子在包含块的锤子方向上依次摆放，盒子在包含块的中占据的尺寸是整个盒子的尺寸
相邻外边距的场景:
1 兄弟级
a的下边距和B的上外边距
2父子级
1，父元素上外边距与第一个元素上外边距
2，夫元素下外边距与最后一个子
元素下外边距
子元素浮动，父元素高度塌陷
浮动元素会脱离文档流，不占用原来的位置 浮动的原始功能是文字环绕
浮动：当marin中的每个方向取auto时为0px
宽高为auto时 为内容宽度
line-hight 行高等于高 文本锤子方向剧中
相对位置
先设置position：relative，正向
向相反方向移动，负值相同方向移动
绝对位置
子绝父相
堆叠级别
z-index 可以数值取正负数
一般-3到3，数越大越往前

绝对定位
不会对其他元素造成影响
fix 固定位置
ab 绝对位置
视口 viewport 可视的窗口 浏览器的可视区域
块级格式化上下文:

overflow hidden
overflow：超出部分的显示方式
hidden 超出部分隐藏
auto 水平方向超出 横向滚动条
垂直方向 滚动条
scroll 不管超出没有 都出现滚动条文本断词规则
overflow-x overflow-y 单独设置滚动条
overflow默认值 visible 显示
解除外边距 消除同时 它会创建bfc 块级格式化上下文