1,<div></div>一张图作为背景的用法：

必须指定width,height，background属性

.smallCircle{ margin-top: 25px;  margin-left: 40%; width: 10px;height: 10px; background:url(../images/smallCirlce.png) no-repeat;}

2,div 让这个DIV居中布局。

.fdiv{margin: 0 auto;width: 998px;height: 462px;}

3，用position: relative 准确定位

.navbg{height: 100px; position: relative; top: -12px;background: url(../images/nav_02.png) no-repeat center top;}

.huodong5 .h_title{color: #02b5ba;font-size: 30px; font-weight:bold;position: relative;left: 141px;top:40px;}
.huodong5 .h_content{width: 494px;height: 196px;position: relative;left:341px;top: 100px; line-height:2.5; font-size:12px; letter-spacing: 2px;}
.huodong5 .h_content .leizhu1{font-size: 14px; color: #02b5ba; font-weight:bold;}

这里不推荐用relative，如果实在要用，则父元素相对定位，子 元素用position:absoulte;relative会使元素的宽高不变，

用padding-top取代top，padding-left取代left即可

position:absoulte默认找上层第一个position是absoulte或者relative没找到则相对于body绝对定位

4，父元素相对定位，子元素绝对定位，可以使子元素相对于父元素定位，right是相对于父元素的。

.container

{

	position:relative;

	width:500px;

	height: 20px;

	background-color: antiquewhite;

	left: 50px;

}

.right

{

	position:absolute;

	right:0px;

	width:300px;

	background-color:#b0e0e6;

}

</style>

</head>

<body>

<div class="container">

	<div class="right">

	<p><b>注释：</b>当使用 position 属性进行对齐时，请始终包含 !DOCTYPE 声明！如果省略，则会在 IE 浏览器中产生奇怪的结果。</p>

	</div>

</div>

5,inline和block和inline-block

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>极限X播报</title>

<style>

    span{width:500px; height:50px; background-color: aqua; display: inline-block;}

    .a1{display: block;}

</style>

</head>

<body>

    <span>我是内敛元素1</span><span>..我是内敛元素2</span><a class="a1" href="#">我是超链接</a></sp><div>我是block元素</div>

</body>

</html>

inline元素设置width,height不管用,block元素设置width,height管用，如果不设置则为浏览器最高宽,高为内容高

把inline元素设置为inline-block后设置宽和高才管用。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

block 此元素将显示为块级元素，此元素前后会带有换行符。

div,css常用技术的更多相关文章

  1. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  2. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

  3. CSS常用技术

    1.处理图片底部 5px 间距 <style> body {background: #2d97db;} .imgBox { background: #fff; font-size: 0; ...

  4. CSS常用技术总结！~~

    //放大屏幕,背景图不变 background: url(x.png) no-repeat 0 0; background-image: -webkit-image-set(url(logo_db.p ...

  5. HTML+CSS-采用DIV+CSS布局的利弊

    单纯的TABLE表格,在浏览器运行上面来说,其效率不如DIV+CSS方式快速,当然,这样也就会影响用的体验. 而且,针对于相同的HTML页面来说TABLE布局,不利于搜索引擎的爬虫爬行下载页面.从而造 ...

  6. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  7. 用DIV+CSS切割多背景合并图片 CSS Sprites 技术

    很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究. 近段时间一直在做前台的一些东西,涉及到很多div+css的问题.这个东东我又碰到了,所以我花了点时间 ...

  8. div+css样式表的id,class的常用命名规则

    div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...

  9. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

随机推荐

  1. flask学习(九)：模板渲染和参数传递

    一. 如何渲染模板 1. 模板放在templates文件夹下 2. 从flask中导入render_template函数 3. 在视图函数中,使用render_template函数,渲染模板 注意:只 ...

  2. Linux运维第二天：安装虚拟机软件及RHEL7.2 64位系统

    第一步:安装虚拟机 一路默认就行啦(还是要改下安装路径,嘿嘿) 第二步:安装RHEL7.2 64位系统 1.新建一个虚拟机 典型和自定义随便选(最后都可以调的) 一般大婶都喜欢选自定义(自己可以设置的 ...

  3. JavaScript---js的模块化

    js的模块模式被定义为给类提供私有和公共封装的一种方法,也就是我们常说的“模块化”. 怎么实现“模块化”? 通过闭包的原理来实现“模块化”  ,具体实现:1.必须有外部的封闭函数,该函数必须至少被调用 ...

  4. 利用expect和sshpass完美非交互性执行远端命令

    yum install expect -y expect 参考:http://blog.csdn.net/snow_114/article/details/53245466 yum install s ...

  5. C++复习1.内存管理的知识

    C++ 内存管理 1.内存分配的方式有三种: 从静态存储区分配:在程序编译期间已经分配好了,这些在程序的生命周期内都是有效的,如全局变量,static变量 一个例子: char * p = " ...

  6. Singleton单例类模式

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  7. 【python常见面试题】之python 中对list去重的多种方法

    在python相关职位的面试过程中,会对列表list的去重进行考察.(注意有时会要求保证去重的顺序性) 1.直观方法 li=[1,2,3,4,5,1,2,3] new_li=[] for i in l ...

  8. 进程与网络监控和ssh简单使用

    进程的概念和管理 进程: 正在执行的程序 线程: 轻量级的进程 进程有独立的地址空间,线程没有 线程不能独立存在,它是由进程创建.Thread1.在linux中,每个执行的程序都称为一个进程.每一个进 ...

  9. CUDA库函数使用笔记与案例（一）

    项目合作中需要整合对方公司提供的CUDA代码,因此需要详细学习代码中涉及的cuda函数. CUDA Tool Kit 8.0较完整的官方说明文档: http://docs.nvidia.com/cud ...

  10. diff和patch 打补丁

    在Linux环境下,有两个工具用来给project打补丁,即diff和patch diff         diff具有比较功能.可以使用man命令查看其使用方法. NAME        diff ...