静态定位

position: static (默认) 标准流

绝对定位

position: absolute

特点:

  1. 元素使用绝对定位之后,不占据原来的位置(脱标)
  2. 元素使用绝对定位,位置是从浏览器出发
  3. 嵌套的盒子,父盒子没有使用定位,子盒子使用绝对定位,子盒子位置是从浏览器出发
  4. 嵌套的盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素出发
  5. 行内元素使用绝对定位,转化成行内块元素

注意: 使用绝对定位的元素可以覆盖到其他元素上面,使用z-index属性来控制堆放次序

相对定位

position: relative

特点:

  1. 使用相对定位,位置从自身出发
  2. 还占据原来的位置
  3. 行内元素使用相对定位,不能转成行内块元素

补充: 常用的定位方式为子绝父相(子元素绝对定位,父元素相对定位)

固定定位

position: fixed

特点:

  1. 位置从浏览器出发
  2. 固定定位之后,不占据原来的位置(脱标)
  3. 元素使用固定定位,会转化成行内块元素

隐藏元素

overflow: hidden 溢出隐藏

visibility: hidden 隐藏元素(隐藏之后还占据原来位置)

display: none 隐藏元素(隐藏之后不占据原来的位置)

补充:内容移除:text-indent: -5000em 或者 将元素高度设置为0,使用内边距将盒子撑开,给盒子使用overflow: hidden

元素垂直对齐方式

vertical-align: baseline 设置元素的垂直对齐方式

baseline(默认)  元素放置在父元素的基线上

text-top  把元素的顶端与父元素字体的顶端对齐

text-bottom  把元素的底端与父元素字体的底端对齐

middle  把此元素放置在父元素的中部

CSS的常用属性(三)的更多相关文章

  1. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  2. CSS的常用属性

    刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...

  3. CSS 背景常用属性

    CSS 背景常用属性 background-color 这个属性过于简单, 以下写法均可 background-color:red; background-color:rgb(0,0,255); ba ...

  4. css+div常用属性备忘录

    学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...

  5. CSS HTML 常用属性备忘录

    学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...

  6. css 样式常用属性

    一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border 附:< cs ...

  7. css之常用属性

    背景属性: background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动 值: scroll 默认值.背景图像会随着页面其余部分的滚动而移动. fixed 当页面的其余部 ...

  8. CSS的常用属性(一)

    文本属性 font-size: 16px 文字大小 font-weight: 700 文字粗细 值从100-900 (值为700看上去加粗了) 不推荐使用font-weight: bold font- ...

  9. CSS的常用属性(二)

    盒子模型之边框 border-(top/bottom/left/right)-style: solid 边框的风格 如(solid 实线,dotted 点线,dashed 虚线) border-top ...

随机推荐

  1. lua_note_01_lua介绍

    1. lua 1. lua 1.1. lua介绍 1.2. Lua 特性 1.3. 特点 1.4. Lua 应用场景 1.5. 环境搭建 1.6. VS lua 1.1. lua介绍 Lua 是一种轻 ...

  2. 快速搭建vue2.0+boostrap项目

    一.Vue CLI初始化Vue项目 全局安装vue cli npm install --global vue-cli 创建一个基于 webpack 模板的新项目 vue init webpack my ...

  3. 洛谷 1003 NOIP2011 D1T1 铺地毯

    [题解] 因为只询问一个点,所以记录地毯信息,倒着找第一个符合条件的地毯就是在最上面的. #include<cstdio> #include<algorithm> #defin ...

  4. spring配置Converter、Formatter日期转换器

    最近有点恶补spring的嫌疑,然后学了一点知识点纪录在此. 往往在项目中我们会遇到前端页面输入一个日期类型的字符串传递到后端后我们需要去做转换.甚至在传递的过程中就会报错. Spring有一个一劳永 ...

  5. [luoguP3275] [SCOI2011]糖果(差分约束)

    传送门 差分约束裸题 但是坑! 有一个点是长为10W的链,需要逆序加边才能过(真是玄学) 还有各种坑爹数据 开longlong ——代码 #include <cstdio> #includ ...

  6. 关于新世界的大门(新博客地址:BBBob.cf)

    更新:BBBob.cf 这个域名已经不用了(但是依旧可以访问),永久域名改为了BBBob.win 新博客地址为BBBob.cf,以后的博客都会在新博客更新,当然在新博客上我也会写得更用心些,不再像这里 ...

  7. ArcEngine控制台应用程序

    转自wbaolong原文 ArcEngine控制台应用程序 控制台应用程序相比其他应用程序,更加简单,简化了许多冗余,可以让我们更加关注于本质的东西. 现在让我们看一看ArcGIS Engine的控制 ...

  8. UVA 11825 状态压缩DP+子集思想

    很明显的状态压缩思想了.把全集分组,枚举每个集合的子集,看一个子集是否能覆盖所有的点,若能,则f[s]=max(f[s],f[s^s0]+1).即与差集+1比较. 这种枚举集合的思想还是第一次遇到,果 ...

  9. 《Java课程实习》日志(周二)

    import java.awt.EventQueue; import javax.imageio.ImageIO; import javax.swing.JFrame; import javax.sw ...

  10. iOS开发一行代码系列:一行搞定数据库

    原理 iOS 和 SQL的相应关系 Model类结构      =>    SQL表结构 Model实例       =>  SQL表中的一行 Model实例的属性   =>   S ...