网页布局基础的学习笔记

来源：互联网发布：php数组排序算法编辑：程序博客网时间：2024/04/30 09:43

整理下关于慕课网-网页布局基础的学习笔记

W3C标准

结构化标准语言（HTML和XML）
表现标准语言（CSS）
行为标准语言（DOM和ECMAScript）

倡导结构、样式、行为分离

CSS中的定位机制

标准文档流（Normal flow）
- 从上到下，从左到右，输出文档内容
- 由块级元素和行级元素组成（块级元素和行级元素都是盒子模型）
- - 块级元素
  - - 从左到右撑满页面，独占一行
    - 触碰到页面边缘时，自动换行
    - 典型代表：<div><ul><li><dl><dt><p>
  - 行级元素
  - - 能在同一行内显示
    - 不会改变HTML文档的结构
    - 典型代表<span><strong><img><input>
- 盒子模型（即网页布局的基石）
- - 边框（border）
  - 外边距（margin）
  - 内边距（padding）
  - 盒子中的内容（content）
- 盒子3D模型（从上到下）
- - 第一层 border
  - 第二层 content+padding
  - 第三层 background-image
  - 第四层 background-color
  - 第五层 margin
- 盒子模型尺寸
- - 盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸
- 左右margin=auto可以居中
浮动(Float)
- 实现横向多列布局
- 通过设置float属性实现
- - left
  - right
  - none
- 浮动元素仍然处于标准文档流中，会对紧邻其后的元素产生影响
- 清除浮动的常用方法（一般对受到影响的元素）
- - clear属性-常用clear:both;（left/right)-一般用于紧邻元素
  - 同时设置width:100%(或固定宽度）+overflow:hidden;-一般用于父元素
postion三种定位形式
- 静态定位（默认：处于标准文档流）
- - 属性值:static
- 相对定位
- - 属性值:relative
  - 特点：
  - - 相对与自身原有位置进行偏移
    - 仍然处于标准文档流中
    - 拥有偏移属性和z-index属性
- 绝对定位
- - 属性值:absolute
  - 属性值:fixed
  - 能够实现横向多列布局及较为复杂的定位
  - - 带有遮罩层效果的提示框
    - 固定层效果
    - 全屏广告
  - 特点：
  - - 建立了以包含快为基准的定位
    - 完全脱离标准文档流（对兄弟元素不再造成任何影响）
    - 拥有偏移属性和z-index属性
  - 未设置偏移量
  - - 特点：
    - - 无论是否存在已定位祖先元素，都保持在元素的初始位置
      - 脱离标准文档流
  - 设置偏移量
  - - 无已定位的祖先元素
    - - 以<html>为偏移参照基准（而不是<body>）
    - 有已定位祖先元素
    - - 以距其最近的已定位祖先元素为偏移的参照基准

0 0