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. 微信小程序------基本组件

    今天主要是简单的讲一下小程序当中的一些组件,微信文档上也是有的.但我还是坚持写一下,因为写博客可以再一次得到提高,印象更深刻,虽然很简单,但贵在坚持. 先来看看效果图: 1:进度条(progress) ...

  2. Linux命令详解-hwclock/chock

    hwclock命令可以用来显示/设置硬件时钟命令. 在Linux中有硬件时钟与系统时钟等两种时钟.硬件时钟是指主机板上的时钟设备,也就是通常可在BIOS画面设定的时钟.系统时钟则是指kernel中 的 ...

  3. 1012: [JSOI2008]最大数maxnumber 线段树

    https://www.lydsy.com/JudgeOnline/problem.php?id=1012 现在请求你维护一个数列,要求提供以下两种操作:1. 查询操作.语法:Q L 功能:查询当前数 ...

  4. Node-Media-Server

    Node-Media-Server (相对稳定可用性高) 主要应用Node.js 实现的RTSP(结合ffmpeg)/RTMP/HTTP/WebSocket/HLS/DASH流媒体服务器 特性 跨平台 ...

  5. 论Sava(),SaveOrUpdate(),Merge()区别

    一.Save(): 用于将一个临时对象转变为持久化对象,也就是将一个新的业务实体保存到数据库中:相当于jdbc的insert. <假如两个实体之间有关系(例如employee表和address表 ...

  6. vue请求本地json数据

    1.下载vue-resource插件 cnpm install vue-resource 1.2全局引入vue-resource: 在main.js import VueResource from ' ...

  7. LeetCode OJ：Partition List（分割链表）

    Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...

  8. 【html】META http-equiv 大全

    meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <head><meta http-equiv="content ...

  9. popViewControllerAnimated 后的刷新问题

    popViewControllerAnimated后,进入的viewcontroller不能即时刷新. 这时它不执行viewDidLoad,但执行viewWillAppear:(BOOL),所以只要把 ...

  10. L162

    More than 250 corporate signatories joined together to try and deal with plastic pollution in an ann ...