静态定位

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

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  2. python--(socket与粘包解决方案)

    python--(socket与粘包解决方案) 一.socket: Socket 是任何一种计算机网络通讯中最基础的内容.例如当你在浏览器地址栏中输入 http://www.cnblogs.com/ ...

  3. copy contents of file with variable number in Matlab

    input : transient.case output: transient_1.case, transient_2.case, transient_3.case ... ************ ...

  4. 在docker上构建tomcat容器

    1.查看docker上的镜像 [root@holly ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE mysql 5.6 73829d7b ...

  5. ThinkPHP5 自定义异常

    1.配置config.php 自定义异常路径: // 默认AJAX 数据返回格式,可选json xml ...'default_ajax_return' => 'json', 'exceptio ...

  6. What you can talk

    data buffer who locked the account hash join cost memory and nested loop do not. How to make it hash ...

  7. poj 3468 A Simple Problem with Integers(线段树+区间更新+区间求和)

    题目链接:id=3468http://">http://poj.org/problem? id=3468 A Simple Problem with Integers Time Lim ...

  8. linux c编程訪问数据库

    源代码例如以下: #include <stdio.h> #include <stdlib.h> #include <mysql/mysql.h> int main( ...

  9. 熊猫猪新系统測试之中的一个:Windows 10 技术预览版

    话说本猫不用windows非常多年了呀! 只是看到微软最新的Windows10还是手痒了.想安装体验一把. 于是第一时间下载,并做成usb引导安装镜像,在08年的老台式机上安装尝鲜鸟.下载ISO和安装 ...

  10. Android自己定义组件系列【1】——自己定义View及ViewGroup

    View类是ViewGroup的父类,ViewGroup具有View的全部特性.ViewGroup主要用来充当View的容器.将当中的View作为自己孩子,并对其进行管理.当然孩子也能够是ViewGr ...