zoukankan      html  css  js  c++  java
  • css小tip

    1. <input>标签的默认样式

    当在页面中添加一个input标签,当点击输入框时会有一个外边框包裹着,可以使用 :
    input { outline: none} 去除点击时产生的外边框包裹默认样式

    input{border: none} 去除input标签的默认样式

    2. div自适应浏览器高度

    html,body{
    	height:100%;
    	overflow:hidden;
    }
    /*需要自适应的div*/
    .container {
    	height: 100%;
    }

    3. display:none与visible:hidden的区别

    display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:

    display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

    visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。

    例子:

    <html>
    <head>
    <title>display:none和visible:hidden的区别</title>
    </head>
    <body >
    <span style="display:none; 隐藏区域</span><span style=" background-color:Green">显示区域</span><br />
    <span style="visibility:hidden; 隐藏区域</span><span style="background-color:Green">显示区域</span>
    </body>
    </html>

    4.空格转义字符

    记录一下,空格的转义字符分为如下几种:

    平时一般用的是&nbsp;

    1. &nbsp;&160#;不断行的空白(1个字符宽度)

    2. &ensp;&8194#;半个空白(1个字符宽度)

    3. &emsp;&8195#;一个空白(2个字符宽度)

    4. &thinsp;&8201#;窄空白(小于1个字符宽度)

    平时一般用的是&nbsp;但是在中文中也许有时候更适合用&emsp;

    5. 垂直水平居中

    1. 父元素div设置为relative;

    2. 子元素div

    table{
                  position: absolute;
                  height: 200px;
                   380px;
                  top: 50%;
                  left: 50%;
                  margin-top: -100x;    //等于高度的一半
                  margin-left: -190px;   //等于宽度的一半
                }    
    

      

  • 相关阅读:
    java23种设计模式(五)--组合模式
    elasticsearch删除
    Jedis
    Redis主从复制(含哨兵模式)
    Redis持久化
    Redis基本知识(含数据类型)
    Linux学习(含有常用命令集)
    深入Kafka
    Kafka消费者
    Kafka生产者
  • 原文地址:https://www.cnblogs.com/shaunZh/p/5636168.html
Copyright © 2011-2022 走看看