HTML5知识点（第二节）

HTML5知识点（第二节）

盒子模型、页面布局与规划

   盒子模型原理
   标准文档流
   盒子浮动
   盒子塌陷
   盒子定位

盒子模型原理
    盒子模型概述
每个盒子都包含：边界（margin），边框（border），填充（padding）和内容（content）

边界：元素边框之外所占据的尺寸
边框：border
填充：内容与边距的距离
内容：标签中的文本或嵌入标签，用width，height设置尺寸

    盒子的大小
盒子的大小=内容+填充+边框
盒子的占据空间=内容+填充+边框+边距

标准文档流
    概述
    1、块状元素：

   <h1></h1>~<h6></h6>
    <p></p>
    <hr />
    <ul></ul>
    <ol></ol>
    <li></li>
    <dl></dl>
    <dt></dt>
    <dd></dd>
    <table></table>
    <div></div>
    <form></form>
    ...

    2、行内元素：

    <img />
    <span></span>
    <br />
    <a></a>
    ...

区别：
排列方式不同：行内元素从左到右依次排列，块状元素从上到下 >
内嵌元素不同：块状元素可包含行内元素，行内元素只能包含文本或其他行内元素 >
属性设置不同：行内元素设置height和width无效，但可设置line—height，magin和padding设置上下方向无效

    display属性：页面元素隐藏方式，隐藏以后浏览器消除元素，不占屏幕空间
    1、隐藏HTML元素

<style type="text/css">
    便签名|类名{
        display: none; 隐藏
        display:block; 块状显示
        display:inline;  行状显示
    }
</style>

    2、隐藏div

<div  style="display: none;"></div>
<div  style="display: display:block ;"></div>
<div  style="display: inline;"></div>

    visibility属性：页面元素隐藏显示方式，虽然被隐藏，但是元素还占有那块空间
    1、显示HTML元素

<style type="text/css">
    便签名|类名{
        visibility: hidden;  隐藏
        visibility: visible; 显示
    }
</style>

    2、显示div

<div  style="visibility: hidden; "></div>
<div  style="visibility: visible;"></div>

盒子浮动

   float：浮动定位方向
<style type="text/css">
    #id{
            float: none;默认
            float: left;左浮动
            float: right;右浮动
    }
</style>

浮动元素的特征：

脱离标准文档流，不占据页面空间
浮动元素显示在父元素的左侧或右侧
若存在浮动元素，则显示在浮动元素之后
浮动元素大小默认由内容决定，但可用width，height设置

   盒子塌陷
1、塌陷原因:
一个盒子使用了float属性，导致父容器被撑开
若一个元素的高度为自适应且该元素中的所有子元素均为浮动元素，此时该元素的高度为0，产生塌陷

2、塌陷影响:
背景不能显示
边框不能撑开
margin，padding设置的值不能正确显示

3、解决方法
对父元素设置合适的高度
clear：both；清楚浮动塌陷
父级div定义 overflow: hidden;

盒子定位
    1. 静态定位

position：static

    2.相对定位

position: relative;              

 
    3.固定定位

position: fixed;

    4.绝对定位

position: absolute;

 

---