• css特性


    一,overflow属性; 
      1,四个值:
        visible     默认值。内容不会被修剪,会呈现在元素框之外。
        hidden        内容会被修剪,并且其余内容是不可见的。
        scroll        内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
        auto        如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
        inherit        规定应该从父元素继承 overflow 属性的值。
      2,demo:
         <body>
         <p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>
         <div>
         这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,
         不论是否需要,用户代理都会提供一种滚动机制。
         因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
         </div>
         </body>
     
         <style type="text/css">
            div
         {
           
           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
        {
        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{
          100%;
         
          }
          .child_div
          {
            580px;
           height: 35px;
           margin: 0 auto;
           
          }
        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行元素转换成块元素;
  • 相关阅读:
    布隆过滤器
    string.ToString("X")的含义,转换为16进制
    Stream.Write()和Stream.Read(), Stream.Flush的作用,待学习
    linux查看CPU,内存使用情况
    HttpContext.Current.Request.InputStream
    程序员常去的10个顶级开发社区
    JavaScript 对象初探
    PHP – 架構設計 Data Access Layer 篇
    如何用 JavaScript 动态呼叫函数
    PHP – EasyUI DataGrid 资料存的方式
  • 原文地址:https://www.cnblogs.com/yiwangdeyidianyuan/p/5649032.html
Copyright © 2020-2023  润新知