css局部概念的理解:

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

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

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

<div class="divlogpage">
            <img height="130" width="100%"  src="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:2; margin:10px; width:92%; font-size:18px; font-weight:bold;}

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

时间: 2024-08-26 12:40:00

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

关于”机器学习:概念与理解“系列

"机器学习:概念到理解"系列,我本着开放与共享(open and share)的精神撰写,目的是让更多的人了解机器学习的概念,理解其原理,学会应用.现在网上各种技术类文章很多,不乏大牛的精辟见解,但也有很多滥竽充数.误导读者的.这个系列对教课书籍和网络资源进行汇总.理解与整理,力求一击中的,通俗易懂.机器学习很难,是因为她有很扎实的理论基础,复杂的公式推导:机器学习也很简单,是因为对她不甚了解的人也可以轻易使用.我希望好好地梳理一些基础方法模型,输出一些真正有长期参考价值的内容,让更多

机器学习:概念与理解(二):回归、稀疏与正则约束 ridge regression,Lasso

"机器学习:概念与理解"系列,我本着开放与共享(open and share)的精神撰写,目的是让更多的人了解机器学习的概念,理解其原理,学会应用.现在网上各种技术类文章很多,不乏大牛的精辟见解,但也有很多滥竽充数.误导读者的.这个系列对教课书籍和网络资源进行汇总.理解与整理,力求一击中的,通俗易懂.机器学习很难,是因为她有很扎实的理论基础,复杂的公式推导:机器学习也很简单,是因为对她不甚了解的人也可以轻易使用.我希望好好地梳理一些基础方法模型,输出一些真正有长期参考价值的内容,让更多

JAVA中用堆和栈的概念来理解equals() &quot;==&quot;和hashcode()

在学习java基本数据类型和复杂数据类型的时候,特别是equals()"=="和hashcode()部分时,不是很懂,也停留了很长时间,最后终于有点眉目了. 要理解equals()"=="和hashcode(),最好先了解Java内存中堆和栈的知识: 下面一段是参考自http://www.cnblogs.com/whgw/archive/2011/09/29/2194997.html 大家也可点进去查看更详细的解释. Java 中的堆和栈  Java把内存划分成两种

“封装”概念 的理解(2013-08-27 16:22:16)

在程序上,隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读和修改的访问级别: 将抽象得到的数据和行为(或功能)相结合,形成一个有机的整体, 也就是将数据与操作数据的源代码进行有机的结合,形成“类”,其中数据和函数都是类的成员. 将数据与对数据的操作 在一个结构体内实现,使用时仅需要调用接口即可. "封装"概念 的理解(2013-08-27 16:22:16),布布扣,bubuko.com

C语言(四)指针概念的理解

转载请标明出处: http://blog.csdn.net/u011974987/article/details/52270018: 前言 最近真的是忙的不可开交,公司一直给安排任务,连学习和写笔记的时间都没有了,落下好几次课的笔记都没有写,所以我抽空把目前的进度给追上来,不然会越落越多.加油吧~(感觉身体都要被掏空了) 指针 我们通过指针,可以简化一些 C 编程任务的执行,还有一些任务,如动态内存分配,没有指针是无法执行的.所以,学习指针是很有必要的. 正如您所知道的,每一个变量都有一个内存位

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

原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看到页面中盒子的结构.使用WebDeveloper工具条中的"OutLine"->"OutLine Level Element"菜单项,可以方便地显示盒子的边框和背景,从而让我们能从另外一个角度来审视页面的构成. 1.1 元素盒子的属性 1.边框(border):可

CSS伪类的理解

因为之前一直对css伪类没有过多的了解,在网上看到一段css代码,不能理解 a:hover span.title{ color:red; ......... } 现通过查询css手册,其实css伪类只是表示了一种状态,a:hover只是表示了鼠标悬浮状态下的a标签,和一般的a标签用法没有区别,a:hover span.title即表示为鼠标悬浮状态的a标签的span的样式,和a span.title 用法没有区别

架构漫谈(二):认识概念是理解架构的基础

在前一篇文章中,我们讨论了什么是架构.事实上,这些基础概念对于做架构是非常重要的,大部分人对于每天都习以为常的概念,都自以为明白了,但实际上都是下意识的,并不是主动的认识.比如说“什么是桌子?”,做培训的时候,我经常拿这个例子来问大家,回答千奇百怪.这实际上就导致了做架构的时候,不同角色的沟通会出很多问题,那么结果也就可想而知了. 如前一篇所说,架构实际上解决的是人的问题,而概念是人认识这个世界的基础,自然概念的认识就非常的重要.这篇文章尝试讨论一下,如何去认识概念.当然这篇不是语言学的文章,我

作用域、闭包等概念的理解

总结一下我对JS中这些基本却略纠结的概念的理解. 作用域 我们知道,JS不支持块级作用域,只支持函数作用域.函数体内,既不是局部变量,也不是参数的变量称为自由变量.如果没搞清楚函数的作用域,有时某些自由变量的值会与你所想的很不一样.举个简单例子 1 var a = 10; 2 3 function getA() { 4 alert(a); 5 } 6 7 (function() { 8 var a = 20; 9 getA(); //10 10 })(); 11 12 (function(fn)