• 认识Web和Web标准

    # 隐藏盒子的几种方式

    隐藏盒子，有以下几种方式：

    （1）方式一：

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

    （2）方式二：

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

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

    （3）方式三：

    visibility: hidden;   //隐藏盒子，占位置。
visibility: visible;   //让盒子重新显示
    1
    2
    3

    （4）方式四：

    opacity: 0;       //设置盒子的透明度（不建议，因为内容也会半透明），占位置
    1

    （4）方式五：

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

    （5）方式六：

    margin-left: 1000px;
    1

    # 设置盒子的半透明

    方式一：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;
    1
    2

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

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

    	<div>
		<a href=""></a>
	</div>
    1
    2
    3
    4

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

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

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

    # 背景图不能撑开盒子

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

    # JS

    # 超链接<a>的href跳转

    一个空白的超链接如下：

    <a href=""></a>
    1

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

    	href=""                    //刷新页面

	href="#"                   //跳转到当前页面的顶部（不会刷新）

	href="javascript:void(0)"  // 什么都不做

	href="javascript:;"        // 什么都不做
    1
    2
    3
    4
    5
    6
    7
    8