博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
div样式调整小结
阅读量:5206 次
发布时间:2019-06-14

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

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">

转载于:https://www.cnblogs.com/qqzy168/archive/2013/06/14/3135364.html

你可能感兴趣的文章
查看Weblogic JNDI 树的几种方式
查看>>
组件之间的通信(持续补充)
查看>>
Objective-C基础教程学习笔记(七)Xcode快捷健
查看>>
Ubuntu下的UNITY和GNOME界面
查看>>
SVN备份及其还原 — dump/load方法
查看>>
设计模式-组合模式(Composite Pattern)
查看>>
没有工作经验,没有的究竟是什么?
查看>>
《沉思录卷二》做每一件事都像做最后一件事
查看>>
Axure RP 7.0注册码
查看>>
hdu1873 看病要排队【优先队列】
查看>>
Poj 2528 Mayor's posters (线段树+离散化)
查看>>
Hibernate集合的配置
查看>>
Maven发布项目 (jar包) 到Nexus私服中
查看>>
Spring - IoC(1): Spring 容器
查看>>
MongoDB - The mongo Shell, Configure the mongo Shell
查看>>
php include_path zendframework
查看>>
C#加快Bitmap的访问速度
查看>>
android 解释dp,px,pt,sp单位
查看>>
学习进度条 (第六周)
查看>>
毕业设计周记(第四篇)
查看>>