CSS定位内容
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为
一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行
内元素”,这是因为它们的内容显示在行中,即“行内框”。
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中
的元素的位置由元素在 (X)HTML 中的位置决定。
CSS position 属性:
static relative absolute fixed
css相对定位
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相
对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为
元素的位置相对于它在普通流中的位置。
css浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个
浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得
就像浮动框不存在一样。
inline:块级元素转行内元素
block:1、隐藏元素显示2、转块级元素
inline-block:两者都包含
CSS定位内容的更多相关文章
- CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
- CSS定位(CSS定位概述、相对定位、绝对定位、浮动)
CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...
- CSS定位(postion)和移动(float)
5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...
- CSS定位:几种类型的position定位的元素
当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...
- UI自动化测试(二)浏览器操作及对元素的定位方法(xpath定位和css定位详解)
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
- 《css定位 position》课程笔记
这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...
- 【CSS】 CSS 定位
css 定位和浮动 *******本章大量内容copy自w3school********* 定位对于html界面还是很重要的,因为定位会直接影响到用户的视图.对于css而言,定位也比较灵活. 浮动是一 ...
- CSS 定位 (Positioning) 实例
CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...
- CSS学习总结3:CSS定位
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
随机推荐
- 阿里云cenos 6.5 模板上安装 docker
本章将介绍在阿里云的 Centos6.5 模板上安装 Docker 以及在 Ubuntu 14.04 模板上安装 Docker 的过程 Centos 6.5 模板上使用Docker 首先,通过 ssh ...
- What's the difference between jquery.js and jquery.min.js?
They are both the same functionally but the .min one has all unnecessary characters removed in order ...
- order by 特殊排序技巧
if object_id('tempdb..#temp') is not null drop table #temp ), col2 )) insert into #temp ' ' ' ' go - ...
- eclipse相关技巧总结
原文:http://licoolxue.iteye.com/blog/619983 eclipse作为被广泛使用的ide,基本的使用技巧每个人都会一些,然而可能并未充分发掘其潜力,也许我们并没有真正认 ...
- aria2 for mac
本文是在安装好homebrew前提下 brew install aria2 然后配置参数 cd ~ mkdir .aria2 cd .aria2 vim aria2.conf 以下配置粘贴进去,红色需 ...
- I.MX6 Android stlport 使用
/****************************************************************** * I.MX6 Android stlport 使用 * 说明: ...
- URAL2104. Game with a Strip(博弈)
There is a strip 1 × n with two sides. Each square of the strip (their total amount is 2n, n squares ...
- AutoIT: 下载文件函数
Func down() $Size=InetGetSize($a[$j][]);获得FTP上的文件的大小 InetGet($a[$j][],$a[$j][],,);下载 ProgressOn(],), ...
- eclipse下清除项目的svn信息
点击项目右键->Team->Disconnect 选择第一个即可
- SQL Server 语法注意
1.order by select a1,a1 from temp order by a1 此语句在高版本中执行提示a1列名不明确,在低版本中执行成功!