div样式调整小结 转载

1.多个div使用会自动换行,应该使用float属性
  left :  对象浮在左边
  right :  对象浮在右边 
例如:
  float: left  和 float: right 是两个div左右排列在同一行
<div style="width: 20%; float: left; height: 100%">图片</div>
<div style="width: 50%; float: right; height: 100%">图片</div>

2.使用padding设置对象的上下左右边距
 padding-left: 36pt;
 padding-right: 36pt; 
 padding-top: 36pt; 
 padding-bottom: 36pt; 
例子:
<div style="width: 20%; float: left; height: 100%;padding-left: 36pt;">图片</div>

3.div中使用text-align : left | right | center | justify  ,调整包含内容的位置
参数: 
left :  左对齐
right :  右对齐
center :  居中
justify :  两端对齐 
说明: 
设置或检索【对象中文本的】对齐方式。 
例子:
<div style="text-align: right">一些超链接</div>

4.div使用vertical-align调整内部元素的垂直方向位置
vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length 
 参数: 
baseline :  将支持valign特性的对象的内容与基线对齐 
sub :  垂直对齐文本的下标 
super :  垂直对齐文本的上标 
top :  将支持valign特性的对象的内容与对象顶端对齐 
text-top :  将支持valign特性的对象的文本与对象顶端对齐【常用】 
middle :  将支持valign特性的对象的内容与对象中部对齐 
bottom :  将支持valign特性的对象的文本与对象底端对齐 
text-bottom :  将支持valign特性的对象的文本与对象顶端对齐 
例子:
vertical-align : center;

5.div中使用margin-top、margin-bottom、margin-left、margin-right检索或设置对象四边的外延边距。
(1)margin:如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
如果只提供一个,将用于全部的四边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。
示例:  
body { margin: 36pt 24pt 36pt; } 
body { margin: 11.5%; } 
body { margin: 10% 10% 10% 10%; } 
<div style="margin: 32px 0px; height: 220px; width: 740px">

(2)margin-top、margin-bottom、margin-left、margin-right
例子:
<div style="margin-top: 12px; height: 25px" id="div_password">

时间: 2024-11-05 16:33:13

div样式调整小结 转载的相关文章

DIV样式汇总

DIV样式汇总 最近在学习JavaScript,在做到个要控制控件样式的例子时,突然有了把常用样式汇总一下的想法,于是乎就写了以下内容,以下是以div为例来汇总的,希望对大家有些帮助. 一.常用属性: 1.Height:设置DIV的高度. 2.Width:设置DIV的宽度. 例: <div style="width:200px;height:200px;"></div> 3.margin:用于设置DIV的外延边距,也就是到父容器的距离. 例: Code 说明:m

系统变慢调整小结

客户反映系统越用越慢,重启服务器后段时间内系统恢复正常 老年代 垃圾回收不了. full gc 每分钟执行40次左右. 开始以为是内存泄漏,导出jvm内存快照 快照中可以看到线程池里有问题.但是看不出具体的问题原因 导出线程快照 没有发现可疑线程信息...  郁闷了..(当前时间19:21已经没有客户在操作系统了) 第二天继续今天的问题.上午客户打电话说又有问题了. 赶紧导出线程快照 $jstack pid "Running HTTPHandler-26" prio=10 tid=0x

解决IE和firefox 下flash盖住div的问题(转载)

原文地址:http://www.oschina.net/question/171410_26563 做的企业站 顶部是flash的滚动图片. 右侧是在线客户,但是flash盖住了在线客户的div 网上搜索解决方法如下: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/

Div样式查看器

编写div属性时,经常需要尝试不同的样式,可以用Javascript写一个简单的div样式查看器,方便日常操作: 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>div样式查看器</title> 6 <style> 7 #div1{ 8 height: 200px; 9 w

博弈论类题目小结——转载

出处http://blog.csdn.net/ACM_cxlove?viewmode=contents    by---cxlove 首先当然要献上一些非常好的学习资料: 基础博弈的小结:http://blog.csdn.net/acm_cxlove/article/details/7854530 经典翻硬币游戏小结:http://blog.csdn.net/acm_cxlove/article/details/7854534 经典的删边游戏小结:http://blog.csdn.net/acm

封装函数通过输入(元素,属性,目标值)改变div样式

## 假设一个div样式如下```html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-

各种div+css居中方式调整(转载)

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?)[+] Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: [css] view plaincopy .Absolute-Center

【转载】div层调整zindex属性无效原因分析及解决方法

在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效.在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或是fixed. 1.第一种情况(z-index无论设置多高都不起作用情况): 这种情况发生的条件有三个: 1.父标签 position属性为relative: 2.问题标签无position属性(不包括static): 3.问题标签含有浮动(fl

markdownpad2注册及样式调整

pro版密钥 邮箱: [email protected] key: GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6bnxn2kSE8qHqNY5QaaRxmO3YSMHxlv2EYpjdwLcPwfeTG7kUdnhKE0vVy4RidP6Y2wZ0q74f47fzsZo45JE2hfQBFi2O9Jldjp1mW8HUpTtLA2a5/sQytXJUQl/QKO0jUQY4pa5CCx20sV1C