• css进阶 05-CSS的一些小知识


    05-CSS的一些小知识

    #隐藏盒子的几种方式

    隐藏盒子,有以下几种方式:

    (1)方式一:

    overflow:hidden;   //隐藏盒子超出的部分
    
     

    (2)方式二:

    display: none;	  隐藏盒子,而且不占位置(用的最多)
    
     

    比如,点击X,关闭京东首页上方的广告栏。

    (3)方式三:

    visibility: hidden;   //隐藏盒子,占位置。
    visibility: visible;   //让盒子重新显示
    
    
     

    (4)方式四:

    opacity: 0;       //设置盒子的透明度(不建议,因为内容也会半透明),占位置
    
     

    (4)方式五:

    Position/top/left/...-999px   //把盒子移得远远的,占位置。
    
     

    (5)方式六:

    margin-left: 1000px;
    
     

    #设置盒子的半透明

    方式一:opacity: 0.4。优点是方便。缺点是:里面的内容也会半透明。

    方式二:css3的技术来解决半透明。如下:

    • background: rgba(0,0,0,0.3);

    • background: rgba(0,0,0,.3);

    备注:a指的是alpha透明度。

    #给标签的形状设置为圆角矩形

    border-radius: 50%;
    border-radius: 10px 0 0 10px;
    
     

    #行高的问题:儿子把父亲撑开

    比如对于下面这样的标签:

    	<div>
    		<a href=""></a>
    	</div>
    
    
     

    前置条件:如果我们给父亲div的行高设为31px,然后给儿子a的行高也设置为31

    结果:当我们给儿子a设置了字体属性之后,会发现,父亲被撑高为32px了。因为font字体自身会比较大,多撑出了一个像素。

    解决办法:行内元素尽量不要设置font属性。对于行内元素而言,如果它和父亲都设置了行高,就不要去给自己设置font属性了。要么就,不要同时设置行高。

    #背景图不能撑开盒子

    高和行高都可以城开盒子,但背景图不能撑开盒子。

    #JS

    #超链接<a>的href跳转

    一个空白的超链接如下:

    <a href=""></a>
    
     

    当点击超链接时,由于 href 的属性值的不同,可以产生很多种情况:

    	href=""                    //刷新页面
    
    	href="#"                   //跳转到当前页面的顶部(不会刷新)
    
    	href="javascript:void(0)"  // 什么都不做
    
    	href="javascript:;"        // 什么都不做
    

     

  • 相关阅读:
    初步学习css 从css手册看起———text
    IE6双倍margin间距两大解决方案转载
    div+css的基本 常用到语法(一) 。
    初步学习css 从css手册看起———Font
    行内宽高设置无效的解决
    C++面对对象基础
    C++继承和派生
    基于MATLAB的FIR滤波器的设计
    C++多态
    C++中的静态成员和静态函数
  • 原文地址:https://www.cnblogs.com/yzy521/p/14132784.html
Copyright © 2020-2023  润新知