zoukankan      html  css  js  c++  java
  • div样式调整小结 转载

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

    2.使用padding设置对象的上下左右边距
     padding-left: 36pt;
     padding-right: 36pt; 
     padding-top: 36pt; 
     padding-bottom: 36pt; 
    例子:
    <div style=" 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; 740px">

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

  • 相关阅读:
    在未排序的数组中找到第 k 个最大的元素
    区域和检索
    控制台画图程序(可更换笔刷版本)
    循环中的scanf处理了换行符怎么破
    strlen获取字符数组为什么是255
    宽字符输出中文,Devc++解决方法
    区间取最小值最大值-位值和
    模拟鼠标键盘-封装函数
    scanf("%d",a[i]+j)为什么不加取地址符号
    scanf需要多输入一行是什么问题
  • 原文地址:https://www.cnblogs.com/sekai/p/5888400.html
Copyright © 2011-2022 走看看