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中的位置决定.块级元素从上到下 ...
随机推荐
- 初探active mq
mq(message queue),即消息队列,目前比较流行消息队列是active mq 和kafka.本文介绍如何简单的使用active mq. ActiveMQ官网下载地址:http://acti ...
- IDEA--java版本修改(jdk1.8改成jdk1.7)
转载:https://blog.csdn.net/huyishero/article/details/61916516
- Android开发系列(二十七):使用ProgressDialog创建进度对话框
进度对话框在寻常的应用中非经常见,比方下载的时候,打开页面的时候.转移文件等等.有环形的.有长条形的. 基本就这两种 创建进度对话框的两种方式: 1.创建ProgressDialog实例,然后调用Pr ...
- 2016/3/13 MySQL 增删查改 CRUD 用代码实现
用代码实现数据库数据输入 T-SQL语句 查询语句分几块 ①创建表 create table Car (Code varchar(50) primary key, #primary key 主键 定义 ...
- mongo14-----group,aggregate,mapReduce
group,aggregate,mapReduce 分组统计: group() 简单聚合: aggregate() 强大统计: mapReduce() db.collection.group(docu ...
- java的Date日期使用
import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; imp ...
- HDU4027 Can you answer these queries? —— 线段树 区间修改
题目链接:https://vjudge.net/problem/HDU-4027 A lot of battleships of evil are arranged in a line before ...
- 并不对劲的LCT
LCT,是连猫树(link-cat-tree)的缩写.它是树链剖分和splay的结合版本. 由于有很多关于LCT的文章以及这并不是对劲的文章,并不对劲的人并不打算讲得太详细. 推荐:详细的LCT-&g ...
- hdu 5534
题目描述:n个节点度数之和为n-2,每个节点预分配了1个度,任意分配度数是否有可能形成树? 从1到n节点,考虑树的形状,考虑分配给当前节点i的度数,并且注意到当前节点的度数不会影响其他节点(之前或者之 ...
- bzoj3696
3696: 化合物 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 245 Solved: 131[Submit][Status][Discuss] ...