一,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. python实现根据文件关键字进行切分为多个文件

    来源:在工作过程中,需要统计一些trace信息,也就是一些打点信息,而打点是通过关键字进行的,因此对一个很大的文件进行分析时,想把两个打点之间的内容单独拷贝出来进行分析 #!/usr/bin/env ...

  2. 用Delphi制作DLL

    一.开使你的第一个DLL专案  1.File->Close all->File->New﹝DLL﹞代码: //自动产生Code如下  library Project2;  //这有段 ...

  3. Structs复习 Path问题

    Path问题相对复杂 主要是路劲问题 但结论很简单 就是统一使用绝对路径 jar包 web.xml <?xml version="1.0" encoding="UT ...

  4. C# windows服务：如何检测指定的Windows服务是否启动

    public void CheckServerState(string ServiceName) { ServiceController[] service = ServiceController.G ...

  5. 立个FLAG

    今天再次初步浏览了寒假生活: 三篇阅读笔记(人月神话,梦断代码,程序员修炼之道:从小工到专家),2月24日之前发表开发记账本软件,连续七天以上发表开发进度 学会使用GitHub,录制抖音(父母评价作品 ...

  6. 2018面向对象程序设计（Java）第13周学习指导及要求

    2018面向对象程序设计(Java)第13周学习指导及要求 (2018.11.22-2018.11.25)  学习目标 (1) 掌握事件处理的基本原理,理解其用途: (2) 掌握AWT事件模型的工作机 ...

  7. linux下面设置密码失效参考

    chage -E 2005-12-31 user1 设置用户口令的失效期限

  8. Pandas文本操作之读取操作

    读写文本格式的数据 pandas中的解析函数 函数 说明 read_csv 从文件.url.文件型对象中加载带分隔符的数据,默认分隔符为逗号 read_table 从文件.url.文件型对象中加载带分 ...

  9. 581. Shortest Unsorted Continuous Subarray

      Given an integer array, you need to find one continuous subarray that if you only sort this subarr ...

  10. 每月IT摘录201811

    技术 1.打牢基础,从会使用-了解原理-了解思想一步一步来,最怕基础很弱但却以什么都用过为荣的人,这样的人我招进来也只是初级而已,工作年限再多也没有用.少林里面,有功和拳之分,如蛇拳猴拳是拳,马步功石 ...