dispaly属性,position属性
position:absolute;绝对定位相对于父元素(父元素设为relative)
position:relative;相对定位相对于自己
position:fixed;固定定位相对于浏览器
display:inline;行内元素,不换行,text-align:center不起作用
display:block;块级元素,换行,能设置宽高
display:inline-block;能设置宽高,不换行,text-align:center起作用
注意,如果父元素不设置高度的话,子元素浮动,或者绝对定位的话,撑不开父元素的高度,最终父元素的高度为0
自适应居中
<div class="title">
<span class="message">等待钣金</span>
<span class="num">12</span>
</div>
.content .title span{position: relative;top:12px;height:15px;line-height: 15px;}
.content .title span:last-child{display:inline-block;font-size: 14px;color:white;border-radius: 15px; background-color:#c19b74;width:27px;} 上下左右自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test{
position: relative;
width:100px;
height:100px;
background: green;
}
img{
position: absolute;
margin-top: auto;
margin-bottom : auto;
top: 0;
bottom: 0;
height:100%;
}
</style>
</head>
<body>
<div id="test">
<img>
</div>
</body>
</html>
只是对img有用
dispaly属性,position属性的更多相关文章
- CSS传统布局之display属性+float属性+position属性
这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- Position属性四个值:static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)
写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- DIV的Position属性和DIV嵌套DIV
1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...
- position属性的四个value
As we all know, position属性有四个值,分别为 relative,fixed,absolute, static. 1,relative相对定位 (不会脱离文档流) 在一个相对定位 ...
- 几种Position属性的用法
几种Position常见的属性就是一下几种: 1.static:默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.re ...
- css中关于position属性的探究(原创)
关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
随机推荐
- [Bullet3]三种碰撞检测及实现
官方文档:http://bulletphysics.org 开源代码:https://github.com/bulletphysics/bullet3/releases API文档:http://bu ...
- SwaggerUI ASP.Net WebAPI2
目前在用ASP.NET的 WebAPI2来做后台接口开发,在与前台做测试的时候,总是需要发送一个demo给他,但是这样很麻烦的,他还有可能记不住. 然后就想到SwaggerUI 生成测试文档. 话不多 ...
- RDLC系列(一)ASP.NET RDLC 报表自定义数据源
最近一段时间开发ERP系统中要用到不少报表打印,在网上找了一圈发现想些好用的报表控件大部分要收费,一些面免费要么不好用要么IE8不兼容,最后还是用了微软自带的RDLC报表,把自己遇到的坑和技巧整理分享 ...
- Python从入门到放弃之迭代器
迭代器是Python2.1中新加入的接口(PEP 234),说明如下: The iterator provides a 'get next value' operation that produces ...
- Angular企业级开发(8)-控制器的作用域
scope概念 scope(作用域)是视图和控制器之间的桥梁,scope本身是一个对象,有方法和属性.scope可以应用在视图和控制器上. scope简单示例 <!DOCTYPE html> ...
- 【转】Java中关于异常处理的十个最佳实践
原文地址:http://www.searchsoa.com.cn/showcontent_71960.htm 导读:异常处理是书写强健Java应用的一个重要部分,Java许你创建新的异常,并通过使用 ...
- Struts2学习第一天——struts2基本流程与配置
struts2框架 什么是框架,框架有什么用? 框架 是 实现部分功能的代码 (半成品),使用框架简化企业级软件开发 ,提高开发效率. 学习框架 ,清楚的知道框架能做什么? 还有哪些工作需要自己编码实 ...
- 【开源.NET】轻量级内容管理框架Grissom.CMS(第三篇解析配置文件和数据以转换成 sql)
该篇是 Grissom.CMS 框架系列文章的第三篇, 主要介绍框架用到的核心库 EasyJsonToSql, 把标准的配置文件和数据结构解析成可执行的 sql. 该框架能实现自动化增删改查得益于 E ...
- ThinkPHP模板的知识(比较全的知识)
php框架 一.真实项目开发步骤: 多人同时开发项目,协作开发项目.分工合理.效率有提高(代码风格不一样.分工不好) 测试阶段 上线运行 对项目进行维护.修改.升级(单个人维护项目,十分困难,代码风格 ...
- asp.net 后台任务作业框架收集
收集几个可以用于 asp.net 的后台任务工具库并简单介绍. hangfire.io 支持 单次任务(Fire-and-forget),延时任务(Delayed),重复任务(Recurring ), ...