“南大软院大神养成计划“_第十二天的学习“
2015-11-27 08:16
375 查看
1.W3C标准:由万维网联盟制定的一系列标准,包括:结构化标准语言(HTML和XML),表现标准语言(CSS)行为标准语言(DOM和ECMAScript)
倡导结构,样式,行为分离。
2.CSS中的3种定位机制:标准文档流(Normal flow),浮动(Floats),绝对定位(Absolute positioning)
3.标准文档流(Normal flow)
特点:从上到下,从左到右,输出文档内容。由块级元素和行级元素组成。
块级元素:div ,ul , li ,dl,dt ,p....
行级元素:span,strong,b,i,cite,img,input,em....(特点:不会改变HTML文档结构。)
块级元素和行级元素都是盒子模型。
4.盒子模型=网页布局的基石
有4部分:边框(border) 外边距(margin)内边距(padding)盒子中的内容(content)
盒子3D模型:由上到下:border content+padding background-image background-color
盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸
5.auto会根据浏览器的宽度自动的设置两边的外边距
原理:(浏览器的宽度-外包含层的宽度)/2=外边距
6.如果想让页面自动居中,当设置margin属性为auto的时候,不能再设置浮动为绝对定位属性。
7.浮动布局:实现横向多列布局。
设置了float属性的特点是:元素会左移,或右移,直至触碰到容器为止。
设置了浮动的元素,仍旧处于标准文档流中。
当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。
当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特指紧邻后面的元素。
8.清除浮动的常用方法:
clear属性一常用clear:both; clear:left 或者clear:right;
同时设置width:100px(或固定宽度)+overflow:hidden;
9.横向两列布局
float属性---使纵向排列的块级元素,横向排列
margin属性---设置两列之间的间距
当父包含块缩成一条时,用clear:both方法清除浮动无效,他一般用于紧邻后面的元素的清除浮动。
10.position属性:拥有三种定位形式:1.静态定位 2.相对定位 3.绝对定位
可设置4个属性值
static(静态定位)
relative(相对定位)
absolute(绝对定位)
fixed(固定定位)
固定定位和绝对定位属性都属于绝对定位形式。
11.相对定位:
特点:
相对为自身原有位置进行偏移
仍处于标准文档流中
随即拥有偏移属性和z-index属性
12.绝对定位:
特定:
建立了以包含块为基准的定位
完全脱离了标准文档流
随即拥有偏移属性和z-index属性
未设置偏移量
特点:
无论是否存在已定位祖先元素,都保持在元素初始位置
脱离了标准文档流
设置偏移量:
偏移量参照基准:
无已定位祖先元素,以<html>为偏移参照基准
有已定位祖先元素,以距其最近的已定位祖先元素为偏移参照基准
当一个元素设置绝对定位,没有设置宽度时,元素的宽度根据内容进行调节。
13.横向两列布局
使用absolute实现横向两列布局
一常用于一列固定宽度,另一列宽度自适应的情况
主要应用技能
relative---父元素相对定位
absolute---自适应宽度元素绝对定位
注意:固定宽度列的高度>自适应宽度的列
倡导结构,样式,行为分离。
2.CSS中的3种定位机制:标准文档流(Normal flow),浮动(Floats),绝对定位(Absolute positioning)
3.标准文档流(Normal flow)
特点:从上到下,从左到右,输出文档内容。由块级元素和行级元素组成。
块级元素:div ,ul , li ,dl,dt ,p....
行级元素:span,strong,b,i,cite,img,input,em....(特点:不会改变HTML文档结构。)
块级元素和行级元素都是盒子模型。
4.盒子模型=网页布局的基石
有4部分:边框(border) 外边距(margin)内边距(padding)盒子中的内容(content)
盒子3D模型:由上到下:border content+padding background-image background-color
盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸
5.auto会根据浏览器的宽度自动的设置两边的外边距
原理:(浏览器的宽度-外包含层的宽度)/2=外边距
6.如果想让页面自动居中,当设置margin属性为auto的时候,不能再设置浮动为绝对定位属性。
7.浮动布局:实现横向多列布局。
设置了float属性的特点是:元素会左移,或右移,直至触碰到容器为止。
设置了浮动的元素,仍旧处于标准文档流中。
当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。
当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特指紧邻后面的元素。
8.清除浮动的常用方法:
clear属性一常用clear:both; clear:left 或者clear:right;
同时设置width:100px(或固定宽度)+overflow:hidden;
9.横向两列布局
float属性---使纵向排列的块级元素,横向排列
margin属性---设置两列之间的间距
当父包含块缩成一条时,用clear:both方法清除浮动无效,他一般用于紧邻后面的元素的清除浮动。
10.position属性:拥有三种定位形式:1.静态定位 2.相对定位 3.绝对定位
可设置4个属性值
static(静态定位)
relative(相对定位)
absolute(绝对定位)
fixed(固定定位)
固定定位和绝对定位属性都属于绝对定位形式。
11.相对定位:
特点:
相对为自身原有位置进行偏移
仍处于标准文档流中
随即拥有偏移属性和z-index属性
12.绝对定位:
特定:
建立了以包含块为基准的定位
完全脱离了标准文档流
随即拥有偏移属性和z-index属性
未设置偏移量
特点:
无论是否存在已定位祖先元素,都保持在元素初始位置
脱离了标准文档流
设置偏移量:
偏移量参照基准:
无已定位祖先元素,以<html>为偏移参照基准
有已定位祖先元素,以距其最近的已定位祖先元素为偏移参照基准
当一个元素设置绝对定位,没有设置宽度时,元素的宽度根据内容进行调节。
13.横向两列布局
使用absolute实现横向两列布局
一常用于一列固定宽度,另一列宽度自适应的情况
主要应用技能
relative---父元素相对定位
absolute---自适应宽度元素绝对定位
注意:固定宽度列的高度>自适应宽度的列
相关文章推荐
- "知原理"检验题目——第13周
- HDU 3667 Transportation 费用流巧妙拆边
- 第十三周上机实践—项目1(2)—Kruskal算法的验证
- 第七周项目2-建立链队算法库
- 与人相加
- Linq 左连接 left join
- 检索
- 第9周实践项目4-广义表算法库及应用
- 第12周 项目3-图遍历算法实现
- Centos6.7 简单搭建dns服务器
- 第13周上机实践项目 - 算法验证(4)Floyd算法验证
- 如何在Visual Studio中开发自己的代码生成器插件
- Android导入项目时Android jar包丢失的解决
- 第9周实践项目3-稀疏矩阵的三元组表示的应用(3.2)
- 第13周 项目1、2- 验证算法
- 男人应该关注的是自己现在有多少钱,不应该关注自己以后有多少钱
- 使用TypeScript拓展你自己的VS Code!
- 第9周实践项目3-稀疏矩阵的三元组表示的实现(3.1)
- [Canvas绘图] 第01节 画布准备
- C语言结构体(struct)常见使用方法