overflow visibility opacity(透明度) vertical-align 等等

一,overflow属性; 
  1,四个值:
    visible     默认值。内容不会被修剪,会呈现在元素框之外。
    hidden        内容会被修剪,并且其余内容是不可见的。
    scroll        内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    auto        如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    inherit        规定应该从父元素继承 overflow 属性的值。
  2,demo:
     <body>
     <p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>
     <div>
     这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,
     不论是否需要,用户代理都会提供一种滚动机制。
     因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
     </div>
     </body>

<style type="text/css">
        div
     {
       background-color:#00FFFF;
       width:150px;
       height:150px;
       overflow: inherit;
     }
      </style>
二,显示效果(visibility);
   1,visibility 属性规定元素是否可见;
   2,visible:默认值,元素可见
      hidden:元素不可见,但是依然占据空间
      collapse:用在表格元素时,可删除一行或一列,且不影响表格的布局(后面学习JS再演示)
三,opacity:属性(设置不透明度);
   1,特点:opacity 属性设置元素的不透明级别
   取值 opacity : value;  eg:opacity:0.0~1.0
   value 规定不透明度,从 0.0 (完全透明)到 1.0(完全不透明)
   2,demo:
    <p id="p1">段落,opacity 值为 0</p>
    <p id="p2">段落,opacity 值为 0.5</p>
    <p id="p3">段落,opacity 值为 1</p>

css:
    p {border:1px solid black;}
    #p1 {opacity:0;}
    #p2 {opacity:0.5;}
    #p3 {opacity:1;}
四,vertical-align 属性;
   1,特点:vertical-align 属性;
     1),设置单元格框中的单元格内容的垂直对齐方式
     2),对于行内块级元素,如 <img>,可设置垂直对齐方式
     定义行内元素的基线相对于该元素所在行的基线的垂直对齐
   2,常用取值
      baseline:默认,元素放置在父元素的基线上
      top:把元素的顶端与行中最高元素的顶端对齐
      bottom:把元素的顶端与行中最低的元素的顶端对齐
      middle:把此元素放置在父元素的中部
   3,demo:
    <div class="div_img">
    <img src="images/star_focus.png" id="img1">
    <img src="images/star_focus.png" id="img2">
    <img src="images/star_focus.png" id="img3">
    </div>

css:
    .div_img
    {
    width:400px;
    height:100px;   
    border:1px solid black;
    }
    #img1{
    vertical-align:middle;
    }
    #img2{
    vertical-align:top;
    }
    #img3{
    vertical-align:bottom;
    }
五,几种常见的居中方式;
    1,文字的垂直居中
    <div style="line-height:50px;height:50px;(只有相同了才能垂直居中)background:red;">565656
    </div>
    2,层的水平居中:
      HTML:
      <div class="parent_div">
      <div class="child_div ">1111111111</div>
      </div>

CSS:
      .parent_div{
      width: 100%;
      background-color: gray;
      }
      .child_div
      {
       width: 580px;
       height: 35px;
       margin: 0 auto;
       background-color: red;
      }
    3,/*3,层中文字水平居中*/
       text-align:center;
       在2中例子中CSS中加上:text-align:center;
六,光标 cursor:
  可取值
  default :默认是 箭头
  pointer:小手
  crosshair :十字光标
  text :文本输入样式
  wait :旋转的圈,网速差时或卡了一下子读不出来的样子;
  help :问号光标,帮助时出现;
七,无序列表补充(list-style-type);
  1,无序列表取值
   none:无标记
   disc:实心圆,为默认值
   circle:空心圆
   square:实心方块
   decimal:数字(如 1,2,3,4,5),为默认值
   lower-roman:小写罗马数字(如  i, ii, iii, iv, v)
   upper-roman:大写罗马数字(如 I, II, III, IV, V)
  2,图片:list-style-image:url();
  3,list-style-position列表项位置
     outside:标记位于文本的左侧,且放置在文本以外,为默认值
     inside:标记放置在文本以内
display:block行元素转换成块元素;

时间: 2024-10-08 05:40:00

overflow visibility opacity(透明度) vertical-align 等等的相关文章

关于opacity透明度子元素继承现象的若干研究以及hack方法

[感想]信息时代的信息是有时效性的,今天是确确实实感受到了.互联网资料虽然丰富,但是质量不一,还有大量的跟风雷同,很多人都是随手拷贝过来,根本没有实践.以前端为例,这两年浏览器的迅猛发展,造成很多原有知识的失效.但是网上还是大量充斥了以前失效的解决方案.我觉得,我们应本着实践精神,对任何问题的解决方案进行实际测试.须知:纸上得来终觉浅,绝知此事要躬行. 今天遇到一个关于透明度的问题. 大家都知道在css3中增加的新属性opacity——不透明度的设定. 使用了opacity的元素,它的不透明度会

CSS3中的opacity透明度属性的继承问题如何解决

利用CSS3的透明属性opacity可以为我们创建对象的渐隐渐显的动画效果,但是很多情况下这种单一的渐隐渐显效果并不能满足我们的日常开发需求.有时候,我们需要在设置opacity属性的对象里面增加其子集对象,以达到符合我们的要求.但是CSS3的opacity ( 比如:opacity:0.5; )透明度属性具有继承性,当对某个对象设置了opacity透明度属性的时候,其子集元素也会有透明度效果. 使用rgba的背景色可以很直接的设置对象的透明度效果,而且对其子集元素没有继承性:而使用rgb色并设

line height 与 vertical align

一.line height 其中代表inline box(包含上下间距,若height==line-height,则行间距=line-height - font-size/2),big代表content area. 注: 若line-height < content area ,则line box要取line-height的值,这也是为什么会重叠的原因. line-height属性取值: 1. % 若自身没有设置line-height,则line-height = 父元素的font-size *

opacity透明度兼容全浏览器

filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; .transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;} UPDATE: I wanted to pull this post out of the archives and update it a bi

在IE中opacity透明度

body{ background: red; opacity: 0.5; filter:alpha(opacity=50); } jQuery: if($.support.opacity == ture){ $('body').css('opacity',0.5); }else{ $('body').css('filter','alpha(opacity=50)'); }

visibility, opacity,dispay 几个显示或者隐藏元素的区别

1. visibility: 规定元素是否可见 可能的取值: inherit:规定元素从父级元素继承 visibility 属性的值  visibile:默认值,元素是可见的: hidden: 元素是不可见的[即使元素的 visibility 值为 hidden,也会占据页面上的空间] <html> <head> <style type="text/css"> h1.visible {visibility:hidden} h1.invisible {

ie6-ie8中不支持opacity透明度的解决方法

大体结构:灰色半透明部分和城市文字是两个图层,绝对定位到图片的底部.因为放到一个图层的话文字也会变成半透明.半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常,是图上的效果.但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);此外这种效果不能用ietester中的ie6测试,因为ietester的ie6这样

IE浏览器部分版本不支持opacity透明度属性问题

半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常. 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); 此外这种效果不能用ietester中的ie6测试,因为ietester的ie6这样写也是不透明的,但是实际上ie6中已经显示正常了.

第十九节-opacity与visibility

opacity:(透明度):0 完全透明   1 完全不透明    0.5半透明(范围0~1) IE兼容写法:filter:alpha(opacity=50)  范围0~100,以50为例子 rgba的透明与opacity的透明区别是,rgba的透明并不会对内容产生影响比如对文字不会产生影响,但是opacity会对整体都产生影响. visibility:visible(默认值 可见) hidden(不可见 但占位置,与display:none有区别) visibility的hidden与opac