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中的位置决定.块级元素从上到下 ...
随机推荐
- 3 微信开发本地代理环境的搭建--实现将内网ip映射到外网
微信公众号的开发,要搭建网站,并且随时都有可能修改网站内容进行调试,这就需要临时外网能返回本地开发环境搭建的项目进行测试,即内网映射到公网,但是好多开发者没有自己的域名和服务器,这里我们先来搭建一个本 ...
- HDU 5405 Sometimes Naive 树链剖分+bit*****
Sometimes Naive Problem Description Rhason Cheung had a naive problem, and asked Teacher Mai for h ...
- 网络驱动移植之简述CS8900A网络芯片的基本原理
CS8900A数据手册:http://www.cirrus.com/cn/products/cs8900a.html 1.概述 CS8900A是CIRRUS LOGIC公司生产的低功耗.性能优越的16 ...
- CentOS 7下Keepalived + HAProxy 搭建配置详解
第一步:准备 1. 简介 本文搭建的是利用 Keepalived 实现 HAProxy 的热备方案,即两台主机上的 HAProxy 实例同时运行,其中全总较高的实例为 MASTER,MASTER出现异 ...
- 一步一步学Silverlight 2系列(2):基本控件
述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- aapt的常用命令
1. 列出apk包的内容 aapt l[ist] [-v] [-a] file.{zip,jar,apk} -v 以table形式列出来 -a 详细列出内容 例如:aapt l <你的apk文件 ...
- Redis in python, how do you close the connection?
down voteaccepted Just use redis.Redis. It uses a connection pool under the hood, so you don't have ...
- [学习笔记]dsu on a tree(如何远离线段树合并)
https://www.zybuluo.com/ysner/note/1318613 背景 这玩意来源于一种有局限性的算法. 有一种广为人知的,树上离线维护子树信息的做法. (可以参照luogu360 ...
- JavaScript实现对象的深度克隆及typeof和instanceof【简洁】【分享】
JavaScript实现对象的深度克隆 代码实现如下: <!DOCTYPE html> <html lang="en"> <head> < ...
- bzoj 2743: [HEOI2012]采花【树状数组】
离线,按照l排序 注意到在区间里出现两次的颜色才有贡献,所以记录一个ne[i]表示i后第一个和i同色的花,维护一个l,每次处理询问的时候l单调右移,树状数组维护,在ne[ne[i]]位置++,在ne[ ...