web前段day1

1.元素布局陷阱：

(1).内联元素在父元素中想要点竖直方向上的空白，只能使用line-height。

<div>    <span>只能使用line-height才能获得竖直方向上的空间</span></div>

(2).区块元素在父元素中想要竖直方向上的空白，可以在父元素/子元素中声明padding，但不能在子元素中声明margin！

原因：若父元素再竖直方向上没有指定padding和border，其中的第一个区块子元素的margin-top会超越父元素的空间；最后一个区块子元素的margin-bottom会超越父元素的空间。

<div>    <div>区块子元素使用margin-top/bottom要小心</div></div>

解决方法：1.给父元素竖直方向上的border/padding。2.父元素指定overflow：hidden。3.给父元素/子元素加竖直方向上padding（最优）

2.css外部文件中的资源路径：

HTML：

<link href="css/1.css"/>

CSS:

div{    background-image:url('../images/1.jpg');}

3.使用JavaScript控制元素的css样式

<script type="text/javascript">    function myFunc1(id,dp){          document.getElementById(id).style.display=dp;    }</script>

HTML:

<div onclick=""   onmouseover=""   onmouseout=""   onkeydown=""></div>