1、DIV-Padding理解:
一直以来对div中的padding属性,一直不理解,使用最多的也就是margin,padding是div的内空间的相对距离,margin是div的外部相对位置,如果用一个箱子来标识div,那么padding就是从箱子的边缘到箱子内部需要隔离的距离,而margin这是箱子的边缘到箱子的外部所需要间隔的距离;

2、图片的相对位置,比如原理图片中嵌入一个新的图片,如要实现下图所示效果:

在普通图片上面,再叠加一个图片(预订),那么这个就需要页面图片的叠加,html5代码如下:

<div class="divlogpage">
<img height="130" width="100%" src="data:image/loginback.png"/>
<div class="divlogpageinfo">
<p>
<label for="username">账号:</label>
<input type="text" id="username" name="username" value="" placeholder="用户名" required/>
</p>
<hr/>
<p>
<label for="passwd">密码:</label>
<input type="password" id="passwd" name="passwd" value="" placeholder="密码" required/>
</p>
</div>
</div>

css代码如下:

.divlogpage{position:relative; margin:10px;height:150px;}
.divlogpage img{ position:absolute; z-index:-1;}
.divlogpageinfo {position:absolute; z-index:; margin:10px; width:92%; font-size:18px; font-weight:bold;}

主要还是通过z-index和路径的相对和绝对处理的;

css局部概念的理解:的更多相关文章

  1. CSS核心概念之盒子模型

    盒子模型(Box Model) 关于更多CSS核心概念的文章请关注GitHub--CSS核心概念. 当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basi ...

  2. atitit.闭包的概念与理解attilax总结v2 qb18.doc

    atitit.闭包的概念与理解attilax总结v2 qb18.doc 1.1. 闭包(Closure)是词法闭包(Lexical Closure)的简称,是引用了自由变量的函数.1 2. #---- ...

  3. JAVA中用堆和栈的概念来理解equals() "=="和hashcode()

    在学习java基本数据类型和复杂数据类型的时候,特别是equals()"=="和hashcode()部分时,不是很懂,也停留了很长时间,最后终于有点眉目了. 要理解equals() ...

  4. CSS设计指南之理解盒子模型

    原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...

  5. CSS伪类的理解

    因为之前一直对css伪类没有过多的了解,在网上看到一段css代码,不能理解 a:hover span.title{ color:red; ......... } 现通过查询css手册,其实css伪类只 ...

  6. 对MP4一些概念的理解

    首先,对视频一些基本概念的理解: I帧:i帧又称为内编码帧,是一种自带全部信息的独立帧,可独立解码,可理解为一张静态图片,视频序列中的第一个帧始终是i帧,因为它是关键帧. P帧:P帧又称为帧间预测编码 ...

  7. 【C/C++】对于可重入、线程安全、异步信号安全几个概念的理解

    由于前段时间,程序偶尔异常挂起不工作,检查后发现时死锁了,原因就是:在信号处理函数里面调用了fprintf. printf等io函数是需要对输出缓冲区加锁,这类函数对本身是线程安全的,但是对信号处理函 ...

  8. css基本概念与css核心语法介绍

    css基本概念 css是什么?不需要了解太多文字类介绍,记住css是层叠样式表,HTML是页面结构,css负责页面样式,javascrt负责静态页面的交互.CSS 能够对网页中元素位置的排版进行像素级 ...

  9. k8s中几个基本概念的理解,pod,service,deployment,ingress的使用场景

    k8s 总体概览 前言 Pod 副本控制器(Replication Controller,RC) 副本集(Replica Set,RS) 部署(Deployment) 服务(Service) ingr ...

随机推荐

  1. Virtualbox虚拟机安装Ubuntu图文版

    这篇文章给大家介绍一下如何在Windows系统下的Virtual Box虚拟机软件中安装Ubuntu系统. 适用环境:Windows系统作为物理机,在此平台上搭建一个Virtual Box虚拟平台,在 ...

  2. 在CentOS 7上利用systemctl添加自定义系统服务

    每一个服务以.service结尾,一般会分为3部分:[Unit].[Service]和[Install],具体内容如下: [Unit]Description=*****After=network.ta ...

  3. linux 优化&安全运维&黑客攻防

    优化: 可删除用户:adm,lp,sync,shutdown,halt,news,uucp,operator,games,gopher.   :userdel games 可删除组:adm,lp,ne ...

  4. C#设计模式(3):抽象工厂模式(Abstract Factory)(转载)

    概述 在软件系统中,经常面临着“一系列相互依赖的对象”的创建工作:同时由于需求的变化,往往存在着更多系列对象的创建工作.如何应对这种变化?如何绕过常规的对象的创建方法(new),提供一种“封装机制”来 ...

  5. c# 解析JSON的几种办法(转载)

    对比 .NET下几种常见的解析JSON方法 主要类 命名空间 限制 内建LINQ支持 DataContractJsonSerializer System.Runtime.Serialization.J ...

  6. oracle 编译中一个关于clntsh 库的一个 帖子 ,收藏!

    oracle 编译中一个关于clntsh 库的一个 帖子 ,收藏! ------------------------------------------------------------------ ...

  7. C#多线程学习 之 线程池[ThreadPool](转)

    在多线程的程序中,经常会出现两种情况: 一种情况:   应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然后才能给予响应                   这一般使用ThreadPo ...

  8. JavaScript简易缩放程序

    一.前言: 上一篇随笔中已经把拖动程序完成了,这篇主要把缩放程序完成,后面合并后可以做成一个图片裁剪的功能 简易缩放程序DEMO:http://jsfiddle.net/UN99R/ 限制缩放程序DE ...

  9. 微信5.4你所不知道的事 X5浏览引擎提速50%-80%

    微信5.4新增包括搜索公众号.识别图中二维码.面对面收钱等功能,但是你可知道新版微信X5浏览引擎提速了,提升50%-80%的网络传输速度及相同比例流量节省? 从X5浏览引擎开发人员得知,X5浏览技术基 ...

  10. Marriage Ceremonies(状态压缩dp)

     Marriage Ceremonies Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu ...