css中的定位元素

static

默认属性,指定元素按照常规的文档内容流来进行定位。静态定位的元素不能使用top、left和类似其他属性的定位,欲对文档元素使用css定位技术,必先将其position属性设置为除此之外的其他3个属性值

absolute

该值定义元素是相对于包含的元素进行定位。相对于所有其他元素,绝对定位的元素是独立定位的,它不是静态定位的元素中文档流的一部分。它的定位要么是相对于最近的定位祖先元素 ,要么是相对于文档本身的

fixed

该值指定元素是相对于浏览器窗口进行定位的、固定定位的元素总是显示在那儿,不会随着文档其他部分而滚动。类似于绝对定位的元素,固定定位的元素和所有其他元素是独立的,他不是文档流的一部分。大多数现代浏览器支持固定定位

relative

当position设置为relative时,元素按照常规的文档流进行布局,它的定位相对于它文档流中的位置进行调整。系统保留着元素在正常文档流中的空间,不会因为要填充空间而将其各边合拢,也不会将元素从新的位置推开

第三维度:z-index

z-index

属性定义了第三个纬度,它允许指定元素的堆叠次序,并指示两个或多个重叠元素中的哪一个 应该绘制在其他的上面

z-index只对兄弟元素的应用堆叠效果

css定位示范:文本阴影

text-shadow属性在文本下产生阴影效果。许多现在的浏览器都支持该效果,但是 可以使用css定位属性实现类似的效果

css盒模型和定位细节

box-sizing:content-box   标准的盒模型

box-sizing:border-box   IE的盒模型,即width和height属性将包含边框和内边距。当想以百分比形式为元素设置总体尺寸,又想以像素单位指定边框的内边距时,边框盒模型特别有用

边框盒模型在未来css3中的一个可选方案时使用盒子尺寸的计算值

元素显示和可见性

visibility :属性为hidden时,该元素不显示,当其值设置为visible时,该元素显示

display : none时不显示

visibility属性设置为hidden时,元素不可见,但是在文档布局中仍然保留着空间

display设置为none时,在布局中不会给它分配空间,就当它重来都不存在

颜色、透明度和半透明度

background-color :  设置背景颜色

opacity:设置透明度,其属性值在0-1之间

部分可见:overflow和clip

overflow指定内容超出元素的大小该怎么显示

visible:默认值。如果需要,内容可以溢出并绘制在元素的边框外面

hidden: 裁剪掉和隐藏溢出的 内容

scoll:元素一直显示水平和垂直的滚动条。如果内容超出元素尺寸,允许用户通过滚动来查看额外的 内容。此属性负责文档在计算机屏幕中的显示

auto:滚动条只在内容超出元素尺寸时显示,不是一直显示的

clip属性指定了应该显示元素的哪个部分,它不管元素是否溢出,clip属性指定了元素的裁剪区域

style="clip:rect(0px 100px 100px 0px);"

rect(top right bottom  left)

例如用style属性指定只显示元素最左边100像素

style = "clip: rect(auto 100px auto auto);"

