zoukankan      html  css  js  c++  java
  • CSS 属性备注

    body {
        background: #fff;
        color: #444;
        font-size:16px;
        font-weight:300;    /*设置字体的粗细*/
        content:".";        
        visibility:hidden;  /*/
    }
    content:"."   在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式, 则外部的容器DIV因为内部没有clear,导致不能被撑开。这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。 在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的啦。

    visibility:hidden 对象隐藏后,还有占有相应的空间大小
    display:none 对象隐藏后,对象不占任何空间*
    font-weight:300  设置字体的粗细


    一.DIV水平垂直居中

    1 .col-center-block { 
    2 float: none; 
    3 display: block; 
    4 margin-left: auto; 
    5 margin-right: auto; 
    6 transform: translateY(45%); /**/
    7 }

     二.DIV内容居中

       auto;
        display: table;
        margin-left: auto;
        margin-right: auto;

    三.处理溢出内容

    overflow:scroll;  //溢出出现滚动条
    overflow:hidden;  //溢出隐藏

    四.大的背景图平铺不出现滚动条并完整显示

     1 body {
     2     background-image: url(../../Content/Image/Navigation/Navigation_bg.jpg);
     3     background-repeat: no-repeat;
     4     width: 100%;
     5     height: 100%;
     6     margin:0 auto;                  /*去掉滚动条*/
     7     background-attachment:fixed;    /*背景固定*/
     8     background-size:100% 100%;      /*完整显示*/
     9 
    10 }

    五、背景图片拉伸刚好铺满屏幕

        background-image: url(../../Content/Image/yuan.png);
        background-repeat: no-repeat;
        background-size:100% 100%;  //宽高

    六、div高度100%

    需要从html开始加height=100%;

    <html>元素没有margin和padding

    <body>元素有margin没有padding

    html{
        height:100%;
    }
    
    body{
    
        height:100%;
    
        margin:0;
    
    }
    
    .div{
        height:100%;             
    }

     white-space属性:规定段落中的文本不进行换行

    text-overflow 属性

  • 相关阅读:
    使用工具进行计算机取证
    SpringBoot整合Swagger2
    Filebeat安装部署
    Mac OS X上使用Wireshark抓包
    maven集成命令-U -B -P -e -X
    轻量级Mysql Sharding中间件——Shark
    Spring MVC的WebMvcConfigurerAdapter用法收集(零配置,无XML配置)
    Unity2D音游案例-节奏大师教程+源码+素材
    4款五星级的3D模型资源包
    CandyCrush 糖果传奇源码+素材+教程
  • 原文地址:https://www.cnblogs.com/xinyibufang/p/7245913.html
Copyright © 2011-2022 走看看