CSS的常用属性(三)
静态定位
position: static (默认) 标准流
绝对定位
position: absolute
特点:
- 元素使用绝对定位之后,不占据原来的位置(脱标)
- 元素使用绝对定位,位置是从浏览器出发
- 嵌套的盒子,父盒子没有使用定位,子盒子使用绝对定位,子盒子位置是从浏览器出发
- 嵌套的盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素出发
- 行内元素使用绝对定位,转化成行内块元素
注意: 使用绝对定位的元素可以覆盖到其他元素上面,使用z-index属性来控制堆放次序
相对定位
position: relative
特点:
- 使用相对定位,位置从自身出发
- 还占据原来的位置
- 行内元素使用相对定位,不能转成行内块元素
补充: 常用的定位方式为子绝父相(子元素绝对定位,父元素相对定位)
固定定位
position: fixed
特点:
- 位置从浏览器出发
- 固定定位之后,不占据原来的位置(脱标)
- 元素使用固定定位,会转化成行内块元素
隐藏元素
overflow: hidden 溢出隐藏
visibility: hidden 隐藏元素(隐藏之后还占据原来位置)
display: none 隐藏元素(隐藏之后不占据原来的位置)
补充:内容移除:text-indent: -5000em 或者 将元素高度设置为0,使用内边距将盒子撑开,给盒子使用overflow: hidden
元素垂直对齐方式
vertical-align: baseline 设置元素的垂直对齐方式
baseline(默认) 元素放置在父元素的基线上
text-top 把元素的顶端与父元素字体的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐
middle 把此元素放置在父元素的中部
CSS的常用属性(三)的更多相关文章
- CSS样式常用属性整理
web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...
- CSS的常用属性
刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...
- CSS 背景常用属性
CSS 背景常用属性 background-color 这个属性过于简单, 以下写法均可 background-color:red; background-color:rgb(0,0,255); ba ...
- css+div常用属性备忘录
学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...
- CSS HTML 常用属性备忘录
学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...
- css 样式常用属性
一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border 附:< cs ...
- css之常用属性
背景属性: background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动 值: scroll 默认值.背景图像会随着页面其余部分的滚动而移动. fixed 当页面的其余部 ...
- CSS的常用属性(一)
文本属性 font-size: 16px 文字大小 font-weight: 700 文字粗细 值从100-900 (值为700看上去加粗了) 不推荐使用font-weight: bold font- ...
- CSS的常用属性(二)
盒子模型之边框 border-(top/bottom/left/right)-style: solid 边框的风格 如(solid 实线,dotted 点线,dashed 虚线) border-top ...
随机推荐
- java ArrayList去重复值
public static List removeDuplicateWithOrder(List list) { Set set = new HashSet(); List newList = new ...
- 第一节:numpy之ndarray对象数据类型及属性
- Redis学习总结(1)——Redis内存数据库详细教程
1.redis是什么 2.redis的作者何许人也 3.谁在使用redis 4.学会安装redis 5.学会启动redis 6.使用redis客户端 7.redis数据结构 – 简介 8.redis数 ...
- grafana简介
grafana一般是和一些时间序列数据库进行配合来展示数据的,例如:Graphite.OpenTSDB.InfluxDB等 grafana是用于可视化大型测量数据的开源程序,他提供了强大和优雅的方式去 ...
- Boolean Expressions
Boolean Expressions Time Limit: 1000MS Memory Limit: 30000K Description The objective of the ...
- oracle数据库审计
Oracle使用大量不同的审计方法来监控使用何种权限,以及访问哪些对象.审计不会防止使用这些权限,但可以提供有用的信息,用于揭示权限的滥用和误用. 下表中总结了Oracle数据库中不同类型的审计. 审 ...
- nyoj_19_擅长排列的小明_201403011600
擅长排列的小明时间限制:1000 ms | 内存限制:65535 KB 难度:4描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想为难他, ...
- MFC 小知识总结四
1 PlaySound 播放WAV格式的音乐 This function plays a sound specified by a file name, resource, or system ev ...
- Window下UDP(socket)接和收数据案例
配置QT的环境变量,这台电脑à属性à高级系统设置à高级à环境变量à系统变量àpathàC:\Qt\Qt5.3.0\5.3\mingw482_32\bin;C:\Qt\Qt5.3.0\Tools\ ...
- [Fri 26 Jun 2015 ~ Thu 2 Jul 2015] Deep Learning in arxiv
Natural Neural Networks Google DeepMind又一神作 Projected Natural Gradient Descent algorithm (PRONG) bet ...