静态定位

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. pyhton 网络爬取软考题库保存text

    #-*-coding:utf-8-*-#参考文档#https://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html#find-al ...

  2. eclipse 快捷键及使用技巧

    一.程序的编译和运行的环境配置(一般不改) window -- Preferences -- Java 编译环境:Compiler 默认选中的就是最高版本. 运行环境:Installed JREs 默 ...

  3. Error creating bean with name 'entityManagerFactory' defined in class path resource [org/springframework/boot/autoconfigure/orm/jpa/HibernateJpaAutoConfiguration.class]: Invocation of init method fail

    SpringBoot 单元测试报错 @RunWith(SpringRunner.class) @SpringBootTest public class ProductCategoryRepositor ...

  4. const关键字作用

    const int a; int const a; const int *a; int * const a; int const * a const; /******/ 前两个的作用是一样,a是一个常 ...

  5. 实战体验几种MySQLCluster方案

    来源:keepLearning的专栏      http://www.2cto.com/database/201504/387166.html 1.背景 MySQL的cluster方案有很多官方和第三 ...

  6. MySQL:Useful Commands

    MySQL Useful Commands Start/Stop/Restart MySQL On Linux start/stop/restart from the command line: /e ...

  7. HDU 4516

    此题不难,但我就是RE,搞不懂啊...郁闷. 说下基本算法吧,只要留意到要分解的因式是(x+ai)..的形式,x前是系数为1的,而且,它们的绝对值在1000以内,于是,好办了.只要枚举(x+k)中的k ...

  8. canvas学习相关的一点东西

    <!DOCTYPE html> <html> <head> <style> canvas { border: 1px dashed black; } & ...

  9. Atom编辑器折腾记_(15)JS代码片段补全(插件:javascript-snippets)

    题外话 这款插件就比較重量级了-.用熟悉了写原生JS的效率要提升非常多--并且,不仅支持JS还包括了nodejs snippet javascript-snippets 插件作者: zenorocha ...

  10. GDUT Krito的讨伐(bfs&amp;&amp;优先队列)

    题意 Description Krito最终干掉了99层的boss,来到了第100层. 第100层能够表示成一颗树.这棵树有n个节点(编号从0到n-1),树上每个节点可能有非常多仅仅怪物. Krito ...