本文共 767 字,大约阅读时间需要 2 分钟。
1.盒子模型
2.display:确定元素显示类型(block、inline、inline-block)
3.position:确定元素位置(static/静态(按文档流挨着布局)、relative/相对(以元素本身做参考点,不改变其占据的空间)、absolute/绝对(脱离文档流,不会对其他元素布局产生影响,相对于最近的absolute或relative属性的元素)、fixed/固定(脱离文档流,不会对其他元素布局产生影响,相对于可视区域))
1.table 表格布局
文字垂直居中
2.
脱离文档流,但不脱离文本流
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.
1.弹性盒子
2.盒子本来就是并列的,指定宽度即可
再添加 div 也会平分,依次排列,宽度分别设置即可(低版本IE不支持,版本更迭复杂)
响应式:在不同设备上可以正常使用,一般主要处理屏幕大小问题
主要方法:1.隐藏+折行+自适应空间 2.rem/viewport/media query
示例1.1.隐藏+折行+自适应空间
示例2.