整理下关于
慕课网-网页布局基础的学习笔记
- 结构化标准语言(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>)
- 有已定位祖先元素
-
- 以距其最近的已定位祖先元素为偏移的参照基准