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. Lograge(2350✨) 在产品环境显示定制改良的日志输出。

    Lograge https://github.com/roidrage/lograge 改良Rails默认的请求日志的记录. 它会精明的处理好那些noisy和无用的,未解析的,在context中运行多 ...

  2. Mysql5.7基于日志主从复制

    主从同步概念 主从同步是异步复制 Mysql两种复制类型: 基于二进制日志 使用GTID完成基于事务的复制 基于日志三种方式: Mysql5.7需要注意的问题: 老版本方法创建mysql用户 #mys ...

  3. 关于BFS和dijkstra（2019.04.20）

    我的BFS板子 struct node{/*略*/};//表示一个状态 std::map<node,bool>vis;//判断每个状态是否已访问过 std::queue<node&g ...

  4. 4666 Hyperspace stl

    当时自己做的时候没有这么想,想的是每个象限去找一个无穷值来作为比较点.但是很麻烦 代码: #include <stdio.h> #include <string.h> #inc ...

  5. Hadoop出现 Wrong FS: hdfs://......错误的解决方法

    今天在hadoop项目中出现以下报错:java.lang.IllegalArgumentException: Wrong FS: hdfs://......,expected: file:///... ...

  6. centos7 配置 NFS mount挂载服务器

    1. NFS服务端 安装NFS服务 yum install nfs_utils yum install rpcbind (系统默认已经有了,可查看下) 配置共享文件夹 1.    创建文件夹: mkd ...

  7. 【51nod-1091】线段的重叠(贪心)

    所有线段按起点从小到大排序,然后比较出最大的重叠部分.比如第i条线段和第j条线段进行比较找出重叠部分(j>i),当第j条线段的右端点<第i条线段的右端点,此时可以让i继续比较后面的线段:如 ...

  8. RabbitMQ(5) 事务&生产者确认

    事务&生产者确认 一般情况下,生产者将消息发送后,继续进行别的业务逻辑处理.消息从生产者发送后,可能由于网络原因丢失,也可能因为RabbitMQ服务端奔溃未被处理...总之,对于 消息是否安全 ...

  9. LeetCode OJ：Reorder List（重序链表）

    Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You must do thi ...

  10. SQL Plus常用命令

    1.常用命令:显示当前用户名:show user登录到数据库:conn[etc] 用户名/密码@网络[as sysdba / as sysoper]   简单写法:conn 用户名/密码    con ...