网页布局两种方式:
浮动布局 定位布局
1.浮动布局:
float:left right none;
注意:
①设置浮动之后 元素会脱离文档流 "飘"起来
②块级元素设置浮动 失去独占一行的特性
③浮动元素会受“父级”元素的挤压 可能挤到下一行去 大盒子包小盒子
④自动扩展大盒子高度
盒子塌陷: 大盒子不设置高度 小盒子又全部浮动 大盒子合并一线
解决:使用伪元素选择器在大盒子后面添加一个清除了浮动的元素
#main::after{
content: "";
display: block;
clear: both;
}
作用:
使用浮动来做网页的整体大布局
大盒子包小盒子 小盒子设置浮动 谨防塌陷
位置在使用margin进行调整
2.定位布局:
position:static absolute relative fixed;
绝对定位:
设置绝对定位会脱离文档流
HTML网页布局和定位
最新推荐文章于 2022-07-25 19:07:50 发布
本文介绍了HTML网页布局的两种主要方式——浮动布局和定位布局。浮动布局中,元素设置浮动后会脱离文档流,可能引发盒子塌陷问题,解决办法是使用伪元素选择器清除浮动。定位布局包括静态、绝对、相对和固定定位,其中绝对定位适用于局部布局,固定定位则能让元素在页面滚动时保持位置不变。
摘要由CSDN通过智能技术生成