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

本文共 1501 字,大约阅读时间需要 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 此元素将显示为块级元素,此元素前后会带有换行符。 

转载地址:http://qepkx.baihongyu.com/

你可能感兴趣的文章
RESTful 架构详解
查看>>
父组件传值给子组件的v-model属性
查看>>
Python菜鸟之路:sqlalchemy/paramiko进阶
查看>>
用JAVA捕获屏幕、屏幕录像、播放
查看>>
结对编程-四则运算
查看>>
Android编译过程详解(三)
查看>>
【leetcode】835. Image Overlap
查看>>
eclipse报错: Unhandled event loop exception No more handles
查看>>
Spring整合Mybatis案例,献给初学的朋友
查看>>
LeetCode算法题-Reverse String II(Java实现)
查看>>
Android 当页面有多个按钮时,监听器的设置;
查看>>
[matlab] 10.最小覆盖
查看>>
http和https支持
查看>>
mysql 8小时自动断开连接
查看>>
基于gensim深入自然语言处理
查看>>
【CCF】Z字形扫描
查看>>
八数码问题_启发搜索
查看>>
Struts2笔记——struts.xml配置详解
查看>>
发一个 ExtJS 4.2.0 的页面源码(规则比对公式 的设置页面)
查看>>
Entity Framework Code First添加修改及删除单独实体
查看>>