震惊！盒子属性居然还有这样的用法

盒子补充

1.只要是盒子，在盒子内部都会有布局流，也就是流式布局
2.在写页面布局的时候，尽量利用布局流，因为在使用布局流时候 父元素高度可以由子元素撑起来，可以避免兼容性问题
3.如何搭建盒子与盒子之间的关系，更加重要

复合属性

margin padding border …
凡是在浏览器解析时候；出现倒三角都是复合属性

单位

绝对单位

• 是固定的：不可以改变的
• px 像素

相对单位：

• 作用：可以实现响应式布局。响应式布局时元素随着浏览器的尺寸变大变小。
• % 百分比 子元素相对父元素
• rem 所有元素相对根元素 如果根元素不发生变化则里面的元素也不会发生变化 TE8不支持
• vw 元素相对视图宽度
• vh 元素相对视图高度
  单位换算
  1rem = 16px
  1vw = 1%视图窗口宽度
  1vh = 1%视图窗口高度

注意：在我们前端只要提到相对；都是子相对父

盒子布局

margin 可以为父子；负值下相当于给其他元素让出位置。
margin-top 会使目标元素上面的元素往下走
margin-bottom 使目标元素下面的元素网上走
margin-left 使目标元素往左走，其他相邻元素也会被影响

盒子布局不会破坏流式布局

定宽居中

定谁的卷？ 相对谁居中
给父元素确定宽度，在父元素内部水平方向居中
核心：左右外边距值为 auto

注意：定宽居中也是在布局流中

位置属性 position

• static 静态位置属性
  元素没有脱离文档流

• 相对定位
  相对自身起始位置进行定位； 自身脱离了文档流
  定位后原来的位置不被其他元素所占据。
  应用：适合用于元素微调

• 绝对定位
  相对祖籍元素中具有 position 属性的元素，
  且值不是static进行定位，如果所有祖籍都没改属性，
  那么就相对于body进行绝对定位

• 定位后元素本身脱离文档流，
  位置被其他元素所占据，
  元素大小由默认百分之百大小变为内容大小（默认无外边距）

• 固定定位 fixed
  相对于视图窗口进行定位；
  元素自身脱离文档流
  原来的位置被其他元素所占据
  元素由原来默认宽度百分之百；变为内容大小；尽可量小；
  top 目标元素距离视图窗口顶部 如果小于0 往上走
  bottom 目标元素距离视图窗口底部 如果小于0 往下走
  left 目标元素距离视图窗口左部 如果小于0 往左走
  right 目标元素距离视图窗口右部 如果小于0 往右走

浮动 float

1：浮动后元素本身脱离文档流，原来的位置被其他元素占据
2：浮动后针对在同一个父元素中，目标元素会占据一个浮动后位置
3：注意；浮动只能是 子元素在容器中进行位置移动。如果父元素容器剩余宽度不能容纳另一个元素，那么久换行。
4：同一位置多个元素，具有浮动属性的元素；层级高于不具有浮动属性的元素
** 目标元素的浮动范围：父容器
总结：浮动规律：
第一步：元素在布局流中的起始位置，
第二步：沿自身水平方向浮动，如果水平方向空间不够，那么自动换到下一行
5：问题：如果父元素没有高度那么会出现什么问题呢？
    父元素没有设置固定高度；那么，父元素高度有子元素撑起来，如果所有子元素都脱离文档流，那么父元素没有高度了，只有不脱离文档流的元素才能撑起父元素的高度
6.解决浮动 带来的问题
    方式一：给父元素设置一个固定的高度
    方式二：在最后一个浮动元素，元素下面新加一个元素，清除浮动
    方式三：伪类元素清除：给父标签添加微元素
            content: "";
            display: block;
            clear: both;

  设置父元素的高度
  在最后一个浮动的下面；加一个元素，清除浮动
  清除浮动后；浏览器会自动子元素的高度；从而撑起父元素的高度

元素属性切换

行；块；行内块；可以相互转换

总结：所有破坏流式布局的属性，都是将原本的块元素转换为行内块