寒假学习笔记（6）

CSS框模型

CSS 内边距 padding

CSS 边框
border 把针对四个边的属性设置在一个声明。
border-style 边框样式
border-width 边框宽度
border-color 边框颜色
CSS 外边距 margin

CSS 外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

CSS定位
CSS position 属性：
static元素框正常生成

relative相对定位

元素相对于起点框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute绝对定位
元素框从文档流完全删除，并相对于其包含块定位。（会覆盖原本文档流）
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

什么是文档流？

overflow 滚动条属性：scroll，不论是否需要都有；hidden，隐藏滚动条；auto，自动处理溢出文本

Z-index 设置元素堆叠顺序：默认的 z-index 是 0。Z-index -1 拥有更低的优先级，相反，Z-index 1更高

------------------------------------------------------------------------------------

JS是干什么的？为静态的HTML页面提供动态交互或功能

JS函数
直接将代码写在事件里会很杂乱，引入function()函数，吧JS从标签里放入函数中，类似CSS的class
使用变量，将重复出现的代码起一个简短的别名，易于书写和观察
格式
function 函数名（）
{
　　var XX=XXXXXXXXX;(变量)

　　代码。。。;
}

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    #div1{width: 200px;height: 100px;background: #ccc;border: 1px solid #999;display: none;}
</style>
</head>

<body>
    <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';"/>
    <div id='div1'>鼠标移入显示，移出消失</div>
</body>
</html>

JS兼容问题直接使用ID会出现兼容问题，引入document.getElementById在任何浏览器下均可使用
任何标签都可以加ID属性，包括link html

函数的 if 判断

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>    
<style>
#div1 {width: 100px;height: 50px;background: #CCC;display: none;}
</style>
<script>    
function showHide()
{
    var oDiv=document.getElementById('div1');

    if(oDiv.style.display=='block')
    {
     oDiv.style.display='none';
    }
    else
    {
        oDiv.style.display='block';
    }
}
</script>
</head>

<body>
<input type="button" value="显示隐藏" onclick="showHide()" />
<div id = "div1"></div>
</body>
</html>