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. HIVE学习（待更新）

    1 安装hive 下载 http://mirrors.shu.edu.cn/apache/hive/hive-1.2.2/,红框中的不需要编译. 由于hive是默认将元数据保存在本地内嵌的 Derby ...

  2. 修改Pycharm for Mac背景色

    Mac 上面的Pycharm的背景是白色,太刺眼,网上教程那么多,实用性都不高,最终在csdn找到了一个. 修改步骤如下: pycharm -->Preferences --> Appea ...

  3. 常用git命令(一)

    git add 命令. 这是个多功能命令:可以用它开始跟踪新文件,或者把已跟踪的文件放到暂存区,还能用于合并时把有冲突的文件标记为已解决状态等. 将这个命令理解为“添加内容到下一次提交中”而不是“将一 ...

  4. SpringMVC启动和执行流程

    Spring框架大家用得很多,相当熟悉,但是我对里面的运作比较好奇,例如bean的加载和使用,和我们定义的配置文件有什么联系;又例如aop在什么时候起作用,原理又是怎样.经过一个了解后,整理了启动和执 ...

  5. CF910B

    题解: dp f[i][j]表示i根a,j根b要多少 然后随便转移一下 代码: #include<bits/stdc++.h> using namespace std; ][],n,a,b ...

  6. Jquery EasyUI Tree树形结构的Java实现（实体转换VO）

    前一阵做的OA项目,有一个是组织架构的树,因为是分开做的,我做的是Controller和页面,其他组做的Service和Dao,因为之前一直没有商量页面用什么框架做比较好,导致,Dao层取出来的数据都 ...

  7. PHP strip_tags() 函数的作用和用法

    strip_tags()函数可以轻松实现从字符串中去除 HTML 和 PHP 标记. 使用方法: trip_tags ( string $str [, string $allowable_tags ] ...

  8. GPU编程自学5 —— 线程协作

    深度学习的兴起,使得多线程以及GPU编程逐渐成为算法工程师无法规避的问题.这里主要记录自己的GPU自学历程. 目录 <GPU编程自学1 -- 引言> <GPU编程自学2 -- CUD ...

  9. 3PC

    3PC,是Three-Phase Commit的缩写,即三阶段提交,是2PC的改进版,其二阶段提交协议的"提交事务请求"过程一分为二,形成了由CanCommit,PreCommit ...

  10. Selenium+PhantomJS使用初体验

    抓取使用Ajax技术完成的网页内容时可以使用Selenium+PhantomJS技术 1.pip install selenium 2.下载Phantomjs不需要用pip   武汉科技大学首页有一块 ...