静态定位

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. js的一些工具类

    //写入cookie function setCookie(name, value) {     var Days = 30; //此 cookie 将被保存 30 天     var exp = n ...

  2. swift-UINavigationController纯代码自定义导航控制器及底部工具栏的使用

    step1:自定义一个类  NTViewController,该类继承UITabBarController: // // NTViewController.swift // Housekeeper / ...

  3. Laravel-Action 对代码的改造

    前言 以往写过俩篇文章[积德篇] 如何少写PHP "烂"代码 https://segmentfault.com/a/11...举枪消灭"烂代码"的实战案例 ht ...

  4. Eclipse集成Maven的Web工程demo(独立及Maven集成tomcat)

    用到的工具JDK1.8Eclipse Luna j2eeEclipse 集成的Mavetomcat7 (集成在xampp中的独立web服务器,或者通过Maven plugin集成web服务器) 步骤如 ...

  5. 【Codeforces 161D】Distance in Tree

    [链接] 我是链接,点我呀:) [题意] 问你一棵树上有多少条长度为k的路径 [题解] 树形dp 设 size[i]表示以节点i为根节点的子树的节点个数 dp[i][k]表示以i为根节点的子树里面距离 ...

  6. CODEVS3147 矩阵乘法2

    ...怎么优化都是90分,最后一个点一直T掉,有谁过了请告诉我. Program CODEVS3147; ; ..maxn,-..maxn] of longint; n,q,i,j,k,k1,k2,k ...

  7. Sunnypig闯三角关

    背景 贪玩的sunnypig请Charles为他打造一个奇幻世界,Charles欣然答应了.然而一向善于出难题的Charles是决不会轻易让sunnypig轻松拥有一个奇幻世界的,于是Charles在 ...

  8. (转)linux口令相关文件(/etc/passwd和/etc/shadow)

    在linux中,口令文件在/etc/passwd中,早期的这个文件直接存放加密后的password,前两位是"盐"值,是一个随机数.后面跟的是加密的password.为了安全,如今 ...

  9. MySql免安装版l配置方法

    初次接触mysql,折腾了一天,总是安装不成功,服务启动不了.后来从官网下载了ZIP Archive版,不用安装,直接把它解压到磁盘,做一些简单的配置就可以. 软件下载地址:http://dev.my ...

  10. 在CentOS 6 中安装 Apache,Mysql, PHP

    1.安装Apache 在终端中输入以下的命令就能够安装Apache了: sudo yum install httpd sudo的意思是用root用户做什么操作.要点击y就确认下载安装了,非常方便. 然 ...