• 技术文章 >常见问题

    网页布局的三种方式分别是什么

    PHPzhongPHPzhong2020-10-12 14:19:07原创4259

    网页布局的三种方式分别是:1、标准文档流;2、浮动;3、绝对定位。其中,绝对定位完全脱离了标准文档流,建立了以包含块为基准的定位,拥有偏移属性和z-index属性。

    相关学习推荐:网站制作视频教程

    网页布局的三种方式:

    一:标准文档流

    1、从上到下 从左到右(块级元素【div,ul,li,dl,dt,p】和行级元素【上盘,img,strong,input】)

    2、盒子模型

    1)盒子模型属性:

    边框border ,

    内边距padding【(上,右,下,左)(上,左右,下)(上下,左右)】,外边距margin【(上,右,下,左)(上,左右,下)(上下,左右)】。

    3、盒子3d模型

    1)盒子3d模型层级

    1,border ;

    2,content+padding;

    3,background-img;

    4,background-color;

    5,margin;

    4、盒子模型尺寸等于边框+外边距+内边距+盒子中间内容尺寸

    二:浮动 float

    float:left,right,none

    清除浮动:

    1、clear:both;(一般用于紧邻后面的元素清除浮动)

    2、同时设置width:1000%(固定宽度)+overflow:hidden;

    注:(当父包含快缩成一条时,用clear:both方法无效;一般用清除浮动的第二种方法)

    三:绝对定位

    1静态定位 2相对定位 3绝对定位

    1600659111176418.png

    1600659116184048.png

    以上就是网页布局的三种方式分别是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:网页布局
    上一篇:下列存储设备中断电后其保存的信息会丢失的是哪一项 下一篇:感知层是物联网体系架构的第几层
    大前端线上培训班

    相关文章推荐

    • css网页布局必知的基础小知识(总结)• CSS网页布局小技巧汇总• 如何通过flex进行网页布局• 网站子目录安装dedecms导致网页布局混乱

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网