网页布局基础

W3C标准

由万维网联盟制定的一系列标准,包括:

  • 结构化标准语言(HTML和XML)
  • 表现标准语言(CSS)
  • 行为标准语言(DOM和ECMAScript)

本节只涉及CSS部分

CSS中定位机制

在CSS中,存在3种定位机制

  • 标准文档流(Normal flow)
  • 浮动(Floats)
  • 绝对定位(Absolute positioning)

标准文档流(Normal flow)

特点:

  • 从上到下,从左到右,输出文档内容
  • 由块级元素和行级元素组成

块级元素

特点:

  • 从左到右撑满页面,独占一行
  • 触碰到页面页面边缘时,会自动换行

常见块级元素
即块级标签,如:div、ul、li、dl、dt、p……

行级元素

特点:

  • 能在同一行内显示
  • 不会改变HTML文档结构

常见行级元素
即行级标签,如:span、strong、img、input……

块级元素和行级元素都是盒子模型

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、CSS的三种定位机制 CSS 规定的定位机制有三种,分别是: 标准文档流(Normal flow): 特点:从...
    徐国军_plus阅读 3,701评论 0 3
  • 网页布局基础 什么是网页布局?网页布局是网页制作的基础(DIV+CSS网页布局) 分类:流式布局,浮动布局,绝对定...
    单纯的土豆阅读 5,818评论 0 6
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,693评论 1 92
  • W3C标准 结构化标准语言HTML/XML 表现标准语言CSS 行为标准语言DOM/JavaScript 盒子模型...
    GRID_JS阅读 2,795评论 0 0
  • 基本网页布局一般分为三种:1)流式布局2)浮动布局3)绝对定位布局 css中的定位机制:1)标准文档流特点:a.从...
    c05436bafae5阅读 3,878评论 0 0

友情链接更多精彩内容