网页布局方式

网页布局方式:

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的。

  1. 标准流(文档流/普通流)排版方式:
  1. 其实浏览器默认的排版方式就是标准流的排版方式;
  2. 在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素;
  3. 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
    垂直排版: 如果元素是块级元素, 那么就会垂直排版;如果元素是行内元素/行内块级元素, 那么就会水平排版。

2.浮动流排版方式:

  1. 浮动流是一种"半脱离标准流"的排版方式;
  2. 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐。
注意点:

1.浮动流中没有居中对齐, 也就是没有center这个取值
2.在浮动流中是不可以使用margin: 0 auto;

特点:

1.在浮动流中是不区分块级元素/行内元素/行内块级元素的,
无论是块级元素/行内元素/行内块级元素都可以水平排版。
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高;
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像。

3.定位流排版方式

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 网页布局方式——浮动流 标签(空格分隔): H5+CSS [TOC] 网页布局方式——浮动流 简介 浮动流是一种"...
    袁俊亮技术博客阅读 3,240评论 0 1
  • 网页布局方式——标准流 标签(空格分隔): H5+CSS 1.什么是网页的布局方式?网页的布局方式其实就是指浏览器...
    袁俊亮技术博客阅读 5,653评论 0 2
  • 网页布局方式 网页布局方式其实是指浏览器是如何对网页中的元素进行排版的 定位流 标准流(文档流/普通流)排版方式(...
    前端雨阅读 3,405评论 0 0
  • 交本周作业,敬请蔡老师指正 拾金不昧的小宋(406字) 文/魏铁桩 一大早,老魏准备出门去水泥厂拉水泥,...
    三月阳光_28c7阅读 1,163评论 0 0