静态定位

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. POJ1161——The Suspects

    POJ1161——The Suspects   The Suspects Time Limit: 1000MS   Memory Limit: 20000K Total Submissions: 48 ...

  2. JAVA经典题--计算一个字符串中每个字符出现的次数

    需求:  计算一个字符串中每个字符出现的次数 思路: 通过toCharArray()拿到一个字符数组--> 遍历数组,将数组元素作为key,数值1作为value存入map容器--> 如果k ...

  3. 【[Offer收割]编程练习赛14 D】剑刃风暴(半径为R的圆能够覆盖的平面上最多点数目模板)

    [题目链接]:http://hihocoder.com/problemset/problem/1508 [题意] [题解] 求一个半径为R的圆能够覆盖的平面上的n个点中最多的点数; O(N2log2N ...

  4. Beetl学习总结(3)——高级功能

    3.1. 配置GroupTemplate Beetl建议通过配置文件配置配置GroupTemplate,主要考虑到未来可能IDE插件会支持Beetl模板,模板的属性,和函数等如果能通过配置文件获取,将 ...

  5. .Net操作Excel —— NPOI

    近期的两个项目都有关于NPOI的功能,经过了一点学习,自己也摸索了一会,感觉还有点意思.现在将部分代码分享一下.一部分是C#代码,一部分是VB.Net的,懒得修改了,基本上都是从项目文件中copy出来 ...

  6. 草草弄完SPRING WEB-FLOW

    明天白天再慢慢看原理吧. 今天先把代码实习一次. 作作截图存照.

  7. Aggressive Cows 二分

    Farmer John has built a new long barn, with N (2 <= N <= 100,000) stalls. The stalls are locat ...

  8. 开源 免费 java CMS - FreeCMS1.8 留言管理

    项目地址:http://code.google.com/p/freecms/ 留言管理 管理当前管理网站的留言数据. 1. 回复留言 选择须要回复的留言.然后点击"回复". 注意: ...

  9. 大数据处理之道(实验方法&lt;二&gt;)

    一:交叉验证(crossvalidation)(附实验的三种方法)方法简单介绍   (1) 定义:交叉验证(Cross-validation)主要用于建模应用中,比如PCR(Principal Com ...

  10. android 5.0新特性学习总结之下拉刷新(一)

    android 5.0 后google最终在 support v4 包下 添加了下拉刷新的控件 项目地址: https://github.com/stormzhang/SwipeRefreshLayo ...