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 : 无特殊定位,对象处于正常文档流.其 ...
随机推荐
- 基于C++11的线程池,简洁且可以带任意多的参数
咳咳.C++11 加入了线程库,从此告别了标准库不支持并发的历史.然而 c++ 对于多线程的支持还是比较低级,稍微高级一点的用法都需要自己去实现,譬如线程池.信号量等.线程池(thread pool) ...
- OC 常用方法记录
1.排序 给数组排序 按照字母的升序 //对key按字母升序排序 NSArray *sortedArray = [keys sortedArrayUsingComparator:^NSComparis ...
- iOS中的三大定时器
iOS开发中定时器经常会用到,iOS中常用的定时器有三种,分别是NSTime,CADisplayLink和GCD. NSTimer 方式1 // 创建定时器 NSTimer *timer = [NST ...
- C语言 extern4 全局数组
headB.h中: #ifndef headB_H #define headB_H ; ]={,,,,}; #endif .c文件中: #include "headB.h" #in ...
- 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备!
作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...
- jquery实现横向导航
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- Matlab命令行编译运行HelloWorld
Matlab安装完成后用记事本写一个文件HelloWorld.m内容如下: function HelloWorld() disp('Hello,World!'); end 保存后在命令行中切到Hell ...
- react-router 中的history(react中关于后退键的处理用的到)
react-router 中的history react-router 是建立在history之上的:我们来谈谈这个history吧. github: mjackson/history history ...
- 【转】构建基于CXF的WebService服务
构建基于CXF的WebService服务 Apache CXF = Celtix+ XFire,开始叫 Apache CeltiXfire,后来更名为 Apache CXF 了,以下简称为 CXF.C ...
- .Net小白的第一篇博客
2016年8月8日,经过了一周的纠结.我决定放弃了,原来学了六年并且工作两年的学前教育,走上了开发的道路.我认为生活就应该这样,就应该充满挑战,而不是每天在重复相同的工作!作为插班生的我,于2016年 ...