《Java权威指南》_java权威指南CSS篇相关推荐

  1. java初学者指南_Java初学者指南

    java初学者指南 Java编程的第一步. 对于Java中的入门教程,请参阅Sun的官方帮助这里 除了核心语言外,还有几种技术和API 介绍. 我们建议首先阅读涵盖 基础知识,并继续其余的教程. 我们 ...

  2. java weakhashmap用法_Java WeakHashMap指南

    概述 在这篇文章中,我们将探索 java.util 包中的WeakHashMap. 为了理解数据结构,我们将在这里使用它来推出一个简单的缓存实现.但是,请记住,这是为了了解地图的工作原理,并且创建自己 ...

  3. java response方法_Java学习之Response篇

    Java学习之Response篇 0x00 前言 续上篇文章内容,这篇本章来更新Response. 0x01 Response 常用方法: setStatus(int sc) : 设置响应状态码 se ...

  4. java concurrentmap原理_Java集合番外篇 -- ConcurrentHashMap底层实现和原理

    概述 距离上一次集合篇结束已经过了好久了, 之前说要写一下番外,但是太忙了,总也找不出相对松散的时间,也有点静不下心来,最近花了点时间,于是便有了这篇博客. 在开始之前先介绍一个算法, 这个算法和Co ...

  5. java梅森素数_JAVA基础 第三篇:梅森数、梅森素数、伪素数——素数与指数的完美结合与进阶...

    在前面的章节中,我们分别讨论了质数和指数,今天我们不做其他的,仅仅将它们进行整合一下,为什么呢?因为在数学领域,有一种特殊的正整数,形如:2^p - 1,其中指数p为质数,这种数字被称为梅森数,其中的 ...

  6. java arraylist 初始化_Java面试整理-基础篇8.集合1

    1.Java中常见的集合及其关系? 2.ArrayList.LinkedList.Vector的区别? 1. LinkedList.ArrayList.Vector都是List接口的子类:Linked ...

  7. java怎么安装_Java桌面应用程序篇:发展历史以及程序的应用

    java桌面应用印象 因为桌面程序运行在宿主机器上, 所以比如你运行java桌面程序,必然要安装java虚拟机, 也就是相当于在操作系统上再加一层抽象. 这与直接调用api的桌面程序效率相比,或多或少 ...

  8. Oracle Java Mission Control:终极指南

    "我们喜欢关注Mikhail Vorontsov的博客,并获得他对Java Performance相关问题的看法. 我们曾多次被问到Takipi的Java错误分析与Java Mission ...

  9. java使用d3_[Java教程]一个初学者的指南,使用D3做数据绑定

    [Java教程]一个初学者的指南,使用D3做数据绑定 0 2016-07-03 13:00:09 一个初学者的指南,使用D3做数据绑定 D3.js 是个强大的数据可视化库,可以做出惊艳的图表.比如:气 ...

  10. Java High CPU故障排除指南–第1部分

    本文是该系列的第1部分,它将为您提供有关如何进行故障排除和识别Java高CPU问题根本原因的综合指南. 该指南也适用于独立的Java程序,但旨在帮助涉及Java EE企业日常生产支持的个人. 它还将包 ...

最新文章

  1. php5.3.3下安装ffmpeg
  2. Metasploit profiling工具的利用
  3. 浅谈React虚拟DOM
  4. tableau实战系列(二十八)-以可视化的方式打开关联分析算法购物篮分析(Market Basket Analysis)
  5. Paper:《First Order Motion Model for Image Animation》翻译与解读
  6. 路径问题(如何正确写出文件路径)
  7. 3dmax高版本转低版本插件_视频编辑干货资料:低版本打开高版本pr文件
  8. 打开eclipse出现Failed to load the JNI shared library “D:\java\jdk\bin\...\jre\bin\server\jvm.dll”如何解决?
  9. 电商库存详解:三层(销售层、调度层、仓库层)来看库存设计
  10. 新盲盒星球抽奖商城手机网站源码 随机开箱抢购
  11. 工信部副部长怀进鹏:信息产业呈现四大发展特点
  12. vspy如何在图形面板显示报文_Vspy工程之C Code Interface的使用(Vspy系列其三)
  13. 使用ffmpege转为mkv到mp4
  14. Microsoft visual Studio 2010 下 DirectX SDK 安装配置详细过程
  15. wepe装系统,u盘装系统
  16. VMware虚拟机XP系统安装
  17. Dubbo 常见的负载均衡(Load Balance)算法,一起学习一下吧~
  18. 微信小程序入门---01
  19. 感觉自己不会的东西太多了,不知道如何下手?
  20. 联想电脑一开机出现Checking Media Presence……

热门文章

  1. Typora安装 Pandoc实现导出功能
  2. 大宇《轩辕剑》20周年 新作云之遥
  3. AM5728高性能SOC,满足工业协议支持、大数据计算、实时控制等需求,适用于图像处理、电力协议管理
  4. 7、共享模式的文件服务器
  5. python序列类型映射_python学习笔记(基础:变量,序列,映射) | 学步园
  6. mysql基本50题_mysql-50题
  7. mysql32位的能装在64位的电脑上吗,32位处理器能装64位系统吗
  8. 数显之家快讯:【SHIO世硕心语】华为内部考核尺度爆光!
  9. Linux 系统调用 fork wait exec
  10. linux怎么创建牡蛎_牡蛎的意思