盒模型与三大定位体系

盒模型

盒模型组成部分

Content   内容   

内容盒:content-box

Padding    内边距  

边框与内容之间的距离

content+padding填充盒:padding-box

Border        边框    

content+padding+border

边框盒：border-box

Margin        外边距  

盒子的分类

不同的元素产生的盒子类型可能不同
一个元素，产生什么样的盒子，取决于它的CSS的display值
属性：display  不能继承    默认值：inline

display:none不生成盒子   在页面不显示
border书写格式：border-方向-width  (设置某一个方向的边框粗细)
border-方向-style  (设置某一个方向的边框样式)
border-方向-color (设置某一个方向的边框颜色)

padding跟margin
取值：1个值时    4个方向取值都一样  
           2个值时    为上下，左右
           3个值时    上   左右   下
           4个值时    上  右   下   左            （顺时针方向）

 

定位体系

所有元素必须包含在它的元素块中

视觉格式化模型规定,定位体系分三种

1. 常规流（normal flow）
2. 浮动(float)
3. 绝对定位(absolute position)

 

定位体系判定

Position（默认值为static）的值时absolute或fixed 是 就属于绝对定位

不是  判定float(默认值为none)的值是left或right      是 就属于浮动

不是      就属于常规流

都是默认值就属于常规流

 

常规流

常规流：又叫普通流，文档流，普通文档流

 

盒模型中的auto值

常规流盒子水平方向的尺寸，必须等于包含块的宽度

文本内水平居中      Text-align:center

常规流块盒水平居中：给内容加个固定宽

Margin:0px   auto;

 

盒模型的auto值-垂直方向

margin为auto:0px

height为auto:适用内容的高度

盒子位置

盒子在包含块的垂直方向上的依次摆放

依次摆放：按照HTML元素的书写顺序从上到下摆放

盒子在包含块中占据的尺寸是整个盒子的尺寸

-垂直方向上，若两个外边距相邻，则进行合并（折叠）

垂直方向：水平方向上的外边距不会合并

外边距相邻：两个外边距之间没有border,padding和content

 

两个盒子margin   都为正     margin取最大值

margin   都为负       margin取最小值

margin   为正和负     margin取相加值

相邻外边距的场景：

兄弟级

A的下外边距和B的上外边距

父子级

情况1: 父元素上外边距与第一个元素的上外边距

情况2：父元素下外边距与最后一个子元素的下外边距

浮动流

元素功能：文字环绕

会脱离文档流、不占用原来位置

margin取值auto时   浮动都为O

width与height取值auto时    适用内容宽度

常规流盒子和浮动盒子混合摆放

浮动盒子在摆放时，要避开常规流盒子

常规流盒子在摆放时，无视浮动盒子

常规流盒子的自动高度计算时，无视浮动盒子

 

固定位置

Position:fixed固定位置  

             
视口（可视窗口）
浏览器的可视区域
Viewport
使导航一直定位在浏览器头部

举例：

body>div{
    /* 设置当前标签固定位置 */
    position: fixed;
    /* 固定位置的宽度为auto，则为内容宽度
    当前案例需要导航撑满浏览器，因此需要设置宽度为100% */
    width: 100%;
    height: 60px;
    background-color: indianred;
    /* 设置固定位置后位置不会发生变化，因此需要设置方向值，才会改变标签位置
    当前案例header需要固定在浏览器的顶部，因此设置top；0 */
    top:0;
}
body>P:nth-of-type(1){
    /* 由于header标签为固定位置，因此与P标签重叠在一起
    为了实现p标签在header下边显示，则设置上外边距为header的高度
    即让出header的高度，让p的内容在header下面显示 */
    margin-top: 60px;}
           

绝对位置
父级标签内：无position,或position不为static时
                      Position=absolute;  相对于父级标签移动

                      用方向加像素设置位置

 

相对定位

先设置position：relative

再设置4个方向的偏移量（移动的像素值）

注：可以取负值（正值相反方向移动，负值向相同方向移动）

移动但是依然占用原位置

先设置position：relative

再设置4个方向的偏移量（移动的像素值）

注：可以取负值（正值相反方向移动，负值向相同方向移动）

移动但是依然占用原位置