CSS 布局小结

CSS 布局小结

布局基础：

1.盒子模型

2.display：确定元素显示类型（block、inline、inline-block）

3.position:确定元素位置（static/静态（按文档流挨着布局）、relative/相对（以元素本身做参考点，不改变其占据的空间）、absolute/绝对（脱离文档流，不会对其他元素布局产生影响，相对于最近的absolute或relative属性的元素）、fixed/固定（脱离文档流，不会对其他元素布局产生影响，相对于可视区域））

常见布局方式

1.table 表格布局

文字垂直居中

2.float 浮动 + margin 布局

脱离文档流，但不脱离文本流

float对自身影响：

1.形成“块”（BFC）宽和高由自身设置

2.位置尽量靠上和靠左

示例

float对兄弟元素影响：

1.上面贴非 float 元素

2.旁边贴 float 元素

3.不影响其他块级元素位置

4.影响其他块级元素内部文本

float对父集元素影响：

1.从布局上“消失”

2.可能发生高度塌陷

高度塌陷

解决办法：1.overflow = auto  (元素超出时自动进行滚动）2.利用其他元素撑开父集元素

布局示例

3.inline-block 布局

1.像文本一样排 block 元素

2.没有清除浮动等问题

3.需要处理间隙，自适应适配困难

解决办法：1.字体大小设为0，在子元素中再重设字体大小

4.flexbox 布局

1.弹性盒子

2.盒子本来就是并列的，指定宽度即可

再添加 div 也会平分，依次排列，宽度分别设置即可（低版本IE不支持，版本更迭复杂）

响应式设计和布局

响应式：在不同设备上可以正常使用，一般主要处理屏幕大小问题

主要方法：1.隐藏+折行+自适应空间 2.rem/viewport/media query

示例1.1.隐藏+折行+自适应空间

示例2.