博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
div,css常用技术
阅读量:5872 次
发布时间:2019-06-19

本文共 1551 字,大约阅读时间需要 5 分钟。

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;}

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

5,inline和block和inline-block

极限X播报 我是内敛元素1..我是内敛元素2我是超链接
我是block元素

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

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

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

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

转载于:https://www.cnblogs.com/as3lib/p/4511673.html

你可能感兴趣的文章
PHP高手之路
查看>>
PHP 图片上传类 缩略图
查看>>
使用Leaflet创建地图拓扑图
查看>>
我的友情链接
查看>>
自动化运维框架
查看>>
FTP服务器管理和配置
查看>>
开源,并不意味着免费、开源,不是道德绑架
查看>>
无线传输测试方法
查看>>
大话射手座!
查看>>
mysql基础教程
查看>>
beaglebone black的cape管理
查看>>
查看当前Linux系统的发行版本命令详解
查看>>
memadmin
查看>>
我的友情链接
查看>>
centos7 配置虚拟交换机(物理交换机truck端口设置)(使用brctl)
查看>>
有软件开发,就要有软件测试!
查看>>
fpm打包
查看>>
框架会使程序员变笨吗?
查看>>
让你的大脑安静下来
查看>>
全面质量管理
查看>>