当前位置: 首页 >> 行业资讯 >> 资讯详情
网页布局总结_网站开发页面布局总结
编辑: 侯盼盼
日期: 2021-11-22 20:30
浏览次数: 1141

src=http___cbu01.alicdn.com_img_ibank_2018_185_902_8755209581_255510711.310x310.jpg&refer=http___cbu01.alicdn.jpg


1. 使用float布局

    注意点:使用浮动布局要注意清除浮动。

  浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。

  而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。内联元素:有空隙就插入。

      脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。

 


2. 普通流布局:display : inline-block

  inline-block默认是基线对齐的,而inline-block的基线又跟文本基线一致,所以在内容不同的时候并不能水平对齐。只需要用vertical-align显式声明一下top/bottom/middle对齐即可。


src=http___img.zcool.cn_community_01c3de566919f932f875a528a2a026.jpg&refer=http___img.zcool.jpg


相同作者更多:


装修行业网站设计_小程序设计_装修行业线上品牌展示

网站活动设计_营销活动设计风格_线上活动设计总结

网站设计/小程序设计路上的初步总结

找交流群,请备注“网站开发”。
添加微信:tianma104 拉你进技术交流群。
公众号
公众号
小程序
小程序
联系客服
联系客服
电话:18668935337
扫码咨询客服
咨询
在线咨询
拨打
电话
18668935337
微信
tianma102
立即咨询