一,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="data:images/star_focus.png" id="img1">
    <img src="data:images/star_focus.png" id="img2">
    <img src="data: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行元素转换成块元素； 

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

  1. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  2. CSS（三）背景 list-style display visibility opacity vertical cursor

    背景background 1.background-color:''   背景颜色 2.background-image:'' 背景图片 background-repeat:'' 背景图片是否平铺 取 ...

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

    [感想]信息时代的信息是有时效性的,今天是确确实实感受到了.互联网资料虽然丰富,但是质量不一,还有大量的跟风雷同,很多人都是随手拷贝过来,根本没有实践.以前端为例,这两年浏览器的迅猛发展,造成很多原有 ...

  4. CSS隐藏元素 display visibility opacity的区别

    { display: none; /* 不占据空间,无法点击 */ }  { visibility: hidden; /* 占据空间,无法点击 */ }  { position: absolute; ...

  5. opacity(透明度)属性设置

    1.opacity:是属性,整个元素包含子元素全部都会透明,取值范围0-1; 2.background-color:rgba(0,0,0,.5)rgba是值,用于背景,取值范围0-1. 补充:a-al ...

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

    ie6-ie8中是不支持的,需要加上下面这句话:filter: alpha(opacity=70);此外这种效果不能用ietester中的ie6测试,因为ietester的ie6这样写也是不透明的,但 ...

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

    半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常. 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: pro ...

  8. z-index层级顺序 opacity透明度 display: none 模态框实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 在IE中opacity透明度

    body{ background: red; opacity: 0.5; filter:alpha(opacity=50); } jQuery: if($.support.opacity == tur ...

随机推荐

  1. postmessage/cors跨域postMessage、xhr2和xmldomain

    一.h5 postMessage node http-server配置服务器 有关配置:请参考我的http://www.cnblogs.com/leee/p/5502727.html 我把文件夹a配置 ...

  2. Ajax 学习 第二篇

    XMLHttpRequest发送请求 open(method,url,async) 解释 method:do/post,不区分大小写 URL:相对地址 文档地址 async:默认为TRUE 即异步 F ...

  3. Swift自定义UINavigationController（背景颜色、背景图片、返回按钮设置、字体大小等）

    1.0  自定义UINavigationController时,背景图片.颜色等只需要设置一次,所以我们可以重写  initializa  这个方法来实现我们想要的效果 override  class ...

  4. Linux 安装 iptables防火墙

    CentOS7默认的防火墙不是iptables,而是firewalle. 安装iptable iptable-service #先检查是否安装了iptables service iptables st ...

  5. sqlmap自动注入

    基于python2.7开发 git clone https://github.com/sqlmapproject/sqlmap.git sqlmap-dev

  6. Java 管道PipedInputStream PipedOutStream PipedReader PipedWriter

    java中的管道流(pipeStream)是一种特殊的流,用于在不同线程间直接传送数据.一个线程发送数据到输出管道,另外一个线程从输入管道中读取数据.通过使用管道,实现不同线程间的通信,而不必借助类似 ...

  7. dubbo 实战

    dubbo 官网:http://dubbo.apache.org/zh-cn/docs/user/quick-start.html dubbo-admin 下载 : https://github.co ...

  8. Numpy：ndarray数据类型和运算

    Numpy的ndarray:一种多维数组对象 N维数组对象,该对象是一个快速而灵活的大数据集容器,nadarry是一个通用的同构数据多维容器,也就是说,其中的所有元素必须是相同类型的.每个数组都有一个 ...

  9. Aptana在Eclipse的安装

    1.下载 com.aptana.rcp.product-3.4.2.zip文件 https://pan.baidu.com/s/1sl81Vit 2.安装 接着Next.直到成功 3.怎么判定安装成功 ...

  10. tomcat指向外部项目

    参考 https://www.cnblogs.com/ysocean/p/6893446.html conf/server.xml中增加 <Context path="/myweb&q ...